使用 jQuery 获取点击颜色的十六进制值

发布于 2024-12-09 05:42:17 字数 163 浏览 0 评论 0原文

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

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

有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一曲爱恨情仇 2024-12-16 05:42:17

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

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;
}

References

Canvas examples - Learn more about canvas
drawWindow - FireFox method
visibleContentAsDataURL - Safari extensions
chrome.tabs.captureVisibleTab - Chrome extensions
HTA ActiveX control - Internet Explorer

回复收藏 0 原文

十级心震 2024-12-16 05:42:17

这些插件不能通过了解鼠标下像素的颜色来工作；它们之所以有效，是因为选择器中的颜色是根据数学公式排列的，并且通过知道该公式和单击鼠标的位置，插件可以找出那里属于什么颜色。 JavaScript 不提供任何方法来获取页面图像或“光标下的颜色”。

回复收藏 0 原文

木槿暧夏七纪年 2024-12-16 05:42:17

我最近遇到了这个问题，默认情况下 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))); 
}

I had this problem recently, by default IE returns hex colours whereas all the good browsers return rgb values, I simply put conditions to deal with both strings, this would be more efficient..

however I think this function does the trick if you really need it

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

回复收藏 0 原文

~没有更多了~