js 读取图片扩展信息

将图片转为ArrayBuffer

  var http = new XMLHttpRequest();
  http.onload = function() {
      if (this.status == 200 || this.status === 0) {
          // console.log(http.response)
          let arrbuffer = http.response;
      }
      http = null;
  };
  http.open("GET", img.src, true);
  http.responseType = "arraybuffer";
  http.send(null);
  ps: responseType为blob也可以，将返回的blob用fileReader转为ArrayBuffer

截取ArrayBuffer,获取扩展信息起始位置和结束位置

  // 根据标识信息获取索引
  function findIPTCinJPEG(arrBuffer)) {
    // arrayBuffer 是二进制数据，不能够直接读取，需要借助dataView接口进行处理
    var dataView = new DataView(arrBuffer);
    var offset = 0,
        length = arrBuffer.byteLength;
    // 标识位信息是FFE1，为16进制
    var isFieldSegmentStart = function(dataView, offset){
        return dataView.getUint16(offset) === 0xFFE1;
    };
    while (offset < length) {
        if (isFieldSegmentStart(dataView, offset)){
            break;
        }
        offset++;
    }
    return offset
  }
  let i = findIPTCinJPEG(arrbuffer);
  /**
   * 第一个2表示 FF E1 2字节
   * 第二个2表示 00 00 2字节
   */
  let start = i + 2 + 2;
  /**
   * 第一个8表示公司名称，8字节
   * 第二个4空 4字节
   * 第三个16表示泊位号 16字节
   * 第四个16表示车牌号 16字节
   */
  let end = start + 8 + 4 + 16 + 16;
  let sliceBuffer = arrbuffer.slice(start, end);

根据编码格式解析ArrayBuffer

  // 利用fileReader读取二进制数据，解析为文本
  function ab2str(u, fn) {
    var b = new Blob([u]);
    var r = new FileReader();
    r.readAsText(b, 'utf-8');
    r.onload = function (){
      let content = r.result;
      // ai    1234567890   京A12345
      let arr = content.split('\x00\x00\x00\x00\x00\x00')
      fn(arr);
    }
  }

将解析后的信息，给图片打水印

  <img :src="picSrc"  style="width: 600px;height: 400px"/>

  // ArrayBuffer转blob
  let blob = new Blob([arrbuffer], {type: "image/jpeg"});
  // blob转文件
  let picSrc = window.URL.createObjectURL(blob);
  let image = new Image();
  image.crossOrigin = 'anonymous';
  image.src = picSrc;
  image.onload = function() {
    // 获取图片真实宽高
    const w = image.width;
    const h = image.height;
    // 创建canvas绘制原图
    let originCanvas = document.createElement("canvas");
    let ctx = originCanvas.getContext("2d");
    originCanvas.setAttribute("width", w);
    originCanvas.setAttribute("height", h);
    ctx.drawImage(image, 0, 0);
    // 将公司名称、泊位号、车牌号打水印
    ctx.font = '100px Helvetica Neue';
    ctx.fillStyle = "white";
    ctx.textBaseline = "middle";
    ctx.fillText(str[0], 100, 150);
    ctx.fillText(str[1], 500, 150);
    ctx.fillText(str[2], 1100, 150);
    let src1 = originCanvas.toDataURL("image/jpeg");
    // 显示图片打水印之后的效果图
    that.picSrc = src1;
    // 将base64转为文件
    let fileData = dataURLtoFile(src1, "image");
    window.URL.revokeObjectURL(picSrc);
  };
  function dataURLtoFile(dataurl, filename) {
    let arr = dataurl.split(",");
    let mime = arr[0].match(/:(.*?);/)[1];
    let bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
  }