HTML5-调整图像大小，并在调整大小的图像中保持EXIF

HTML5 - resize image and keep EXIF in resized image

本文关键字：图像 调整 EXIF HTML5-      更新时间：2023-09-26

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

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

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

对于EXIF检索，我使用的是EXIF.js库。

工作解决方案：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调整大小器的一部分，从这个页面：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);
 };
};

您可以使用copyExif.js.

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

此外，如果你只想保留exif，就没有必要使用exif.js。只需将整个APP1标记从原始JPEG复制到目标画布blob，它就会正常工作。这也是copyExif.js的作用。

用法

演示：https://codepen.io/tonytonyjan/project/editor/XEkOkv

<input type="file" id="file" accept="image/jpeg" />

import copyExif from "./copyExif.js";
document.getElementById("file").onchange = async ({ target: { files } }) => {
  const file = files[0],
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d");
  ctx.drawImage(await blobToImage(file), 0, 0, canvas.width, canvas.height);
  canvas.toBlob(
    async blob =>
      document.body.appendChild(await blobToImage(await copyExif(file, blob))),
    "image/jpeg"
  );
};
const blobToImage = blob => {
  return new Promise(resolve => {
    const reader = new FileReader(),
      image = new Image();
    image.onload = () => resolve(image);
    reader.onload = ({ target: { result: dataURL } }) => (image.src = dataURL);
    reader.readAsDataURL(blob);
  });
};

看起来我的代码在'ExifRestorer.js'中使用…

我试着通过画布调整图像大小。我觉得调整大小后的图像质量不好。如果你也有这种感觉，试试我的代码。我的代码通过双线性插值调整JPEG的大小。当然它不会失去exif。

https://github.com/hMatoba/JavaScript-MinifyJpegAsync

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

Canvas生成具有20字节标头的图像（在jpeg数据段开始之前）。您可以用原始文件中的exif段对头部进行切片，并在调整大小的文件中替换前20个字节。

相关文章：