ImageData字节长度不是4*宽度的倍数

Question

我在创建ImageData时遇到问题.我收到以下错误消息:

未捕获的IndexSizeError:无法构造"ImageData":输入数据字节长度不是(4*宽度)的倍数.

这是我正在运行的方法:

public setPixelData(data: Buffer, width: number, height: number) {
    var imageData = new ImageData(new Uint8ClampedArray(data), width, height);
    this.canvas.getContext('2d').putImageData(imageData, 0, 0);
}

我已经转储了数据,这就是显示的内容:

data = Uint8Array[632028]
width = 720
height = 720

那么,这个错误的原因是什么,以及如何解决？

Answer 1

我遇到了同样的问题，显然数组大小需要是宽度、高度和 4 的倍数。正如Daniel正确指出的那样，与 4 相乘是由于 RGBA 颜色空间所致，该空间由红色、绿色、蓝色和 alpha 四个通道组成。

所以对于你的情况： 720 * 720 * 4 等于 2073600

var width = 720, height = 720;
var data = new ImageData(
  new Uint8ClampedArray(4 * width * height),
  720,
  720
);
console.log(data);