javascript - HTML5 - 调整图像大小并在调整后的图像中保留 EXIF

Question

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

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

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

对于 EXIF 检索，我使用 exif.js图书馆。

Answer 1

工作解决方案:ExifRestorer.js

使用 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'});
}

和主要代码，作为本页 HTML5 resizer 的一部分:https://github.com/josefrichter/resize/blob/master/public/preprocess.js (但略有修改)

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);
 };
};