因此，我在 <script> 内创建的“上下文”变量上使用此函数 getImageData部分，当我做一些事情，比如绘制一个矩形，然后执行 ctx.getImageData.data[0] 时，它将显示我在 Canvas 上绘制的矩形的红色值。但是，当我导入图像并将其绘制到 Canvas 上，并尝试使用 getImageData.data[0] 时，我得到的只是 0，这没有任何意义，我不确定为什么它没有正确读取图像。我已经尝试过这方面的教程，但它们都很模糊，而且只有一些片段写在一起。
因此，当我绘制矩形时，它的颜色值显示得很好，但同样，当我绘制图像时，即使没有在 Canvas 上绘制矩形，我也永远不会获得图像上该特定像素的值。
有人可以帮助我吗？这是我当前的代码:
<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>
最佳答案
以下警报是否有任何合理之处？
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(", "));
}
关于javascript - getImageData 函数的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6647748/