¿Existe una biblioteca js que pueda generar una paleta de colores a partir de una imagen?

Question

Algo que podría hacer algo como

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

$(".image").get_colors() 

Sé que hay pocos sitios web donde se puede subir su imagen y que generaría el color para usted, pero quiero algo para poner en mi sitio web

Algo parecido this donde ve los colores generados a partir de la captura de pantalla y puede buscar por colores. Traté de verificar el código fuente, pero no pude ver ninguna referencia a una biblioteca js.

Necesito esta característica para trabajar con js si es posible.

EDITAR: La imagen ya estaría en la página; Solo necesito generar su color, por lo que no quiero las funciones de carga.

Gracias.

Answer 1

Usted podría estar interesado en this related question y my answer to another one.

Conseguir todos los colores de una imagen es simple, por lo menos en un navegador que soporte el elemento canvas - la técnica es described here. Usted termina con un CanvasPixelArray (described here), que es esencialmente una matriz como [r,g,b,a,r,g,b,a, ...] donde r,g,b,a son bytes que indican los valores rojo, verde, azul y alfa de cada píxel.

La parte difícil es identificar o crear una pequeña selección de colores representativos, en lugar de los 10,000 colores que podrían estar en una imagen de 100x100. Este es un problema bastante complicado, con muchas soluciones (overview here). Puede ver implementaciones de Javascript de dos posibles algoritmos en clusterfck library y my port of the Leptonica Modified Median Cut algorithm.

Answer 2

Escribí solo por diversión. Es un plugin jquery, si no lo usa puede leerlo para algunos punteros. Si hay algún error durante la llamada al get_colors, se establece una matriz en el valor de retorno para contener los errores, devuelve una matriz de objetos, estos objetos son un histograma de una imagen (un elemento en la matriz para cada elemento seleccionado).

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

Si un documento de una sola imagen con 4 píxeles (2x2) "# FF0000, # 00ff00, # 0000ff, # FF0000", con si lo hace $('img').get_colors(); vuelve [{"ff0000": 2, "0000ff": 1, "00ff00":1}].

Para aprender a usar el elemento canvas puede consultar MDN y specs en desarrollo para obtener detalles sobre la manipulación de píxeles.

Editar: comentado una línea que estaba utilizando al depurar.

Answer 3

¿Has visto este proyecto en Github?

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

Es una solución Javascript. (Depende de dos bibliotecas adicionales: jquery, quantize.js).

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

que devolverá una matriz, de esta manera: [[num, num, num], [num, num, num], ...]