jquery - 搜索颜色选择器 jquery 插件

Question

我正在寻找一个颜色选择器 jquery 插件，但不像这一切： http ://www.jquery4u.com/plugins/10-color-pickers-plugin/#.UHK6XU1mKa8

当您可以对图像中任何像素的颜色进行采样时，我想要一个像 Photoshop 中的工具。

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

有人知道这样的事情吗？

谢谢

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/

但是，您应该考虑到提供的解决方案仅适用于支持CSS 颜色模式的浏览器（<canvas>尽管可以使用）。rgba()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/