Question

我似乎无法从我的画布（Chrome 12）获取像素数据。我做错了什么？

完整的例子。我的所有控制台日志都为零。我希望混合黑白像素。

澄清：我正在画一个黑色方块来测试我是否可以正确检索像素数据。我希望有些255, 255, 255（白色）和一些0, 0, 0（黑色）。我只获得白色像素数据。

<html>
<canvas id="canvas" style="border: 1px solid black" width="20" height="20"></canvas>

<script>
var x;
var y;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

// some of the pixels should be black, some white.
context.fillRect(0, 0, 10, 10);

var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

for (y = 0; y < imageData.height; y ++)
{
    for (x = imageData.width - 1; x >= 0; x--)
    {
        console.log(x, y,
        imageData.data[((y*(imageData.width*4)) + (x*4)) + 0],
        imageData.data[((y*(imageData.width*4)) + (x*4)) + 1],
        imageData.data[((y*(imageData.width*4)) + (x*4)) + 2]);
    }
}
</script>
</html>

Answer 1

我尝试过，并经历了同样的事情。为什么？查看alpha通道：您在图片上看到白色的区域实际上是黑色，不透明度值为0（这意味着它们是完全透明的）。因此，你看，通过，又名。背景，是白色的。

如果你先画一个白色的20x20矩形，然后画一个黑色的10x10矩形，一切都会正常工作（have a look here）。

Answer 2

你正在从0迭代到height - 2，而你的计算却说了别的。您的计算使用完整的高度和宽度。

其次，白色像素不是白色而是透明的。因为如果将主体背景更改为绿色，则像素变为绿色。 alpha属性确认了这一点（数据的索引3）：http://jsfiddle.net/va3C5/1/。

您的白色像素在身体背景颜色（白色）中闪耀 - 画布的像素不是白色而是透明。

所以说到这一点，只需迭代：

for(var x = 0; x < imageData.width; i++) { ... }

和y分别相同。并牢记透明度。

无法从画布获取图像数据。我究竟做错了什么？

2 个答案: