C'è una libreria js in grado di generare una tavolozza di colori da un'immagine?

Question

Qualcosa che potrebbe fare qualcosa di simile

<img class="image" ... /> 

$(".image").get_colors() 

So che ci sono alcuni siti web dove è possibile caricare la vostra immagine e genera il colore per voi, ma io voglio qualcosa da mettere sul mio sito

Qualcosa di simile this dove vedi i colori generati dallo screenshot e puoi cercare per colore. Ho provato a controllare il codice sorgente ma non ho visto alcun riferimento a una libreria js.

Ho bisogno di questa funzione per lavorare con js se possibile.

MODIFICA: L'immagine sarebbe già sulla pagina; Ho solo bisogno di generare il suo colore, quindi non voglio le funzionalità di caricamento.

Grazie.

Answer 1

Potresti essere interessato a this related question e my answer to another one.

Ottenere tutti i colori da un'immagine è semplice, almeno in un browser che supporta l'elemento canvas - la tecnica è described here. Si finisce con CanvasPixelArray (described here), che è essenzialmente una matrice come [r,g,b,a,r,g,b,a, ...] dove r,g,b,a sono byte che indicano i valori rosso, verde, blu e alfa di ciascun pixel.

La parte difficile è l'identificazione o la creazione di una piccola selezione di colori rappresentativi, piuttosto che i 10.000 colori che potrebbero essere in un'immagine 100x100. Questo è un problema piuttosto complicato, con molte soluzioni (overview here). È possibile visualizzare le implementazioni di Javascript di due possibili algoritmi nello clusterfck library e my port of the Leptonica Modified Median Cut algorithm.

Answer 2

Ho scritto solo per divertimento. È un plugin jQuery, se non lo usi puoi leggerlo per alcuni puntatori. Se c'è qualche errore durante la chiamata a get_colors, una matrice viene impostata nel valore di ritorno per contenere gli errori, restituisce una matrice di oggetti, questi oggetti sono un istogramma di un'immagine (un elemento nell'array per ogni elemento selezionato).

(function($, window, document, undefined){ 
    var canvas = document.createElement('canvas'); 
    if (canvas && canvas.getContext){ 
     $.fn.get_colors = function(){ 
      var rv = []; 
      this.each(function(){ 
       var tagname = this.tagName.toLowerCase(); 
       if ((tagname === 'img') || (tagname === 'canvas') || (tagname === 'video')){ 
        //something bad can happend when drawing the image 
        try{ 
         var w = this.getAttribute('width'); 
         var h = this.getAttribute('height'); 
         canvas.setAttribute('width', w); 
         canvas.setAttribute('height', h); 
         var ctxt = canvas.getContext('2d'); 
         if (ctxt){ 
          ctxt.drawImage(this, 0, 0); 
          var imagedata = ctxt.getImageData(0, 0, w, h); 
          var data = imagedata.data; 
          //log('imagedata.width:'+imagedata.width+' imagedata.height:'+imagedata.height+' w:'+w+' h:'+h); 
          var obj = {}; 
          var color = ''; 
          var r = 0, g = 0, b = 0, a = 0; 
          var pix = data.length; 
          for (pix--; pix > 2; pix-=4){ 
           //a = data[pix - 0]; 
           b = data[pix - 1]; 
           g = data[pix - 2]; 
           r = data[pix - 3]; 
           if (r < 16) r = '0' + r.toString(16); 
           else r = r.toString(16); 
           if (g < 16) g = '0' + g.toString(16); 
           else g = g.toString(16); 
           if (b < 16) b = '0' + b.toString(16); 
           else b = b.toString(16); 
           //if (a < 16) a = '0' + r.toString(16); 
           //else a = a.toString(16); 
           //color = r + g + b + a; 
           color = r + g + b; 
           if (obj[color] > 0) ++obj[color]; 
           else obj[color] = 1; 
          } 
          rv.push(obj); 
          imagedata = data = obj = null; 
         } 
         ctxt = null; 
        } catch(error){ 
         if (!rv.errors){ 
          rv.errors = []; 
         } 
         rv.errors.push(error); 
        } 
       } 
      }); 
      return rv; 
     }; 
    } else{ 
     $.fn.get_colors = function(){ 
      throw new Error('canvas element support required!'); 
     }; 
    } 
})(jQuery, this, this.document); 

Se un documento una sola immagine con 4 pixel (2x2) "# ff0000, # 00FF00, # 0000FF, # ff0000", con se lo fai $('img').get_colors(); restituisce [{"ff0000": 2, "0000ff": 1, "00ff00":1}].

Per informazioni su come utilizzare l'elemento canvas che è possibile visualizzare su MDN e allo specs in fase di sviluppo per i dettagli sulla manipolazione dei pixel.

Modifica: ha commentato una riga che stavo usando durante il debug.

Answer 3

Hai visto questo progetto su Github?

http://lokeshdhakar.com/projects/color-thief/

E 'una soluzione javascript. (Dipende da due librerie aggiuntive: jquery, quantize.js).

var colorThief = new ColorThief(); 
colorThief.getPalette(sourceImage, 8); 
getPalette(sourceImage[, colorCount, quality]) 

che restituirà un array, in questo modo: [[num, num, num], [num, num, num], ...]