¿Cómo obtener el color promedio o principal de una imagen con javascript?

Question

lo que quiero es el HEX o el valor promedio RGB de una imagen al otro fondo div de este color.

Así que si subo una imagen con una ot de rojo obtengo algo así como # FF0000 solo como un ejemplo.

que me haga saber si esto es Posible :)

Muchas gracias.

Answer 1

Esto sólo es posible mediante la etiqueta de tela como se describe aquí:

http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation

Por supuesto, esto sólo está disponible en

Answer 2

• imagen puesta sobre lienzo nuevos navegadores.
• Obtener contexto 2D.
• Pasa por los píxeles y almacena cada valor r, g, b. Si encuentra lo mismo, increméntelo una vez.
• Pasa por los valores almacenados de r, g, b y toma nota del mayor valor de r, g, b.
• Convert r,g,b to hex.

Answer 3

En primer lugar, dibujar la imagen en un canvas:

function draw(img) { 
    var canvas = document.createElement("canvas"); 
    var c = canvas.getContext('2d'); 
    c.width = canvas.width = img.width; 
    c.height = canvas.height = img.height; 
    c.clearRect(0, 0, c.width, c.height); 
    c.drawImage(img, 0, 0, img.width , img.height); 
    return c; // returns the context 
} 

Ahora puede iterar sobre los píxeles de la imagen. Un enfoque ingenuo para la detección del color es simplemente contar la frecuencia de cada color en la imagen.

// returns a map counting the frequency of each color 
// in the image on the canvas 
function getColors(c) { 
    var col, colors = {}; 
    var pixels, r, g, b, a; 
    r = g = b = a = 0; 
    pixels = c.getImageData(0, 0, c.width, c.height); 
    for (var i = 0, data = pixels.data; i < data.length; i += 4) { 
     r = data[i]; 
     g = data[i + 1]; 
     b = data[i + 2]; 
     a = data[i + 3]; // alpha 
     // skip pixels >50% transparent 
     if (a < (255/2)) 
      continue; 
     col = rgbToHex(r, g, b); 
     if (!colors[col]) 
      colors[col] = 0; 
     colors[col]++; 
    } 
    return colors; 
} 

function rgbToHex(r, g, b) { 
    if (r > 255 || g > 255 || b > 255) 
     throw "Invalid color component"; 
    return ((r << 16) | (g << 8) | b).toString(16); 
} 

getColors devuelve un mapa de nombres de colores y recuentos. Los píxeles transparentes se saltan. Sería trivial obtener el color que se ve con mayor frecuencia en este mapa.

Si, literalmente, quiere una promedio de cada componente de color, que podría fácilmente que a partir de los resultados de getColors, también, pero los resultados no son propensos a ser muy útil. This answer explica un enfoque mucho mejor.

Se puede utilizar en todo como esto:

// nicely formats hex values 
function pad(hex) { 
    return ("000000" + hex).slice(-6); 
} 

// see this example working in the fiddle below 
var info = document.getElementById("info"); 
var img = document.getElementById("squares"); 
var colors = getColors(draw(img)); 
for (var hex in colors) { 
    info.innerHTML += "<li>" + pad(hex) + "->" + colors[hex]; 
} 

Ver un working example.

Answer 4

para determinar que color medio:

1. poner una imagen en la lona
imagen
2. Cambiar el tamaño de 1px por 1px
3. obtener el color del píxel resultante (Este píxel será el promedio calculado)

Answer 5

Puede considerar el uso de los filtros de convolución css le permite aplicar. Esto podría ser capaz de obtener el efecto que busca (suponiendo que desea presentarlo de nuevo en el html). Entonces puedes mostrar la imagen dos veces, una convuelta.

Habiendo dicho eso, realmente no funciona si necesita la información usted mismo para algún propósito.