在鼠标hover上从canvas获取像素颜色
是否有可能获得鼠标下的RGB值像素？ 有没有一个完整的例子？ 以下是我到目前为止：
<script> function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.src = 'Your URL'; img.onload = function(){ ctx.drawImage(img,0,0); }; canvas.onmousemove = function(e) { var mouseX, mouseY; if(e.offsetX) { mouseX = e.offsetX; mouseY = e.offsetY; } else if(e.layerX) { mouseX = e.layerX; mouseY = e.layerY; } var c = ctx.getImageData(mouseX, mouseY, 1, 1).data; $('#ttip').css({'left':mouseX+20, 'top':mouseY+20}).html(c[0]+'-'+c[1]+'-'+c[2]); }; } </script> 这是一个完整的，独立的例子。 首先，使用下面的HTML：
<canvas id="example" width="200" height="60"></canvas> <div id="status"></div>
相关的JavaScript：
// set up some sample squares var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(0, 0, 50, 50); context.fillStyle = "rgb(0,0,255)"; context.fillRect(55, 0, 50, 50); $('#example').mousemove(function(e) { var pos = findPos(this); var x = e.pageX - pos.x; var y = e.pageY - pos.y; var coord = "x=" + x + ", y=" + y; var c = this.getContext('2d'); var p = c.getImageData(x, y, 1, 1).data; var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6); $('#status').html(coord + "<br>" + hex); });
上面的代码假定存在jQuery和以下实用程序function：
function findPos(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); return { x: curleft, y: curtop }; } return undefined; } function rgbToHex(r, g, b) { if (r > 255 || g > 255 || b > 255) throw "Invalid color component"; return ((r << 16) | (g << 8) | b).toString(16); }
在JSFIDDLE上看到它的作用：
合并在StackOverflow（包括上面的文章）在这里find的各种参考和其他网站，我这样做使用JavaScript和JQuery：
<html> <body> <canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script src="jquery.js"></script> <script type="text/javascript"> window.onload = function(){ var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var img = new Image(); img.src = 'photo_apple.jpg'; context.drawImage(img, 0, 0); }; function findPos(obj){ var current_left = 0, current_top = 0; if (obj.offsetParent){ do{ current_left += obj.offsetLeft; current_top += obj.offsetTop; }while(obj = obj.offsetParent); return {x: current_left, y: current_top}; } return undefined; } function rgbToHex(r, g, b){ if (r > 255 || g > 255 || b > 255) throw "Invalid color component"; return ((r << 16) | (g << 8) | b).toString(16); } $('#myCanvas').click(function(e){ var position = findPos(this); var x = e.pageX - position.x; var y = e.pageY - position.y; var coordinate = "x=" + x + ", y=" + y; var canvas = this.getContext('2d'); var p = canvas.getImageData(x, y, 1, 1).data; var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6); alert("HEX: " + hex); }); </script> <img src="photo_apple.jpg"/> </body> </html>
这是我完整的解决scheme。 这里我只使用了canvas和一个图像，但是如果你需要在图像上使用<map> ，这也是可能的。
我知道这是一个老问题，但是这里有一个select。 我将图像数据存储在一个数组中，然后，在鼠标上移动事件在canvas上：
var index = (Math.floor(y) * canvasWidth + Math.floor(x)) * 4 var r = data[index] var g = data[index + 1] var b = data[index + 2] var a = data[index + 3]
比每次获取imageData容易得多。
快速回答
context.getImageData(x, y, 1, 1).data; 返回一个rgba数组。 例如[50, 50, 50, 255]
这是@ lwburk的rgbToHex函数的一个版本，它将rgba数组作为参数。
function rgbToHex(rgb){ return '#' + ((rgb[0] << 16) | (rgb[1] << 8) | rgb[2]).toString(16); };
我有一个非常简单的工作示例，从canvas中获取像素颜色。
首先是一些基本的HTML：
<canvas id="myCanvas" width="400" height="250" style="background:red;" onmouseover="echoColor(event)"> </canvas>
然后JS在Canvas上画一些东西，并获得颜色：
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "black"; ctx.fillRect(10, 10, 50, 50); function echoColor(e){ var imgData = ctx.getImageData(e.pageX, e.pageX, 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上挑选颜色的简单方法。 看演示 。
每次调用getImageData都会减慢进程…加快存储图像数据的速度，然后我可以遍历所有像素
var imgData = ctx.getImageData(0,0,can_ida.width,can_ida.height); var data = imgData.data; for (var y = 0; y < imgData.height; ++y) { for (var x = 0; x < imgData.width; ++x) { var index = (y * imgData.width + x) * 4; // index of the current pixel var red = data[index]; var green = data[index+1]; var blue = data[index+2]; var alpha = data[index+3]; console.log('pix x ' + x +' y '+y+ ' index '+index +' COLOR '+red+','+green+','+blue+','+alpha); } }
