Javascript 使用jQuery获取单击颜色的十六进制值
我想知道如何使用jQuery创建一个颜色选择器，它允许您单击页面上的某个位置，并返回您单击的颜色的十六进制颜色值 我知道javascript或jquery都有可能，因为它们不仅有很多颜色选择器插件，而且我还有Chrome的扩展插件，具有相同的功能Javascript 使用jQuery获取单击颜色的十六进制值,javascript,jquery,plugins,colors,color-picker,Javascript,Jquery,Plugins,Colors,Color Picker,我想知道如何使用jQuery创建一个颜色选择器，它允许您单击页面上的某个位置，并返回您单击的颜色的十六进制颜色值 我知道javascript或jquery都有可能，因为它们不仅有很多颜色选择器插件，而且我还有Chrome的扩展插件，具有相同的功能 有什么想法吗？我最近遇到了这个问题，默认情况下IE返回十六进制颜色，而所有好的浏览器都返回rgb值，我只需设置条件来处理这两个字符串，这样会更有效 然而，如果你真的需要它，我认为这个函数会起作用 function RGBToHex(rgb) { va
有什么想法吗？我最近遇到了这个问题，默认情况下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不提供任何获取页面图像或“光标下的颜色”的方法。绑定全局
单击或鼠标事件侦听器。然后，使用获取像素信息。像素位置可以通过事件
对象（event.pageX
，event.pageY
）检索
请参见下面的示例，该示例应适用于未来版本的FireFox。目前，由于安全原因，网页的绘图窗口
方法被禁用。不过，它应该可以在扩展中工作。如果您真的感兴趣，请查看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;
}
var canvas=$（“”）//创建画布元素
//创建一个与整个窗口重叠的层
css（{位置：“固定”，顶部：“0”，左侧：“0”，
宽度：“100%”，高度：“100%”，z指数：“9001}）；
//将事件侦听器添加到canvas元素
画布。单击（功能（ev）{
var x=ev.pageX，y=ev.pageY；
var canvas=this.getContext（“2d”）；
画布.抽拉窗（窗，x，y，1，1，“透明”）；
var data=canvas.getImageData（0,0,1,1）.data；
var hex=rgb2hex（数据[0]，数据[1]，数据[2]）；
警报（十六进制）；
$（this.remove（）；
});
canvas.appendTo（“body:first”）；/：首先，如果有多个标签（hmm？）
//用于从RGB转换为十六进制的函数
函数rgb2hex（R，G，B）{返回num2hex（R）+num2hex（G）+num2hex（B）；}
函数num2hex（n）{
如果（！n | |！parseInt（n））返回“00”；
n=Math.max（0，Math.floor（Math.round（n），255））.toString（16）；
返回n.length==1？“0”+n:n；
}
工具书类
- -了解有关画布的更多信息
- -FireFox方法
- -Safari扩展
- -Chrome扩展
- -互联网浏览器
相关：但是如果您单击的项目没有背景色怎么办？或者是图像？诚然，我链接到的问题并没有提供你想要的一切，但我认为它足够相关，可以添加为评论。啊，但我想做的不是将rgb转换为十六进制。我想得到被点击的元素的颜色，无论它是div、span、a、img还是其他任何东西。啊，是的，对不起，我很快读到了，我的错误！这是你想要的，我想因为它很普通，我会用它，也许是定制样式，而不是重新设计，这可能需要很多时间。如果你真的需要知道它是如何工作的，只需浏览源代码，它还没有被最小化。你有任何示例代码吗？我对画布不太熟悉，无法做任何事情。更新答案。不过，目前还不可能在所有浏览器中都在页面上选择颜色。