[SOLVED] Strip EXIF data from image

Strip EXIF data from image

How can I strip the EXIF data from an uploaded image through javascript? I am currently able to access the EXIF data using this exif-js plugin, like this:

EXIF.getData(oimg, function() {
    var orientation = EXIF.getTag(this, "Orientation");
});

However, I have not found any way to actually remove the Exif data, only to retrieve it.

More specifically, I am trying to do this to get rid of the orientation Exif data which rotates my image on certain browsers.

Solution

look up the file format and exif format
read the file into arraybuffer
find the required data and remove it
create a blob from the remaining data
upload it with ajax

Here is a little demo of it, select an image with orientation data to see how it looks with and with out it(modern browsers only).

http://jsfiddle.net/mowglisanu/frhwm2xe/3/

var input = document.querySelector('#erd');
input.addEventListener('change', load);
function load(){
    var fr = new FileReader();
    fr.onload = process;
    fr.readAsArrayBuffer(this.files[0]);
    document.querySelector('#orig').src = URL.createObjectURL(this.files[0]);
}
function process(){
    var dv = new DataView(this.result);
    var offset = 0, recess = 0;
    var pieces = [];
    var i = 0;
    if (dv.getUint16(offset) == 0xffd8){
        offset += 2;
        var app1 = dv.getUint16(offset);
        offset += 2;
        while (offset < dv.byteLength){
            //console.log(offset, '0x'+app1.toString(16), recess);
            if (app1 == 0xffe1){

                pieces[i] = {recess:recess,offset:offset-2};
                recess = offset + dv.getUint16(offset);
                i++;
            }
            else if (app1 == 0xffda){
                break;
            }
            offset += dv.getUint16(offset);
            var app1 = dv.getUint16(offset);
            offset += 2;
        }
        if (pieces.length > 0){
            var newPieces = [];
            pieces.forEach(function(v){
                newPieces.push(this.result.slice(v.recess, v.offset));
            }, this);
            newPieces.push(this.result.slice(recess));
            var br = new Blob(newPieces, {type: 'image/jpeg'});
            document.querySelector('#mod').src = URL.createObjectURL(br);
        }
    }       
}

img{
    max-width:200px;
}

<input id="erd" type="file"/><br>
<img id="orig" title="Original">
<img id="mod" title="Modified">