javascript 读取画布像素的 RGB 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7373851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reading the RGB value of a canvas pixel
提问by Zain
I have put an image in canvas and I want to get the RGB value of the pixels of that image when the user moves the mouse over the image. Here is the code which I have written:
我在画布中放置了一个图像，当用户将鼠标移到图像上时，我想获得该图像像素的 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+")";
}
回答by Juho Veps?l?inen
Try something along this:
沿着这个尝试一些东西：
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 + ')';
}
Note that the snippet expects you have a div with id "color" somewhere. It sets the pixel color there.
请注意，该代码段希望您在某处有一个 id 为“color”的 div。它在那里设置像素颜色。
回答by Xenethyl
What you're looking for here is the getImageData()call.
您在这里寻找的是getImageData()调用。
So, your solution would look something like this:
因此，您的解决方案将如下所示：
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;
As @bebraw pointed out, you may need to handle the mouse location differently depending on the browser being used. For that, you might consider using jQuery or another JS library for simplicity.
正如@bebraw 指出的那样，您可能需要根据所使用的浏览器以不同方式处理鼠标位置。为此，为了简单起见，您可以考虑使用 jQuery 或其他 JS 库。
