如何从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);

然后我用这个返回的数据创建一个clampedarray.

我现在想要做的是现在将这个像素数组直接绘制到画布上 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数据,或者我的初始获取像素数组的方法可能不正确.

总而言之,我希望能够通过html5 fileReader API获取一个findbuffer(jpeg),然后创建一个与canvas兼容的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]