Javascript 去除图片 exif 信息

  • 业务场景是做一个写真上传的功能,需要去除图片的exif信息
  • 由于使用的是aws s3做图片存储(前端直接和s3进行交互,后端没有办法在传图片的过程中插一脚),只能在s3接收到图片之后对图片进行处理
  • 这样就产生了一个问题,前端不知道图片什么时候能处理完成,如果在图片没有处理完之前去请求图片,就拿不到图片资源,所以就产生了使用javascript去清除exif信息的想法。 本方法只适用于image/jpge类型图片,某国外大佬的思路
export const DeleteExif = (file) => {
  var fr = new FileReader();
  fr.onload = function () {
    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) {
        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" });
        // br就是处理完成之后的结果,这里在处理完成之后我进行了下载
        const link = document.createElement("a");
        const evt = document.createEvent("MouseEvents");
        link.style.display = "none";
        link.href = window.URL.createObjectURL(br);
        link.download = "me";
        document.body.appendChild(link);
        // 此写法兼容可火狐浏览器
        evt.initEvent("click", false, false);
        link.dispatchEvent(evt);
        document.body.removeChild(link);
      }
    }
  };
  fr.readAsArrayBuffer(file);
};

闲聊

当时遇到这个场景的时候我才工作不久

现在想来,直接把图给后端,让后端和aws交互不就好了么

目录