从图像中剥离EXIF数据 [英] Strip EXIF data from image

问题描述

如何通过javascript从上传的图片中删除EXIF数据？我目前能够使用这个exif-js插件访问EXIF数据，如下所示：

  EXIF.getData（oimg，function（）{
 var orientation = EXIF.getTag（this，Orientation）; 
} ）; 
  

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

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

解决方案

• 查找文件格式和 exif格式


• 读取文件到 arraybuffer


• 查找所需数据和将其删除


• 创建来自剩余数据的blob


• 上传使用 ajax

---

这是一个小小的演示，选择带有方向数据的图像，看看它的外观和外观（仅限现代浏览器）。

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

 < input id =erdtype =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\" ）; 
} 
函数进程（）{
 var dv = new DataView（this.result）; 
 var offset = 0，rece = 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（休息））; 
 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）; 
} 
} 
} 
  

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.

解决方案

• 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/

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

这篇关于从图像中剥离EXIF数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！