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;

效果很好，我在pixelData中有值，直到我到达pixelData [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;

Canvas ImageData的值不超过102,000？

1 个答案: