使用jQuery获取单击颜色的hex值

我想知道如何使用jQuery制作颜色选择器，它允许您单击页面上的某个位置并返回您单击的颜色的hex颜色值。

我知道有可能使用javascript或jquery，因为它们不仅有很多颜色选择器插件，而且我有Chrome和具有相同function的扩展程序。

有任何想法吗？

Answer 1

绑定全局click或mouseup事件侦听器。 然后，使用canvas获取像素信息。 可以通过event对象（ event.pageX ， event.pageY ）检索像素位置。

请参阅下面的示例，该示例应在FireFox的未来版本中有效 。 目前，出于安全原因 ， 对网页禁用了drawWindow方法。 不过，它应该可以扩展。 如果您真的感兴趣，请参阅Chrome，Safari和Internet Explorer中类似方法的链接。

 var 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  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示例 – 了解有关canvas更多信息
• drawWindow – FireFox方法
• visibleContentAsDataURL – Safari扩展
• chrome.tabs.captureVisibleTab – Chrome扩展程序
• HTA ActiveX控件 – Internet Explorer

Answer 2

通过了解鼠标下像素的颜色，这些插件不起作用; 它们起作用是因为拾取器中的颜色是根据数学公式布局的，并且通过了解公式以及您单击鼠标的位置，插件可以找出那里的颜色。 JavaScript不会为您提供获取页面图像或“光标下的颜色”的任何方法。

Answer 3

我最近有这个问题，默认情况下IE返回hex颜色，而所有好的浏览器返回rgb值，我只是设置条件来处理两个字符串，这将更有效..

但是我认为如果你真的需要它，这个function就可以了

 function RGBToHex(rgb) { var char = "0123456789ABCDEF"; return String(char.charAt(Math.floor(rgb / 16))) + String(char.charAt(rgb - (Math.floor(rgb / 16) * 16))); }