HTML5 - zmień rozmiar obrazu i zachowaj EXIF ​​w obrazie o zmienionym rozmiarze

Question

Jak zmienić rozmiar obrazu (przy użyciu elementu HTML5 canvas) i zachować informacje EXIF ​​z oryginalnego obrazu? Mogę wyodrębnić informacje EXIF ​​z oryginalnego obrazu, ale nie wiem, jak skopiować go do obrazu o zmienionym rozmiarze.

ten sposób odzyskać dane obrazu o zmienionym wysłać do kodu po stronie serwera:

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

do pobierania EXIF, używam biblioteki exif.js.

Answer 1

Roztwór roboczy: ExifRestorer.js

Wykorzystanie z HTML5 zmiany rozmiaru obrazu:

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

A główny kod, podjęte w ramach HTML5 Resizer z tej strony: https://github.com/josefrichter/resize/blob/master/public/preprocess.js (ale nieco zmodyfikowane)

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

Płaszczyzna generuje obrazy z nagłówkiem 20 bajtów (przed rozpoczęciem segmentowania danych jpeg). Możesz wycinać głowę z fragmentami exif z oryginalnego pliku i zastępować pierwsze 20 bajtów w rozmiarze 1.

Answer 3

To wygląda mój kod jest używany w „ExifRestorer.js” ...

mam spróbować zmiany rozmiaru obrazu przez płótno. Czułem, że obraz o zmienionym rozmiarze jest złej jakości. Jeśli tak czujesz, spróbuj mojego kodu. Mój kod zmienia rozmiar JPEG na podstawie interpolacji dwuliniowej. Oczywiście, że nie straci 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);