HTML5 - イメージのサイズを変更し、サイズ変更されたイメージにEXIFを保持

Question

イメージのサイズを変更するにはどうすればいいですか？（HTML5 canvas要素を使用して）元のイメージからEXIF情報を保持するにはどうすればよいですか？元の画像からEXIF情報を抽出できますが、サイズ変更された画像にコピーする方法はわかりません。

これは私がサーバー側のコードを送信するためにリサイズした画像データを取得する方法である：EXIF検索のため

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

、私はexif.jsライブラリを使用しています。

Answer 1

作業溶液：ExifRestorer.js

HTML5画像サイズ変更と使用法：このページから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'}); 
} 

メインコード：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); 
}; 
}; 

Answer 2

キャンバスは、20バイトのヘッダを持つ画像を生成します（jpegデータセグメントが開始される前）。元のファイルからexifセグメントで頭をスライスし、最初の20バイトをサイズ変更したものに置き換えることができます。

Answer 3

それは私のコードが「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);