使用JavaScript或jQuery，如何在或元素中专门移动鼠标时获取RGB颜色

我有一张图片， 。 无论何时何地移动我的鼠标光标，我都试图获得RGB颜色。

我怎么能用jQuery或纯JavaScript做到这一点？ 例如： http ： //www.script-tutorials.com/demos/158/index.html

跟进（用于复制粘贴测试）：

 headScript(); ?>  $(document).ready(function() { var image = new Image(); var ctx = $('#panel')[0].getContext("2d"); /* Load the picture empty.jpg */ image.onload = function () { ctx.drawImage(image, 0, 0, image.width, image.height); } /* How can i reload later new? image.empty; */ image.src = "/agents/empty.jpg"; /* On mouse over to my image, show me the background with RGB change mousemove to click if requires */ $('#panel').mousemove(function(e) { /* Leave as it is */ var canvasOffset = $(this).offset(); var canvasX = Math.floor(e.pageX - canvasOffset.left); var canvasY = Math.floor(e.pageY - canvasOffset.top); var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); var pixel = imageData.data; var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")"; /* Meat */ $(document.body).css('background-color',pixelColor); }); });     

Answer 1

您可以像该演示的脚本那样执行此操作。 请注意，该演示不使用img元素，而是将图像加载到canvas元素中。 canvas API允许您像这样获取像素数据：

 var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); var pixel = imageData.data; 

有关详细信息，请参阅HTML 5 canvas API 。

如果出于某种原因需要将图像加载到img元素中，而不是canvas元素，则可以：

1. 动态创建一个与img具有相同大小和位置的canvas元素。
2. 通过canvas上下文中的drawImage方法将图像数据从img复制到canvas。
3. 隐藏img元素，将canvas留在原位。

Answer 2

只能使用JavaScript（没有Canvas支持）才能获得图像的颜色。 你需要一些服务器端。

例如：你有一个jpg图像。 你指向某个地方，点击。 事件监听器应该向服务器发送坐标，服务器端应用程序将确定颜色是什么（当然，图像应该出现在服务器上）。 见http://muffinresearch.co.uk/code/javascript/pickr/

对于您的示例 – 图像由canvas元素读取和显示。 事件侦听器获取单击的坐标， getImageData（）获取像素的副本。 data属性包含红色，绿色，蓝色和alpha分量的信息。