使用 EXIF 和 BinaryFile 会出错

Question

我正在尝试在我正在使用的移动网络浏览器中使用input[type='file'] 拍摄照片后在画布中以正确的方向绘制照片：

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

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

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

Answer 2

@chings228 您必须将 base64 数据传递给 base64ToArrayBuffer，而不是 blob 数据。

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

var b64 = "data:image/jpeg;base64,"+$parameters.image;
var exif = EXIF.readFromBinaryFile(base64ToArrayBuffer(b64));
alert(exif.Orientation);