搜索颜色选择器jquery插件

我正在搜索一个颜色选择器jquery插件，但不是像这样：

我想有一个像Photoshop一样的工具，你可以对图像中任何像素的颜色进行采样

我正在jqueryforhtml+css页面中寻找这样的工具

有人知道这样的事吗

---

谢谢

这项任务并不像看上去那么困难。甚至你自己也可以实现它。为此，您应该使用

元素（它可以拾取像素数据）

首先，您可以获取HTML内容的屏幕截图并将其传输到

。为此，您可以使用库

$("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();​

然后，您应该使用

数据拾取颜色。以下是一个简短的解决方案：

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

​演示：

但是，您应该考虑，只有在支持<代码> <代码> >代码> > 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();​

---

演示：

这可能会有所帮助：。这是关于如何采集图像像素的样本。我正在寻找工具，从我的html页面上的任何元素中提取样本。实时文本，背景，多张图片。请检查我答案的更新版本。看起来它正是你所需要的。html2canvas脚本最适合这个任务？因为我在他的例子中看到了一些不准确的地方。就像这里：