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番目の部分を達成するための手段として機能する必要があります。色を抽出

Here's the fiddle

機能彼らは、私はそれだけで一例として機能し、十分に汎用的ではないので、すべてのキャンバスの描画のものをコピーし、次の回避していているリスト。

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();の使用を考えてみましょう。

私はrgb2hex関数を使用して、16進形式に戻された値を変換しています。あなたが望んでいると仮定しています。もしrgbでOKならば、関数は次のようになります。

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ですの。