如何将 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;

我也尝试过“new 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

您绝对不需要复制整个数组。查看有关此主题的 MDN 文档。

这是一个示例，我使用它来调整图像大小，无需 DOM API，仅使用原始像素数据： https://jsfiddle .net/n3drn8v9/4/