在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> 

我已經創建了您擁有一個小提琴現成的帆布，有一些形狀和顏色，我們將在點擊時處理。我不是爲你創建一個顏色選擇器，只是列出原來的答案，並且應該作爲實現第二部分的手段。

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函數將返回的值轉換爲十六進制格式，我假設您想要，如果您確定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，正如我所說的在代碼中的註釋，你可以很容易得提取alpha通道，如果你需要，但我拍得最通用的方案（最簡單的），我能想到的的。