1

我似乎无法从我的画布（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>
4

2 回答 2

3

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

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

于 2011-07-20T14:42:25.570 回答
1

您正在从0to迭代height - 2，而您的计算说明了其他内容。您的计算使用完整的高度和宽度。

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

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

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

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

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

于 2011-07-20T14:41:40.773 回答