我想知道如何使用 jQuery 制作一个颜色选择器，它允许您单击页面上的某个位置并返回您单击的颜色的十六进制颜色值。
我知道 javascript 或 jquery 都可以，因为它们不仅有很多颜色选择器插件，而且我还有 Chrome 扩展程序，具有相同的功能。
有什么想法吗？
【问题讨论】：
标签： javascript jquery plugins colors color-picker
我最近遇到了这个问题，默认情况下IE返回十六进制颜色而所有好的浏览器都返回rgb值，我只是简单地设置条件来处理两个字符串，这样会更有效..
但是我认为如果你真的需要这个功能，它就可以解决问题
function RGBToHex(rgb) {
var char = "0123456789ABCDEF";
return String(char.charAt(Math.floor(rgb / 16))) + String(char.charAt(rgb - (Math.floor(rgb / 16) * 16)));
}
【讨论】：
那些插件不能通过知道鼠标下像素的颜色来工作；它们之所以起作用，是因为选择器中的颜色是根据数学公式排列的，并且通过知道该公式和您单击鼠标的位置 ，插件可以找出属于那里的颜色。 JavaScript 没有提供任何方法来获取页面图像或“光标下的颜色”。
【讨论】：
绑定一个全局的click 或mouseup 事件监听器。然后，使用canvas获取像素信息。像素位置可以通过event对象（event.pageX，event.pageY）获取。
请参阅下面的示例，该示例应该可以在 FireFox 的未来版本中使用。目前，出于安全原因，drawWindow 方法对网页禁用。不过，它应该在扩展中工作。如果您真的感兴趣，请查看 Chrome、Safari 和 Internet Explorer 中类似方法的链接。
var canvas = $("<canvas>"); //Create the canvas element
//Create a layer which overlaps the whole window
canvas.css({position:"fixed", top:"0", left:"0",
width:"100%", height:"100%", "z-index":9001});
//Add an event listener to the canvas element
canvas.click(function(ev){
var x = ev.pageX, y = ev.pageY;
var canvas = this.getContext("2d");
canvas.drawWindow(window, x, y, 1, 1, "transparent");
var data = canvas.getImageData(0, 0, 1, 1).data;
var hex = rgb2hex(data[0], data[1], data[2]);
alert(hex);
$(this).remove();
});
canvas.appendTo("body:first"); //:first, in case of multiple <body> tags (hmm?)
//Functions used for conversion from RGB to HEX
function rgb2hex(R,G,B){return num2hex(R)+num2hex(G)+num2hex(B);}
function num2hex(n){
if (!n || !parseInt(n)) return "00";
n = Math.max(0,Math.floor(Math.round(n),255)).toString(16);
return n.length == 1 ? "0"+n : n;
}
canvas 【讨论】：