javascript - 使用 EXIF 和 BinaryFile 出错

Question

在我使用的移动网络浏览器中使用 input[type='file'] 捕获照片后，我尝试在 Canvas 中以正确的方向绘制照片:

fileReader.onloadend = function() {
    var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));

    switch(exif.Orientation){
       case 8:
           ctx.rotate(90*Math.PI/180);
           break;
       case 3:
           ctx.rotate(180*Math.PI/180);
           break;
       case 6:
           ctx.rotate(-90*Math.PI/180);
           break;
    }
};

但我得到:TypeError: First argument to DataView constructor must be an ArrayBuffer?

如何获取这个数组缓冲区？

我正在使用 EXIF.js 和 BinaryFile.js

Answer 1

您需要将 base64 字符串转换为 ArrayBuffer对于 ExifJs:

function base64ToArrayBuffer (base64) {
    base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
    var binaryString = atob(base64);
    var len = binaryString.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
        bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes.buffer;
}

你不需要BinaryFile:

var exif = EXIF.readFromBinaryFile(base64ToArrayBuffer(this.result));

这假设您使用 FileReader 和 readAsDataURL 来获取 this.result。

更好的方法 是首先将文件作为数组缓冲区读取，而不是将其转换为 base64，然后使用 FileReader.readAsArrayBuffer() 再次返回。类似这样的东西(伪代码):

// `file` = files[0] from input change event
function getFileArrayBuffer(file) {
  return new Promise(function (resolve, reject) {
    var reader = new FileReader();
    reader.onload = function() {
      resolve(new Uint8Array(reader.result));
    }
    reader.readAsArrayBuffer(file);
  });
}