Question

我正在搜索颜色选择器jquery插件，但不是所有这些： http://www.jquery4u.com/plugins/10-color-pickers-plugin/#.UHK6XU1mKa8

当你可以拍摄图像中任何像素的颜色样本时，我想拥有像Photoshop一样的工具。

我在jquery中为html + css页面寻找这样的工具。

任何人都知道这样的事情吗？

由于

Answer 1

任务并不像看起来那么困难。即使你可以自己实现它。为此，您应该使用<canvas>元素（它可以获取像素数据）。

首先，您可以截取HTML内容的屏幕截图并将其传输到<canvas>。为此，您可以使用 html2canvas 库。

然后，您应该使用<canvas>数据来获取颜色。这是一个简短的解决方案：

var img = new Image(),
    cbox = $("div"),
    canvas = $("canvas"),
    context = canvas.get(0).getContext("2d");

img.src = "/img/logo.png";
context.drawImage(img, 0, 0);

canvas.on("mousemove", function(e) {
    var data = context.getImageData(e.offsetX, e.offsetY, 1, 1).data,
        arr = $.makeArray(data);

    cbox.css("background-color", "rgba(" + arr.join(",") + ")");
});

DEMO： http://jsfiddle.net/Fd3pZ/

但是，您应该考虑所提供的解决方案仅适用于支持<canvas>和rgba()的浏览器作为CSS颜色模式（尽管可以使用rgb()）。

这是嵌入 html2canvas 库后的完整解决方案。

$("body").on("mousemove", "canvas", function(e) {
    var data = this.getContext("2d").getImageData(e.offsetX, e.offsetY, 1, 1).data,
        arr = $.makeArray(data);

    $("#color").css("background-color", "rgba(" + arr.join(",") + ")");
});

$("#content").html2canvas();

DEMO： http://jsfiddle.net/Fd3pZ/1/

搜索颜色选择器jquery插件

1 个答案: