Question

首先，我知道有一些实现此目标的标准方法（readAsDataURL和drawImage），但不幸的是它们不能用于这个特定的用例。

我正在使用filereader API作为数组缓冲区读取图像，如下所示：

    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获取一个（通过jpeg）获取的arraybuffer，然后创建一个与canvas兼容的imageData数组，以便稍后可以使用{{1 }}

提前致谢。

Answer 1

修改

JPEG 文件不是简单的颜色数据字节数组，因此您不能像这样简单地加载它。如果您想在不直接导入画布的情况下解决此问题，则必须使用 JPEG 解码库，例如我通过快速谷歌搜索找到的this project by 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]

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

1 个答案: