Question

我发现了很多例子，展示了如何在图像的特定点获得像素颜色。基本上所有这些都看起来很相似。例如：

canvas = document.getElementById('something'); 
context = canvas.getContext('2d'); 
var pixel = context.getImageData(x, y, 1, 1).data;
console.log(pixel[0] + ' ' + pixel[1] + ' ' + pixel[2]);

然而，当我执行上面显示的代码时，它总是给我相同的结果：＆＃34; 0 0 0 0＆＃34;或者＆＃34; 0 0 0 255＆＃34;，无论图像的实际颜色是什么。我尝试了不同的颜色，输出总是一样的。有人可以解释一下我发生这种情况的原因吗？为什么只有alpha值才会发生变化？（以及为什么它总是只有0或255）也许我应该以某种方式投射结果，或者我没有正确地得到它们？

Answer 1

评论中的example jsbin you've linked to工作正常（e.pageX除了e.pageY，但不会改变结果），这里的问题是实际预期结果。

如果它以黑色绘制，则会得到0 0 0 255（即不透明的黑色）。如果它没有被绘制（因此是红色的），那么您将获得0 0 0 0，这是＆＃34;默认值（0）＆＃34;和透明，这就是为什么你会看到背景红色显示的原因。那时画布上没有 - 它是透明的。

这是一个更新的示例，其中画布被拆分为4.前3列显示不同的输出，而最后一列是0 0 0 0，因为画布未在此处绘制 - 背景颜色不是画布的图像数据的一部分。

＆＃13;

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 75, 150);
ctx.fillStyle = "blue";
ctx.fillRect(75, 0, 75, 150);
ctx.fillStyle = "yellow";
ctx.fillRect(150, 0, 75, 150);


function echoColor(e){
  
	var imgData = ctx.getImageData(e.pageX, e.pageY, 1, 1);
	red = imgData.data[0];
	green = imgData.data[1];
	blue = imgData.data[2];
	alpha = imgData.data[3];
	console.log(red + " " + green + " " + blue + " " + alpha);	
}

＆＃13;

<canvas id="myCanvas" width="300" height="150" style="background:red;" onclick="echoColor(event)">
</canvas>

＆＃13;

从画布获取像素的颜色

1 个答案: