Searching after color picker jquery plugin

Question

I'm searching after a color picker jquery plugin, but not like all this: http://www.jquery4u.com/plugins/10-color-pickers-plugin/#.UHK6XU1mKa8

I want to have a tool like in Photoshop when you can take sample of the color of any pixel in the image.

I'm looking for such tool in jquery for html + css page.

Anyone know something like this?

Thanks

This might help: http://stackoverflow.com/questions/1936021/javascript-eyedropper-tell-color-of-pixel-under-mouse-cursor. — VisioN, Oct 08 '12 at 11:46
This is talking about how to take sample of image pixel. I'm looking for tool to take sample from any element that I have on my html page. live text, background, multiple images. — Nir, Oct 08 '12 at 11:51
Please, check the updated version of my answer. It seems it does exactly what you need. — VisioN, Oct 08 '12 at 12:40

VisioN · Accepted Answer · 2012-10-08T12:39:31.710

The task is not that difficult as it might seem to be. Even you can implement it by yourself. For that you should use the <canvas> element (it has a possibility to pick up a pixel data).

First, you can take the screenshot of HTML content and transfer it to the <canvas>. In order to do that, you may use html2canvas library.

Then, you should use the <canvas> data to pick up the color. Here is the short solution for that:

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/

However, you should consider that the provided solution will work only in browsers which support <canvas> and rgba() as CSS color mode (rgb() can be used instead though).

And here is the complete solution after embedding html2canvas library.

$("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/

The html2canvas script is the best for this mission? Because I saw in his examples some inaccuracies by rendering. Like here: http://html2canvas.hertzen.com/tests/borders.html — Nir, Oct 08 '12 at 17:50

Searching after color picker jquery plugin

1 Answers1