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/