JavaScript滴管(告诉鼠标光标下像素的颜色)
我正在寻找一个“滴管”工具，它给我的十六进制值的像素的鼠标光标下，在JavaScript的内容管理系统。
对于火狐来说，有一个很棒的扩展就可以做到这一点。然而，这只是FF，当然，我真的很想把这个工具和CMS一起交付。
一位荷兰开发人员使用Ajax和PHP的imagecolorat()的组合来找出图像上的像素颜色的。，但这限制了图像的范围，我可以访问服务器端的，我真的很想要一个通用的工具。
我将使用这些方法中的一种，但更喜欢基于跨浏览器、Javascript或Flash的方式，这种方式不需要服务器端的摆弄，也不需要安装扩展。
我也对任何IE特定的解决方案感兴趣，这些解决方案可以做ColorZilla能做的事情--我可以接受只支持IE和FF，尽管跨浏览器的解决方案当然是理想的。
回答 12
Stack Overflow用户
发布于 2009-12-20 23:06:46
这在JavaScript中是不可能的，因为它违背了跨域安全性。如果你知道图像是由什么像素组成的，那就很糟糕了，http://some-other-host/yourPassword.png。只有当鼠标位于画布上或同一域的图像元素(或另一个域的具有Access-Control-Allow-Origin: *标题的图像元素)上时，才能分辨出鼠标下像素的颜色。在画布的情况下，您将执行canvasElement.getContext('2d').getImageData(x, y, 1, 1).data。在图像的情况下，您必须使用以下命令将其绘制到画布：
var canvas = document.createElement("canvas");
canvas.width = yourImageElement.width;
canvas.height = yourImageElement.height;
canvas.getContext('2d').drawImage(yourImageElement, 0, 0);然后只需使用前面为画布解释的方法。如果您必须能够转换为颜色值的各种表示形式，请尝试my color.js库。
此外，你永远不能支持IE <9 (假设IE9支持canvas)，使用Flash也无济于事，因为它也无法读取文档的像素数据。
Stack Overflow用户
发布于 2014-01-30 21:07:49
使用一种称为浏览器计时攻击的技术，可以(某种程度上)确定任何像素的颜色，甚至在iframe上也是如此。
基本上，这种技术测量的是在元素上呈现SVG滤镜的时间，而不是颜色本身(requestAnimationFrame()测量时间的精度比setTimeout()高得多)。根据当前像素颜色的不同，滤镜应用所需的时间或多或少。这使得可以确定像素是否与已知颜色相同-例如黑色或白色。
更多详情请参阅本白皮书(pdf)：https://www.contextis.com/media/downloads/Pixel_Perfect_Timing_Attacks_with_HTML5_Whitepaper.pdf
顺便说一句:是的，这是一个浏览器安全漏洞，但我不知道浏览器供应商如何修补它。
Stack Overflow用户
发布于 2012-01-10 08:47:58
我使用javascript和JQuery合并了在StackOverflow和其他网站上找到的各种参考资料：
<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script src="jquery.js"></script>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var img = new Image();
img.src = 'photo_apple.jpg';
context.drawImage(img, 0, 0);
};
function findPos(obj){
var current_left = 0, current_top = 0;
if (obj.offsetParent){
do{
current_left += obj.offsetLeft;
current_top += obj.offsetTop;
}while(obj = obj.offsetParent);
return {x: current_left, y: current_top};
}
return undefined;
}
function rgbToHex(r, g, b){
if (r > 255 || g > 255 || b > 255)
throw "Invalid color component";
return ((r << 16) | (g << 8) | b).toString(16);
}
$('#myCanvas').click(function(e){
var position = findPos(this);
var x = e.pageX - position.x;
var y = e.pageY - position.y;
var coordinate = "x=" + x + ", y=" + y;
var canvas = this.getContext('2d');
var p = canvas.getImageData(x, y, 1, 1).data;
var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
alert("HEX: " + hex);
});
</script>
<img src="photo_apple.jpg"/>
</body>
</html>这是我的完整解决方案..这里我只使用了画布和一张图片，但是如果你需要在图片上使用<map>，这也是可能的。我希望我能帮上忙。
https://stackoverflow.com/questions/1936021
复制相似问题