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

【问题标题】：Can't get image data from canvas. What am I doing wrong?无法从画布获取图像数据。我究竟做错了什么？
【发布时间】：2011-10-09 10:55:22
【问题描述】：

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

【问题讨论】：

在我的 Chrome 12 jsfiddle.net/va3C5 上运行良好。请检查它是否适合您，如果适合，您的问题出在其他地方。
什么工作正常？我在该页面上看不到任何控制台输出。
日志中的输出：imgur.com/xwYxR
@Niklas .. 乔说他有零而不是没有日志......
是的，同样的事情：全为零。我想要 0 和 255s 的混合

标签： javascript html5-canvas

【解决方案1】：

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

如果您先绘制一个白色 20x20 矩形，然后绘制一个黑色 10x10 矩形，一切都会正常工作 (have a look here)。

【讨论】：

【解决方案2】：

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

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

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

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

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

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

【讨论】：