HTML5 - 調整圖像大小並將EXIF保留在調整大小的圖像中

如何調整圖像大小（使用HTML5 canvas元素）並保留原始圖像中的EXIF信息？我可以從原始圖像中提取EXIF信息，但我不知道如何將其複製到調整大小的圖像。HTML5 - 調整圖像大小並將EXIF保留在調整大小的圖像中

這是我如何找回調整後的圖像數據發送到服務器端代碼：

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

對於EXIF檢索，我使用的exif.js庫。

來源

2013-08-18 Martin Perry

工作溶液：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); 
}; 
};

來源

2013-08-18 10:15:55

你創建一個GitHub庫爲您ExifRestorer.js文件，添加一個許可證，以便其他人可以使用它？或者你會明確說明其他人可能在你的答案中使用代碼的條款嗎？ –

@KennyEvitt你可以使用你喜歡的代碼。我創造它，我剛剛加入了不同代碼的幾個部分。 –

@MartinPerry - 它完美的與我的代碼 - 我做一些畫布圖像處理 - 然後我能夠恢復數據。但是我想覆蓋圖像exif方向值。一旦我用畫布旋轉圖像 - exif方向仍然不正確。有沒有解決方案？ – krystiangw

畫布生成具有20個字節標題的圖像（在jpeg數據段開始之前）。您可以從原始文件中切割exif段的exif段，並替換調整大小的前20個字節。

來源

2014-09-21 01:56:44 Vitaly

看來我的代碼是「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);

來源

2015-02-19 02:35:19 hMatoba

HTML5 - 調整圖像大小並將EXIF保留在調整大小的圖像中

回答

相關問題