HTML5 - 调整图像大小并将EXIF保留在调整大小的图像中 [英] HTML5 - resize image and keep EXIF in resized image

问题描述

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

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

  canvas.toDataURL（image / jpeg，0.7）; 
  

对于EXIF检索，我使用 exif.js 库。 解决方案

ExifRestorer.js

使用HTML5图片调整大小：

 函数dataURItoBlob（dataURI）
 {
 var binary = atob（dataURI.split（'，' ）[1]）; 
 var array = []; 
 for（var i = 0; i< binary.length; i ++）{
 array.push（binary.charCodeAt（i））; 
} 
返回新的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）; //载入数据...旧版本
 reader.readAsDataURL（file）; // load data ... new version 
 reader.onload = function（event）{
 // blob stuff 
 // 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 = new Image（）; 
 image.src = blobURL; 
 
 image.onload = function（）{
 
 //必须等到它被加载
 var resized = ResizeImage（image）; //将它发送到画布
 
 resized = ExifRestorer.restore（event.target.result，resized）; //< = EXIF 
 
 var newinput = document.createElement（input）; 
 newinput.type ='hidden'; 
 newinput.name ='html5_images []'; 
 newinput.value =已调整大小; //将canvas中的结果放入新的隐藏输入
 form.appendChild（newinput）; 
}; 
}; 
  

How can I resize an image (using an HTML5 canvas element) and keep the EXIF information from the original image? I can extract EXIF info from from original image but I don't know how to copy it to the resized image.

This is how I retrieve the resized image data to send to the server-side code:

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

For EXIF retrieval, I'm using the exif.js library.

解决方案

Working solution: ExifRestorer.js

Usage with HTML5 image resize:

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

And main code, taken as part of HTML5 resizer from this page: https://github.com/josefrichter/resize/blob/master/public/preprocess.js (but slightly modified)

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

这篇关于HTML5 - 调整图像大小并将EXIF保留在调整大小的图像中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！