0

我正在使用画布从图像中获取像素值。图像尺寸为 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...

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

4

1 回答 1

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;
于 2013-09-21T18:05:43.220 回答