type texto formulario color cambiar bootstrap javascript algorithm colors palette

texto - ¿Algoritmo para la cuantización de color/paleta de color de imagen reducida en JavaScript?



input type color bootstrap (2)

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 de canvas , procesa un poco y luego representa la imagen utilizando formas vectoriales (utilizando Protovis ). Funciona bien, pero termino con varios miles de colores, y me gustaría que el usuario elija el tamaño de la paleta de destino y reduzca la paleta de colores a ese tamaño.

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

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

Intenté la opción ingenua de eliminar los fragmentos menos significativos de los colores, pero los resultados fueron bastante malos. He investigado sobre los algoritmos de cuantificación del color , pero todavía tengo que encontrar una descripción clara de cómo implementar uno. Probablemente podría encontrar una forma sencilla de enviar esto al servidor, ejecutarlo a través de un programa de procesamiento de imágenes y enviar la paleta resultante de vuelta, pero preferiría hacerlo en JavaScript en el lado del cliente.

¿Alguien tiene un ejemplo de un algoritmo claramente explicado que funcione 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.

Edición (25/7/11): Tomé la sugerencia de @ Pointy e implementé (la mayoría de) MMCQ de Leptonica (cuantificación de corte de mediana modificada) en JavaScript. Si estás interesado, puedes ver el código aquí.

Edición (5/8/11): La biblioteca clusterfck parece otra gran opción para esto (aunque creo que es un poco más lenta que mi implementación).


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

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


Escribí una aplicación web que extrae una paleta de colores de una imagen. Le permite cargar una imagen y luego jugar con tres algoritmos / enfoques diferentes para extraer una paleta de colores de ella:

  1. Histogramas simples
  2. Corte mediano
  3. k-significa

Puedes encontrar una copia de ella corriendo here

Puedes encontrar el código para ello en github

Está escrito al 100% en Javascript y usa Plotly.js para los gráficos de ejemplo.

También escribí una publicación que describe los tres enfoques / algoritmos con más detalle. Puede encontrar esto here