如何调整图片大小（使用HTML5 canvas 元素）并保留原始图片的EXIF信息？我可以从原始图像中提取EXIF信息，但我不知道如何将其复制到调整大小的图像。
这是我如何检索调整大小的图像数据发送到服务器端代码：
canvas.toDataURL（image / jpeg，0.7）;
对于EXIF检索，我使用库。 解决方案
使用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）;
};
};
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保留在调整大小的图像中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！