javascript - 从 Canvas 获取像素的颜色

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]);

但是，当我执行上面显示的代码时，它总是给出相同的结果:“0 0 0 0”或“0 0 0 255”，无论图像的实际颜色是什么。 我尝试了不同的颜色，输出​​总是相同的。 有人可以解释一下为什么会发生这种情况吗？ 为什么只有 alpha 值发生变化？ (以及为什么它总是只有 0 或 255) 也许我应该以某种方式转换结果，或者我没有正确地得到它们？

Answer 1

example jsbin you've linked to注释中的效果很好(除了 e.pageX ，它应该是 e.pageY ，但这并没有改变结果)，这里的问题是实际的预期结果.

用黑色绘制的地方，您会得到0 0 0 255(即不透明的黑色)。在未绘制的地方(因此呈红色)，您将得到 0 0 0 0，即“默认值 (0)”和透明，这就是为什么您会看到背景红色显示出来。此时 Canvas 上实际上没有任何东西 - 它是透明的。

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

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);	
}

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