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

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

来源

2011-07-20 Joe

在我的Chrome 12 http://jsfiddle.net/va3C5/上正常工作。请检查它是否适用于您，如果是这样，您的问题在别处。 – Niklas

什么工作正常？我看不到该页面上的任何控制台输出。 – Joe

在日志中的输出：http://imgur.com/xwYxR – Niklas

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

如果您第一次绘制白色的20x20矩形，然后是黑色的10x10矩形，一切都会正常工作（have a look here）。

来源

2011-07-20 14:42:25

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

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

您的白色像素正在照亮身体背景颜色（这是白色） - 画布的像素不是白色而是透明的。

所以要开门见山，只是重复这样的：分别

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

与同为年。并记住透明度。

来源

2011-07-20 14:41:40 pimvdb

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

回答

相关问题