Elenca colori univoci in una tela HTML

Question

Esiste un modo efficace per ottenere un elenco di colori di ciò che viene attualmente disegnato in una tela HTML?

Credo che il termine corretto sarebbe una tavolozza di colori del composito corrente

Answer 1

Si supponga di avere un documento HTML simile al seguente:

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

ho creato un violino in cui si dispone di un tela pronta con alcune forme e colori che elaboreremo quando clicchiamo su di essa. Non sto creando un raccoglitore di colori per te, solo elencando quella era la risposta originale e dovrei servire come mezzo per raggiungere la seconda parte di esso.

Here's the fiddle

La funzione che estrae i colori una lista di loro è la seguente, Sto evitando la copia di tutto il materiale di disegno di tela in quanto serve solo come esempio e non è sufficientemente generico.

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

Questo produrrà un risultato contenente un elenco apparentemente non ordinata di valori esadecimali che rappresentano l'ordine in cui appaiono nell'immagine (da qui il 'apparentemente'), se si desidera un selettore di colori tuttavia si consiglia di considerare l'uso di colorList.sort(); che ordinerà la matrice in modo nero-bianco.

Nota che sto usando la funzione rgb2hex per convertire i valori restituiti al formato esadecimale sto assumendo la vostra voglia, se sei ok con rgb si sentono liberi di non utilizzare, la funzione è la seguente:

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

e la fonte è this, come ho detto come commento nel codice, si potrebbe facilmente estrarre il canale alfa anche se è necessario, ma sono andato per lo scenario più generico (e più semplice), che mi veniva in mente di.