读取画布像素的 RGB 值答案

【问题标题】：Reading the RGB value of a canvas pixel读取画布像素的 RGB 值
【发布时间】：2011-09-10 18:48:58
【问题描述】：

我在画布中放置了一个图像，当用户将鼠标移到图像上时，我想获取该图像像素的 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+")";
}

【问题讨论】：

两个关于您当前代码的快速方法。 1. 确保 getImageData w 和 h 设置为 1 (getImageData(x, y, 1, 1)。2. 像这样设置 CSS "rgb("+r+","+g+","+b+")" ; . 您需要像这样格式化输出以匹配规范。
@bebraw 我已经更新了代码，但仍然没有发生任何事情，我的代码在 getImageData() 函数调用之后没有立即执行。你能帮我一个忙，你复制我的代码并在你最后运行它。会非常感谢你！
您的代码似乎在这里工作。不过，有一件重要的事情要记住！您将需要在本地服务器上运行脚本。否则 getImageData 会给你 SECURITY_ERR （检查你的控制台）。
我在本地机器上运行它，但我不知道为什么我的代码在 getImageData() 调用后没有立即执行。 :(
是的，你是对的，它在 getImageData() 函数调用之后立即给出安全错误，你能建议我，如何处理它？

标签： javascript html canvas html5-canvas

【解决方案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 + ')';
}

请注意，sn-p 期望您在某处有一个 id 为“color”的 div。它在那里设置像素颜色。

【讨论】：

stackoverflow.com/questions/4848310/… 有一些关于鼠标坐标问题的信息。
通过使用你的代码，我在画布中推送的图像现在也没有显示，请帮助我。
我已经更新了代码，请看一下，但还是同样的问题，我没有收到 RGB 值
getImageData() 返回一个 ImageData 对象，而不是一个数组。当您访问 canvasColor[0...2] 时，它不包含任何内容。您需要改为访问 canvasColor.data[0...2]。
好点。补充说。我通常使用自己的 Canvas 包装器而不是纯 API。 ;)

【解决方案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 库以简化操作。

【讨论】：