绑定全局click or mouseup事件监听器。然后，使用canvas来获取像素信息。像素位置可以通过以下方式检索event目的 （event.pageX, event.pageY).
请参阅下面的示例，该示例应该适用于FireFox 的未来版本。目前，对于安全原因, the 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
-
绘制窗口- 火狐方法
-
可见内容作为数据URL- Safari 扩展
-
chrome.tabs.captureVisibleTab- Chrome 扩展
-
HTA ActiveX 控件- IE浏览器
