HTML5 - görüntüyü yeniden boyutlandırın ve yeniden boyutlandırılan görüntüde EXIF'i koruyun

Question

Bir görüntüyü nasıl yeniden boyutlandırabilirim (HTML5 canvas öğesini kullanarak) ve EXIF ​​bilgilerini orijinal görüntüden nasıl koruyabilirim? EXIF bilgilerini orijinal görüntüden alabilirim ancak yeniden boyutlandırılan resme nasıl kopyalanacağımı bilmiyorum.

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

EXIF ​​alımı için, ben exif.js kitaplık kullanıyorum:

Bu benim sunucu tarafı kod göndermek için boyutlandırılan görüntü verilerini almak nasıl.

Answer 1

Çalışma çözeltisi:

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

Ve ana kod, bu sayfadan HTML5 resizer bir parçası olarak alınan: HTML5 resim boyutlandırma ile ExifRestorer.js

Kullanımı https://github.com/josefrichter/resize/blob/master/public/preprocess.js (kısmen değiştirilmiş)

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

Tuval, 20 bytes başlıklı görüntüler üretir (jpeg veri bölümleri başlamadan önce). Orijinal dosyadan exif segmentleri ile baş dilimleyebilir ve yeniden boyutlandırılan ilk 20 bayt yerini alabilirsiniz.

Answer 3

O ... benim kod 'ExifRestorer.js' kullanılır görünüyor

Ben tuval görüntüyü yeniden boyutlandırma deneyin ettik. Yeniden boyutlandırılan görüntünün kalitesiz olduğunu hissettim. Öyle hissettiysen, kodumu dene. Kodum JPEG'yi bilineer enterpolasyon ile yeniden boyutlandırıyor. Tabii ki exif kaybetmez.

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