dominant - Obtener el color promedio de la imagen a través de Javascript

get main color from image 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

Solución todo en uno

Personalmente, combinaría Color Thief junto con esta versión modificada de Name that Color para obtener una matriz más que suficiente de los resultados de color dominante para las imágenes.

Ejemplo:

Considera la siguiente imagen:

Puede usar el siguiente código para extraer datos de imágenes relacionadas con el color dominante:

let color_thief  = new ColorThief();
let sample_image = new Image();

sample_image.onload = () =>
{
    let result = ntc.name( ''#'' + color_thief.getColor( sample_image ).map( x =>
    {
        const hex = x.toString( 16 );
        return hex.length === 1 ? ''0'' + hex : hex;

    }).join( '''' ) );

    console.log( result[0] ); // #F0C420     : Dominant HEX/RGB value of closest match
    console.log( result[1] ); // Moon Yellow : Dominant specific color name of closest match
    console.log( result[2] ); // #FFFF00     : Dominant HEX/RGB value of shade of closest match
    console.log( result[3] ); // Yellow      : Dominant color name of shade of closest match
    console.log( result[4] ); // false       : True if exact color match
};

sample_image.crossOrigin = ''anonymous'';
sample_image.src         = document.getElementById( ''sample-image'' ).src;

Answer 2

"Color dominante" 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.

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 desde el punto de vista computacional. 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 los 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. - utilizar la distancia euclídea entre x1y1 y x1y2 para calcular la distancia entre x1y1 y x1y3.

Por favor, avíseme si progresa en este frente. Me gustaría verlo Voy a hacer lo mismo.

El lienzo 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 3

AFAIK, la única forma de hacerlo es con <canvas/> ...

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

Tenga en cuenta que esto solo funcionará con imágenes en el mismo dominio y en navegadores compatibles con el lienzo 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, echa un vistazo a excanvas .

Answer 4

Existe una herramienta en línea pickimagecolor.com que le ayuda a encontrar el color promedio 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

Answer 5

Imaginé que publicaría un proyecto que encontré recientemente para obtener el color dominante:

Ladrón de color

Un script para capturar 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 la pregunta en el contexto adecuado ("en javascript"). Esperemos que este proyecto ayude a aquellos que quieren hacer precisamente eso.

Answer 6

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 7

Primero: se puede hacer sin HTML5 Canvas o SVG.
En realidad, alguien solo logró generar archivos PNG del lado del cliente usando JavaScript , sin canvas o SVG, usando el esquema de URI de datos .

Segundo: es posible que en realidad no necesites Canvas, SVG o cualquiera de los anteriores.
Si solo necesita procesar imágenes del 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 para ello -probablemente proceda de la caché del navegador- y procesarla como una secuencia de bytes desde Javascript.
Necesitará una buena comprensión del formato de imagen. (El generador anterior se basa parcialmente en fuentes de libpng y podría proporcionar un buen punto de partida).

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

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). Un enfoque diferente usa K-Means para obtener grupos de colores.

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

Genere los colores dominantes para una imagen RGB con XMLHttpRequest

Answer 10

Una forma menos precisa pero más rápida de obtener el color promedio de la imagen con el soporte de datauri :

function get_average_rgb(img) {
    var context = document.createElement(''canvas'').getContext(''2d'');
    if (typeof img == ''string'') {
        var src = img;
        img = new Image;
        img.setAttribute(''crossOrigin'', ''''); 
        img.src = src;
    }
    context.imageSmoothingEnabled = true;
    context.drawImage(img, 0, 0, 1, 1);
    return context.getImageData(1, 1, 1, 1).data.slice(0,3);
}

Answer 11

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

Puede encontrar here una publicación de @Georg hablando sobre un pequeño código del desarrollador de 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);

Esto invierte la imagen usando los valores R, G y B 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.