javascript - HTML5 - 画像のサイズを変更し、サイズ変更後の画像に EXIF を保持する

Question

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

これは、サイズ変更された画像データを取得してサーバー側のコードに送信する方法です。

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

EXIF の取得には、exif.jsライブラリを使用しています。

Answer 1

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