2011-06-01 15 views
17

Estoy escribiendo una aplicación web que toma una imagen enviada por el usuario, obtiene los datos de píxeles a través de un elemento canvas, procesa y luego renderiza la imagen usando formas vectoriales (usando Protovis). Está funcionando bien, pero termino con varios miles de colores, y me gustaría dejar que el usuario elija un tamaño de paleta objetivo y reduzca la paleta de colores a ese tamaño.Algoritmo para la cuantización del color/paleta de colores de la imagen reducida en JavaScript?

En el punto donde quiero reducir el espacio de color, estoy trabajando con una serie de datos de píxeles RGB, así:

[[190,197,190], [202,204,200], [207,214,210], [211,214,211], [205,207,207], ...] 

probé la opción ingenua de sólo la eliminación de bits menos significativos de los colores, pero los resultados fueron bastante malos. Investigué un poco sobre los algoritmos color quantization, pero aún no he encontrado una descripción clara de cómo implementar uno. Probablemente podría resolverlo de forma complicada para enviarlo al servidor, ejecutarlo a través de un programa de procesamiento de imágenes y devolver la paleta resultante, pero preferiría hacerlo en JavaScript en el lado del cliente.

¿Alguien tiene un ejemplo de un algoritmo claramente explicado que funcionaría aquí? El objetivo es reducir una paleta de varios miles de colores a una paleta más pequeña optimizada para esta imagen específica.

Edit (25/07/11): Tomé la sugerencia de @ Pointy e implementé (la mayoría de) Leptonica's MMCQ (cuantificación de corte mediana modificada) en JavaScript. Si está interesado, puede see the code here.

Editar (05/08/11): Elclusterfck library se parece a otra gran opción para esto (aunque creo que es un poco más lento que mi aplicación).

+0

En lugar de sólo la poda de algunos bits y dejarlo así, tal vez usted podría utilizar el 6 bits o 4 -bit valores para * agrupar * los colores reales. Una vez que identifica los grupos, puede calcular un promedio (o mediana o lo que sea) para todos los miembros reales de cada grupo. (Tenga en cuenta que no sé casi nada sobre la teoría del procesamiento de imágenes :-) – Pointy

+0

... ja, ja, lo que escribí es lo que dice el primer párrafo en "Algoritmos", más o menos :-) – Pointy

+0

@Pointy - yup :). Espero que alguien pueda proporcionar un buen algoritmo para esto: entiendo que la idea básica es "clúster, luego tomar la media de cada clúster", pero estoy un poco en el mar sobre cómo hacer el agrupamiento. – nrabinowitz

Respuesta

9

Con la advertencia de que no reclamo ninguna experiencia en ningún campo del procesamiento de imágenes: leí el artículo de Wikipedia que vinculó, y de allí encontré el Leptonica de Dan Bloomberg. Desde allí puede download las fuentes de los algoritmos discutidos y explicados.

El código fuente está en C, que con suerte está lo suficientemente cerca de JavaScript (al menos en las partes centrales de "fórmula") para ser comprensible. Las ideas básicas detrás del algoritmo "MMCQ" no parecen muy complicadas. En realidad, son solo algunos trucos heurísticos para dividir el espacio de color tridimensional en sub cubos según la forma en que los colores de una imagen se agrupan.

+0

Bueno, esperaba algo en pseudocódigo o en un idioma que conocía, pero parece que ahora tengo un proyecto de codificación de fin de semana :). – nrabinowitz

+0

¿Alguna vez algo salió de esto? Estoy buscando algo similar. – asbjornenge

2

Escribí una aplicación web que extrae una paleta de colores de una imagen. Se le permite cargar una imagen, a continuación, jugar con tres algoritmos diferentes/enfoques para la extracción de una paleta de colores de ella:

  1. histografía simple
  2. Corte intermedio
  3. de k-medias

puede encontrar una copia de la misma se ejecuta here

Usted puede encontrar el código para que en github

Está escrito 100% en Javascript, y utiliza Plotly.js Para el ejemplo parcelas.

También ha escrito una entrada que describe los tres enfoques/algoritmos en más detalle - se puede encontrar que here

+0

Cool, gracias por publicar! – nrabinowitz

Cuestiones relacionadas