html - HTML キャンバスに固有の色を一覧表示する

Question

HTML キャンバスに現在描画されている色のリストを取得する効率的な方法はありますか?

正しい用語は、現在のコンポジットのカラー パレットだと思います。

Answer 1

次のような html ドキュメントがあるとします。

<canvas id="example" width="500" height="300"></canvas>
<ul id="list">
    <h3>Click the canvas to extract colors</h3>
</ul>

クリックすると処理されるいくつかの形状と色を備えた既製のキャンバスがあるフィドルを作成しました。私はあなたのためにカラーピッカーを作成しているのではなく、それが最初の答えであり、その2番目の部分を達成するための手段として役立つはずです.

これがフィドルです

色を抽出してそれらをリストする関数は次のとおりです。キャンバスの描画内容をすべてコピーすることは避けています。これは単なる例として機能し、十分に一般的ではないためです。

var colorList = []; //This will hold all our colors 
function getColors(){
        var canvas      = document.getElementById('example');
        var context     = canvas.getContext('2d');
        var imageWidth  = canvas.width;
        var imageHeight = canvas.height;
        var imageData   = context.getImageData(0, 0, imageWidth, imageHeight);
        var data        = imageData.data;

        // quickly iterate over all pixels
        for(var i = 0, n = data.length; i < n; i += 4) {
           var r  = data[i];
           var g  = data[i + 1];
           var b  = data[i + 2];
           //If you need the alpha value it's data[i + 3]
           var hex = rgb2hex("rgb("+r+","+g+","+b+")");
           if ($.inArray(hex, colorList) == -1){
               $('#list').append("<li>"+hex+"</li>");
               colorList.push(hex);
           }
        }    
}

colorList.sort();これにより、画像に表示される順序を表す 16 進数値の一見順序付けられていないリストを含む結果が生成されます (したがって、「一見」)。配列を黒から白に変更します。

関数を使用して、返された値を 16 進形式に変換していることに注意してrgb2hexください。RGB で問題ない場合は、使用しないでください。関数は次のとおりです。

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

ソースはthisです。コードのコメントとして述べたように、必要に応じてアルファ チャネルも簡単に抽出できますが、考えられる最も一般的な (そして最も単純な) シナリオを使用しました。