读取画布像素的RGB值

Question

我在画布中放置了一个图像，希望当用户将鼠标悬停在图像上时，可以获取该图像像素的RGB值。以下是我编写的代码：

<canvas id="myCanvas" width="200" height="200" style="border: red;border-style: dotted">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var destX = 0;
var destY = 0;

var imageObj = new Image();
imageObj.onload = function()
{
context.drawImage(imageObj, destX, destY);
};
imageObj.src = "zain.jpg";

canvas.onclick = function(e) {
    var x = e.pageX;
    var y = e.pageY;
    var canvasColor = context.getImageData(x, y, 1,1); // rgba e [0,255]
    var pixels = canvasColor.data;
    var r = pixels[0];
    var g = pixels[1];
    var b = pixels[2];
    document.body.style.backgroundColor = "rgb("+r+','+g+','+b+")";
}

- Zain

---

关于你当前的代码，有两个快速评论。1. 确保将getImageData的w和h设置为1而不是其他值（getImageData(x, y, 1, 1)）。2. 设置CSS如下："rgb("+r+","+g+","+b+")"; 。你需要按照这种格式来格式化输出以匹配规范。 - Juho Vepsäläinen

@bebraw 我已经更新了代码，但是仍然没有任何反应，我的代码在调用getImageData()函数之后不能正确执行。你能否帮我一个忙，复制我的代码并在你的端上运行它。非常感谢！ - Zain

您的代码在此处似乎工作正常。但是要记住一件重要的事情！ 您需要在本地服务器上运行脚本。否则，getImageData将给出SECURITY_ERR错误（请检查您的控制台）。 - Juho Vepsäläinen

我正在本地机器上运行它，但是我不知道为什么在getImageData()调用之后我的代码没有正确执行。 :( - Zain

是的，你说得对。在调用getImageData()函数后，它会出现安全错误。你能建议我如何处理吗？ - Zain

成功了，我通过try catch处理了异常 :) 非常感谢 - Zain

Answer 1

试试这样做：

var color = document.getElementById("color");
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var imageObj = new Image();
imageObj.onload = function(){
    context.drawImage(imageObj, destX, destY);
};
imageObj.src = "zain.jpg";

canvas.onmousemove = function(e) {
    // not so sure about these... might need to offset them or so
    var x = e.x;
    var y = e.y;

    // set color now
    var canvasColor = context.getImageData(x, y, 1, 1).data; // rgba e [0,255]
    var r = canvasColor[0];
    var g = canvasColor[1];
    var b = canvasColor[2];

    color.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
}

请注意，这个代码片段需要你在某个地方有一个id为“color”的div元素。它会在那里设置像素的颜色。

- Juho Vepsäläinen

---

通过使用您的代码，我在画布中推送的图像现在也无法显示，请帮助我解决这个问题。 - Zain

getImageData() 返回的是 ImageData 对象，而不是数组。当你访问 canvasColor[0...2] 时它里面什么都没有。你需要访问 canvasColor.data[0...2]。 - Xenethyl

很好的观点。已添加。我通常使用自己的Canvas包装器而不是纯API。;) - Juho Vepsäläinen

嗨，我已经检查了代码行 var canvasColor = context.getImageData(x, y, w, h); // rgba e [0,255] 不起作用，我不知道发生了什么，请帮帮我。 - Zain

据我所知，在您调用getImageData()时，w和h未定义。您只需要一个像素，因此可以在其中硬编码值为1。另外，我不太确定为什么您现在在帖子中加入了有关浏览器不支持画布元素的评论。如果您的浏览器不支持画布元素，则无法执行任何操作。 - Xenethyl

Answer 2

您需要查找的是getImageData()调用。

因此，您的解决方案将如下所示：

function getColor(canvas, x, y) {    
    var context = canvas.getContext("2d");
    var pixel = context.getImageData(x, y, 1, 1);

    // Red = rgb[0], green = rgb[1], blue = rgb[2]
    // All colors are within range [0, 255]
    var rgb = pixel.data;

    return rgb;
}

function canvasMouseMove(e) {
    var x = e.layerX, y = e.layerY;
    var rgb = getColor(canvas, x, y);
    var rgb_string = "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")";

    document.body.style.backgroundColor = rgb_string;
}

canvas.onmousemove = canvasMouseMove;

正如@bebraw所指出的那样，您可能需要根据使用的浏览器不同来处理鼠标位置。为此，您可以考虑使用jQuery或其他JS库来简化操作。

- Xenethyl