从画布获取像素的颜色

Getting color of pixel from canvas

本文关键字：像素 颜色 获取 布获取      更新时间：2023-09-26

我发现了很多例子，展示了如何在图像的某个点获得像素的颜色。基本上它们看起来都很相似。例如：

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 255"，无论图像的实际颜色是什么。我尝试了不同的颜色，输出总是一样的。有人能解释一下为什么会发生这种事吗？为什么只有阿尔法值在变化？（以及为什么它总是只有0或255）也许我应该以某种方式预测结果，或者我没有得到正确的结果？

您在注释中链接到的示例jsbin运行良好（除了e.pageX，它应该是e.pageY，但这不会改变结果），这里的问题是实际的预期结果。

如果它是用黑色绘制的，就会得到0 0 0 255（即不透明的黑色）。在没有绘制的地方（因此是红色），您会得到0 0 0 0，它是"默认值（0）"，透明，这就是为什么您会看到背景红色显示出来。在那一点上，画布上实际上没有——它是透明的。

下面是一个更新的示例，其中画布被拆分为4个。前3列显示不同的输出，而最后一列是0 0 0 0，因为当时没有绘制画布-背景颜色不是画布的图像数据的一部分。

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>

相关文章：