如何从JPG的arrayBuffer表示创建一个canvas imageData数组?

Question

首先，我知道有实现这一点的标准方法(readAsDataURL和drawImage)，但不幸的是，它们不适用于这个特定的用例。

我正在使用filereader API作为arraybuffer读取图像，如下所示:

    var reader = new fileReader();
    reader.onload = function(e){
          var byteArray = new Uint8ClampedArray(e.target.result);
          //do stuff to this array
    }
    reader.readAsArrayBuffer(file);

然后用返回的数据创建一个夹子数组。

我现在想要做的是使用putImageData

直接将这个像素数组绘制到画布上

当前我正在做以下操作:

var byteArray = new Uint8ClampedArray(e.target.result);
var imgdata = ctx.createImageData(img.width, img.height);
var canvdata = imgdata.data;
for (var i = 0; i < canvdata.length; i += 4) {
    canvdata[i] = byteArray[i];
    canvdata[i + 1] = byteArray[i + 1];
    canvdata[i + 2] = byteArray[i + 2];
    canvdata[i + 3] = byteArray[i + 3];
}
ctx.putImageData(imgdata, 0, 0);

使用这种方法，虽然数据被绘制到画布上，但它看起来像乱码的雪或噪音，并不是图像的正确表示。

这让我相信我在循环中构造的imagedata数据不正确，或者我获得像素数组的初始方法不正确。

总而言之，我希望能够采取arraybuffer (jpeg)通过html5 fileReader API检索，然后创建一个画布兼容的imageData数组，以便以后可以使用putImageData推入画布

Answer 1

编辑

一个JPEG文件不是一个简单的颜色数据字节数组，因此你不能像这样简单地加载它。如果你想在不直接导入画布的情况下解决这个问题，你必须使用JPEG解码库，例如这个项目由notmasteryet，我通过快速谷歌搜索找到。

原来

不幸的是，它们不适用于这个特定的用例

为什么它们不可用?

// example array
u = new Uint8ClampedArray(4);
u[0] = 255, u[1] = 56, u[2] = 201, u[3] = 8; // [255, 56, 201, 8]
// to String
str = String.fromCharCode.apply(null, u); // "ÿ8É"
// to Base64
b64 = btoa(str); // "/zjJCA=="
// to DataURI
uri = 'data:image/jpeg;base64,' + b64; // "data:image/jpeg;base64,/zjJCA=="

和反向

// uri to Base64
b64 = uri.slice(uri.indexOf(',')+1);
// to String
str = atob(b64);
// to Array
arr = str.split('').map(function (e) {return e.charCodeAt(0);});
// to Uint8ClampedArray
u = new Uint8ClampedArray(arr); // [255, 56, 201, 8]