分享程序员开发的那些事...
更新时间：2023-01-27 14:39:51
绑定全局 >或 mouseup 事件侦听器。然后，使用 画布 以获得像素信息。像素位置可以通过事件对象（ event.pageX ， event.pageY
请参阅下面的示例，该示例应在未来版本的FireFox 中使用。目前，由于安全原因， drawWindow 方法对于网页 被禁用。它应该在扩展中工作，虽然。如果您确实感兴趣，请参阅Chrome，Safari和Internet Explorer中类似方法的链接。
var canvas = $ （< canvas>）; //创建canvas元素
//创建一个与整个窗口重叠的图层
canvas.css（{position：fixed，top：0，left：0 ，
width：100％，height：100％，z-index：9001}）;
//向canvas元素添加事件监听器
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，1，1）.data;
var hex = rgb2hex（data [0]，data [1]，data [2]）;
alert（hex）;
$ ）.remove（）;
}）;
canvas.appendTo（body：first）; //：首先，在多个< body>标签（hmm？）
//用于从RGB转换为HEX的函数
函数rgb2hex（R，G，B）{return num2hex（R）+ num2hex（G）+ num2hex B）;}
function num2hex（n）{
if（！n ||！parseInt（n））return00
n = Math.max（0，Math.floor（Math.round（n），255））。toString（16）;
return n.length == 1？ 0+ n：n;
}
的详情canvas I want to know how to make a color picker with jQuery that will allow you to click somewhere on the page and return the hex color value of the color that you clicked on.
I know that it is possible with either javascript or jquery as not only do they have lots of color picker plugins, but I have and extension for Chrome that has that same exact functionality.
Any ideas?
Bind a global click or mouseup event listener. Then, use canvas to obtain the pixel information. The pixel positions can be retrieved through the event object (event.pageX, event.pageY).
See below for an example, which should work in future versions of FireFox. Currently, for security reasons, the drawWindow method is disabled for web pages. It should work in extensions, though. If you're truly interested, see the links for the similar methods in Chrome, Safari and 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