javascript - HTML5 - resize image and keep EXIF in resized image -

how can resize image (using html5 canvas element) , keep exif information original image? can extract exif info from original image don't know how copy resized image.

this how retrieve resized image data send server-side code:

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

for exif retrieval, i'm using exif.js library.

working solution: exifrestorer.js

usage html5 image resize:

function datauritoblob(datauri)  {     var binary = atob(datauri.split(',')[1]);     var array = [];     for(var = 0; < binary.length; i++) {         array.push(binary.charcodeat(i));     }     return new blob([new uint8array(array)], {type: 'image/jpeg'}); } 

and main code, taken part of html5 resizer page: https://github.com/josefrichter/resize/blob/master/public/preprocess.js (but modified)

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); // , it's url  // helper image object var image = new image(); image.src = bloburl;  image.onload = function() {     // have wait till it's loaded    var resized = resizeimage(image); // send 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 canvas new hidden input    form.appendchild(newinput);  }; };