画布图像数据获得的值不超过 102,000 个？

Question

我正在使用画布从图像中获取像素值。图像大小为 170*170 像素。这是我的代码：

var canvas = document.createElement("canvas");
canvas.style.width = img.width;
canvas.style.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
var pixelData = canvas.getContext('2d').getImageData(0, 0, img.width, img.height).data;

它运行良好，我在像素数据中有值，直到我达到像素数据[102000]...我用白色图像对其进行了测试，从 pixelData[0] 到 pixelData[101999] 的所有值都是 255，但直到最后它都是 0......

有人明白为什么吗？也许这是关于画布的宽度和高度？

Answer 1

您的画布大小与您想象的不符。

您只是设置画布元素的大小，而不是画布位图：

canvas.style.width = img.width;
canvas.style.height = img.height;

这意味着您的位图大小实际上是 300 x 150 像素，这是默认大小，您只需将其缩放到图像的大小（因为它全是白色的，您将无法如此轻松地检测到这一点）。

由于您的图像为 170

x 170 像素，因此您只会绘制画布的一部分，其余部分保留为默认 RGBA 值 [0,0,0,0]。

为了正确设置画布的大小，您必须将上述行编辑为：

canvas.width = img.width;
canvas.height = img.height;