Obtener el color promedio de la imagen mediante Javascript

Question

No estoy seguro de que esto sea posible, pero busca escribir un script que devuelva el valor promedio de hex o rgb para una imagen. Sé que se puede hacer en AS pero buscando hacerlo en JavaScript.

Answer 1

yo sepa, la única manera de hacerlo es con <canvas/> ...

DEMO V2: http://jsfiddle.net/xLF38/818/

Nota, esto sólo funcionará con imágenes en el mismo dominio y en los navegadores que soportan Lienzo de HTML5:

function getAverageRGB(imgEl) { 

    var blockSize = 5, // only visit every 5 pixels 
     defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs 
     canvas = document.createElement('canvas'), 
     context = canvas.getContext && canvas.getContext('2d'), 
     data, width, height, 
     i = -4, 
     length, 
     rgb = {r:0,g:0,b:0}, 
     count = 0; 

    if (!context) { 
     return defaultRGB; 
    } 

    height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height; 
    width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width; 

    context.drawImage(imgEl, 0, 0); 

    try { 
     data = context.getImageData(0, 0, width, height); 
    } catch(e) { 
     /* security error, img on diff domain */ 
     return defaultRGB; 
    } 

    length = data.data.length; 

    while ((i += blockSize * 4) < length) { 
     ++count; 
     rgb.r += data.data[i]; 
     rgb.g += data.data[i+1]; 
     rgb.b += data.data[i+2]; 
    } 

    // ~~ used to floor values 
    rgb.r = ~~(rgb.r/count); 
    rgb.g = ~~(rgb.g/count); 
    rgb.b = ~~(rgb.b/count); 

    return rgb; 

} 

Para IE, consulte excanvas.

Answer 2

JavaScript no tiene acceso a los datos de color de píxeles individuales de una imagen. Al menos, tal vez no hasta html5 ... en cuyo caso es lógico que puedas dibujar una imagen en un lienzo y luego inspeccionar el lienzo (tal vez, nunca lo hice yo mismo).

Answer 3

Yo diría a través de la etiqueta de lona HTML.

puede encontrar here un mensaje por @Georg hablando de un pequeño código por el dev Opera:

// Get the CanvasPixelArray from the given coordinates and dimensions. 
var imgd = context.getImageData(x, y, width, height); 
var pix = imgd.data; 

// Loop over each pixel and invert the color. 
for (var i = 0, n = pix.length; i < n; i += 4) { 
    pix[i ] = 255 - pix[i ]; // red 
    pix[i+1] = 255 - pix[i+1]; // green 
    pix[i+2] = 255 - pix[i+2]; // blue 
    // i+3 is alpha (the fourth element) 
} 

// Draw the ImageData at the given (x,y) coordinates. 
context.putImageData(imgd, x, y); 

Esta invertir la imagen mediante el uso de la R, G y B el valor de cada píxel. Puede almacenar fácilmente los valores RGB, luego redondear los arreglos Rojo, Verde y Azul, y finalmente convertirlos de nuevo en un código HEX.

Answer 4

Primero: se puede hacer sin HTML5 Canvas o SVG.
En realidad, alguien solo logró generate client-side PNG files using JavaScript, sin lienzo o SVG, utilizando el data URI scheme.

Segundo: es posible que en realidad no necesites Canvas, SVG o cualquiera de los anteriores.
Si solo necesita procesar imágenes en el lado del cliente, sin modificarlas, todo esto no es necesario.

Puede obtener la dirección de origen de la etiqueta img en la página, hacer una solicitud de XHR - probablemente provenga de la memoria caché del navegador - y procesarla como una secuencia de bytes de Javascript.
Necesitará una buena comprensión del formato de la imagen. (El generador anterior se basa parcialmente en fuentes libpng y podría proporcionar un buen punto de partida.)

Answer 5

"Dominant Color" es complicado. Lo que quiere hacer es comparar la distancia entre cada píxel y cada otro píxel en el espacio de color (Distancia euclidiana), y luego buscar el píxel cuyo color está más cerca de cualquier otro color. Ese píxel es el color dominante. El color promedio generalmente será barro.

Ojalá tuviera MathML aquí para mostrarle la Distancia euclidiana. Buscalo en Google.

que he logrado la ejecución anterior en el espacio de color RGB usando PHP/GD aquí: https://gist.github.com/cf23f8bddb307ad4abd8

Sin embargo, esto es muy costoso computacionalmente.Se bloqueará su sistema en imágenes grandes, y definitivamente bloqueará su navegador si lo prueba en el cliente. He estado trabajando en la refacturación de mi ejecución para: - almacenar resultados en una tabla de búsqueda para su uso futuro en la iteración sobre cada píxel. - para dividir imágenes grandes en cuadrículas de 20px 20px para el dominio localizado. - para usar la distancia euclídea entre x1y1 y x1y2 para calcular la distancia entre x1y1 y x1y3.

Háganme saber si avanza en este frente. Me gustaría verlo Voy a hacer lo mismo.

La lona es definitivamente la mejor manera de hacer esto en el cliente. SVG no lo es, SVG está basado en vectores. Después de que baje la ejecución, lo siguiente que quiero hacer es ejecutar esto en el lienzo (tal vez con un webworker para el cálculo de la distancia global de cada píxel).

Otra cosa en que pensar es que RGB no es un buen espacio de color para hacer esto, porque la distancia euclidiana entre los colores en el espacio RGB no es muy cercana a la distancia visual. Un mejor espacio de color para hacer esto podría ser LUV, pero no he encontrado una buena biblioteca para esto, ni ningún algoritmo para convertir RGB a LUV.

Un enfoque completamente diferente sería ordenar los colores en un arcoiris, y construir un histograma con tolerancia para tener en cuenta los distintos tonos de un color. No he intentado esto, porque ordenar colores en un arco iris es difícil, y también lo son los histogramas de color. Podría intentar esto a continuación. De nuevo, avíseme si progresa aquí.

Answer 6

Robusto que había puesto un proyecto Recientemente me encontré para conseguir el color dominante:

Color Thief

Un guión para agarrar el color dominante o una paleta de colores representativa de una imagen. Utiliza javascript y lienzo.

Las otras soluciones que mencionan y sugieren el color dominante nunca responden realmente la pregunta en el contexto adecuado ("en javascript"). Esperemos que este proyecto ayude a aquellos que quieren hacer precisamente eso.

Answer 7

Se trata de la "Cuantización del color" que tiene varios enfoques, como MMCQ (cuantificación de corte de mediana modificada) o OQ (cuantización de octário). Enfoque diferente use K-Means para obtener grupos de colores.

He putts todos juntos aquí, ya que estaba encontrando una solución para tvOS donde hay un subconjunto de XHTML, que no tiene <canvas/> elemento:

Generate the Dominant Colors for an RGB image with XMLHttpRequest

Answer 8

Recientemente me encontré con un plugin de jQuery, que hace lo que originalmente quería https://github.com/briangonzalez/jquery.adaptive-backgrounds.js en lo que respecta a obtener un color dominante de una imagen.

Answer 9

Hay una herramienta en línea pickimagecolor.com que le ayuda a encontrar el color medio o dominante de la imagen. Solo tiene que cargar una imagen desde su computadora y luego hacer clic en la imagen. Da el color promedio en HEX, RGB y HSV. También encuentra los tonos de color que coinciden con ese color para elegir. Lo he usado muchas veces