Javascript HTML5-调整图像大小并将EXIF保留在已调整大小的图像中

如何调整图像大小（使用HTML5

canvas

元素）并保留原始图像中的EXIF信息？我可以从原始图像中提取EXIF信息，但我不知道如何将其复制到调整大小的图像中

这是我检索大小调整后的图像数据以发送到服务器端代码的方式：

canvas.toDataURL("image/jpeg", 0.7);

对于EXIF检索，我正在使用库。

工作解决方案：

使用HTML5图像调整大小：

function dataURItoBlob(dataURI) 
{
    var binary = atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}

函数dataURItoBlob（dataURI） { var binary=atob（dataURI.split（'，）[1]）； var数组=[]； 对于（var i=0；i 和主代码，作为本页HTML5 resizer的一部分：（但略有修改）

var reader=newfilereader（）；
//reader.readAsArrayBuffer（文件）//加载数据。。。旧版本
reader.readAsDataURL（文件）//加载数据。。。新版本
reader.onload=函数（事件）{
//斑点状的东西
//var blob=new blob（[event.target.result]）；//创建blob…旧版本
var blob=dataURItoBlob（event.target.result）；//创建blob…新版本
window.URL=window.URL | | window.webkitURL；
var blobURL=window.URL.createObjectURL（blob）；//并获取它的URL
//辅助图像对象
var image=新图像（）；
image.src=blobURL；
image.onload=函数（）{
//我得等到装完才行
var resized=ResizeImage（image）；//将其发送到画布
resized=ExifRestorer.restore（event.target.result，resized）；//画布生成具有20字节头的图像（在jpeg数据段开始之前）。您可以使用原始文件中的exif段对头进行切片，并替换调整大小后的头20个字节。
看起来我的代码用于“ExifRestorer.js”

我尝试过通过画布调整图像大小。我觉得调整大小的图像质量不好。如果你也这么认为，请尝试我的代码。我的代码通过双线性插值调整JPEG的大小。当然，它不会丢失exif


你可以用

该模块比Martin的解决方案更高效，只使用Blob和ArrayBuffer，不使用Base64编码器/解码器

此外，如果您只想保留EXIF，则无需使用。只需将整个APP1标记从原始JPEG复制到目标画布blob即可。这也是如何实现的

用法
演示：



从“/copyExif.js”导入copyExif；
document.getElementById（“文件”）.onchange=async（{target:{files}}}）=>{
常量文件=文件[0]，
canvas=document.createElement（“canvas”），
ctx=canvas.getContext（“2d”）；
drawImage（等待blobToImage（文件），0，0，canvas.width，canvas.height）；
帆布托布(
异步blob=>
document.body.appendChild（wait blobToImage（wait copyExif（file，blob）），
“图像/jpeg”
);
};
常量blobToImage=blob=>{
返回新承诺（解决=>{
const reader=new FileReader（），
图像=新图像（）；
image.onload=（）=>解析（图像）；
reader.onload=（{target:{result:dataURL}}}）=>（image.src=dataURL）；
reader.readAsDataURL（blob）；
});
};
你会为你的ExifRestorer.js文件创建一个GitHub repo并添加一个许可证，以便其他人可以使用它吗？还是会在你的回答中明确说明其他人可以使用该代码的条款？@KennyEvitt你可以随意使用代码。我无法创建它，我只是将不同代码的几个部分连接在一起了。@MartinPerry-效果很好直接用我的代码-我做了一些画布图像操作-然后我就可以恢复数据了。但是我想覆盖图像exif方向值。一旦我用画布旋转图像-exif方向仍然不正确。有什么解决方案吗？感谢ExifRestorer.js。可爱的脚本！让ExifRestorer.js使用不同的文件类型工作租用jpeg有必要将库中出现的
'data:image/jpeg；base64'
替换为
/data:image\/\w+；base64，/
。我已根据需要对上述代码进行了一些更改。现在图像正在旋转，我想将“方向”设置为0，你能帮我吗？我不能使用“ctx.transform”，因为我需要“Blob对象”位于末尾。
var reader = new FileReader();

//reader.readAsArrayBuffer(file); //load data ... old version
reader.readAsDataURL(file);       //load data ... new version
reader.onload = function (event) {
// blob stuff
//var blob = new Blob([event.target.result]); // create blob... old version
var blob = dataURItoBlob(event.target.result); // create blob...new version
window.URL = window.URL || window.webkitURL;
var blobURL = window.URL.createObjectURL(blob); // and get it's URL

// helper Image object
var image = new Image();
image.src = blobURL;

image.onload = function() {

   // have to wait till it's loaded
   var resized = ResizeImage(image); // send it to canvas

   resized = ExifRestorer.restore(event.target.result, resized);  //<= EXIF  

   var newinput = document.createElement("input");
   newinput.type = 'hidden';
   newinput.name = 'html5_images[]';
   newinput.value = resized; // put result from canvas into new hidden input
   form.appendChild(newinput);
 };
};

function post(data) {
    var req = new XMLHttpRequest();
    req.open("POST", "/jpeg", false);
    req.setRequestHeader('Content-Type', 'image/jpeg');
    req.send(data.buffer);
}

function handleFileSelect(evt) {
    var files = evt.target.files;

    for (var i = 0, f; f = files[i]; i++){
        var reader = new FileReader();
        reader.onloadend = function(e){
            MinifyJpegAsync.minify(e.target.result, 1280, post);
        };
    reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);