Bir HTML Canvas'da benzersiz renkleri listeleme

Question

Bir HTML Tuvalinde çizilmiş olan renklerin listesini almak için verimli bir yol var mı?

Doğru terim akım kompozit

Answer 1

bir Renk Paleti olacağını tahmin Eğer böyle bir html belgesi var varsayalım aşağıdadır:

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

Sana sahip olduğu bir keman yarattık Tıkladığımız zaman işleyeceğimiz bazı şekiller ve renkler ile hazır kanvas. Sizin için bir renk seçici oluşturmuyorum, sadece bunun orijinal cevabı olduğu gibi listelemek ve bunun ikinci kısmını elde etmek için bir araç olarak hizmet etmek zorundayım. renkleri ayıklar

Here's the fiddle

fonksiyon onları, ben sadece örnek olarak işlev görür ve yeterli jenerik olmadığından tüm tuval çizim şeyler kopyalama şu kaçıyorum bir listeleri.

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); 
      } 
     }  
} 

Bu da bir renk seçici istiyorsanız (dolayısıyla 'görünüşte'), ancak kurmak isteyebileceğiniz görüntüde göründüğü sırayı temsil onaltılık değerler görünüşte sırasız listesini içeren bir sonuç verir Diziyi siyah-beyaz modaya sipariş edecek colorList.sort(); kullanımını düşünün.

Kullanmakta olduğunuzu varsayarak altıgen biçimine döndürülen değerleri dönüştürmek için rgb2hex işlevini kullandığımı unutmayın, eğer rgb ile kullanmaktan çekiniyorsanız, işlev şu şekildedir:

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]); 
} 

ve kaynak düşünebildiğim ben kodunda bir yorum olarak belirtildiği gibi, kolayca gerekiyordu ama en genel senaryo için giderse çok alfa kanalı ayıklamak (ve en basit) olabilir, this olduğunu arasında.