从图像中去除 EXIF 数据

Question

如何通过 javascript 从上传的图片中去除 EXIF 数据？我目前可以使用this exif-js plugin 访问 EXIF 数据，如下所示：

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

但是，我还没有找到任何方法来实际删除 Exif 数据，只能检索它。

更具体地说，我试图这样做是为了摆脱在某些浏览器上旋转我的图像的方向 Exif 数据。

Answer 1

• 查找file format 和exif format
• read the file 转为 arraybuffer
• find 所需数据和remove it
• 从剩余数据创建blob
• upload 它与ajax

---

这是它的一个小演示，选择一个带有方向数据的图像，看看它在有和没有它的情况下看起来如何（仅限现代浏览器）。

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

<input id="erd" type="file"/>

var input = document.querySelector('#erd');
input.addEventListener('change', load);
function load(){
    var fr = new FileReader();
    fr.onload = process;
    fr.readAsArrayBuffer(this.files[0]);
    window.open(URL.createObjectURL(this.files[0]), "_blank", "toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400");
}
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'});
            window.open(URL.createObjectURL(br), "_blank", "toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400");
        }
    }       
}