2

所以，我在<script>零件内部创建的“上下文”变量上使用了这个函数 getImageData，当我做一些事情比如画一个矩形然后做 ctx.getImageData.data[0] 它会显示红色我在画布上绘制的那个矩形的值。但是，当我导入图像并将其绘制到画布上并尝试使用 getImageData.data[0] 时，我得到的只是 0，这是没有意义的，我不确定它为什么不能正确读取图像。我已经尝试过这方面的教程，但它们都很模糊，只有部分写在一起。

所以，当我绘制矩形时，它的颜色值就很好了，但是当我绘制图像时，即使没有在画布上绘制矩形，我也永远不会得到图像上那个特定像素的值。

有人能帮我吗？这是我当前的代码：

<html>
<head>
<title>
Color Test :)
</title>
</head>

<body>

<canvas id = "ColorTest" width = "500" height = "500">
please don't use shitty browsers :)
</canvas>

<script>


//netscape.security.PrivilegeManage…
var canvas = document.getElementById("ColorTest")
, ctx = canvas.getContext("2d")
, image = new Image()

image.onload = function(){
ctx.drawImage(image,0,0)
}


image.src = 'Pikachu.gif'


ctx.fillStyle = "rgb(123,40,170)"
ctx.fillRect(0,0,100,100)



var imagedata = ctx.getImageData(0,0,100,100)
, spot = 0

while(imagedata.data[spot] == 0){
spot++
}

console.log(imagedata.data[0])


</script>
</body>
</html>
4

2 回答 2

2

以下提醒有什么意义吗？

image.onload = function() {
  ctx.drawImage(image, 0, 0);
  var id = ctx.getImageData(0,0,canvas.width,canvas.height);
  alert([id.data[0], id.data[1], id.data[2], id.data[3]].join(", "));
}
于 2011-07-13T16:35:53.550 回答
1

可能是图像是透明的。尝试使用单色非透明图像。

你使用的是什么浏览器？不允许在从另一个域加载图像时使用 getImageData（安全问题），如果我没记错的话，有些浏览器在本地运行脚本时无法确定域

于 2011-07-11T09:35:26.353 回答