如何将Array转换为CanvasPixelArray或创建CanvasPixelArray对象？

Question

我在PHP中获得了一个图像的像素数据，我希望将其传输到Javascript。

我唯一的问题是PHP返回一个我在Javascript数组中转换的字符串，而ImageData.data不是一个数组，而是一个CanvasPixelArray。

var cvsPixelAr = [arStrFromPHP];
var imgData = ctx.createImageData(dim[0], dim[1]);
imgData.data = cvsPixelAr;

我也试过“新的CanvasPixelArray（）;”，但仍然没有。

有人知道一项工作吗？ 如果不是，我将使用网络工作者来改变每一个值： - /。

由于

Answer 1

我相信你必须将这些项目分段复制到最终数据数组中：

var imgData = ctx.createImageData(dim[0], dim[1]);
var d = imgData.data;
for (var i=0,len=d.length;i<len;++i) d[i] = cvsPixelAr[i];

Answer 2

对我来说，这很有效：

ctx.putImageData(
    new ImageData(someUintArray, width, height ),
    0,0
);

不要忘记这个公式必须适用：

someUintArray.length == width*height*4

你definitelly不需要复制整个数组。检查MDN docs on this topic。

以下是一个示例，我使用它来调整没有DOM API的图片大小，只使用原始像素数据：https://jsfiddle.net/n3drn8v9/4/