JavaScript吸管(告诉鼠标光标下像素的颜色)

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (24)

我正在寻找一个“ 吸管 ”工具,它为我提供了CMS中JavaScript的鼠标光标所在像素的十六进制值。

对于Firefox,有非常出色的ColorZilla扩展。但是,当然只有FF,我真的很想和CMS一起交付这个工具。

一个荷兰开发者有一个非常聪明的想法,即使用Ajax和PHP的组合imagecolorat()来找出图像上的像素颜色。但是这限制了我可以访问服务器端的图像范围,而且我真的在做一个通用工具的梦想。

我将使用其中一种方法,但更愿意使用跨浏览器,基于Javascript或Flash的方式,不需要服务器端的摆弄,也不需要安装扩展。

我也对ColorZilla能做的任何IE特定解决方案感兴趣 - 我可以只支持IE和FF,尽管跨浏览器解决方案当然是理想的。

提问于
用户回答回答于

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

然后,只需使用前面为油画解释的方法。如果您必须能够转换为各种颜色值表示,请尝试使用我的color.js库。

此外,你永远不会支持IE <9(假设IE9支持画布),使用Flash也无济于事,因为它无法读取文档的像素数据。

用户回答回答于

合并StackOverflow和其他网站中的各种参考资料,我使用了javascript和JQuery:

<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>在图像上使用,这也是可能的。我希望我能帮上忙。

扫码关注云+社区