搜索颜色选择器 jquery 插件

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(",") + ")");
});

​演示： 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();​

演示： http://jsfiddle.net/Fd3pZ/1/