Conocer la cantidad de colores en una imagen

simetricode · #1 (**permalink**) 03/05/2012, 21:17

Hola,

Mi objetivo es conocer número de colores planos de esta imagen mediante javascript, de manera que ignore el antialising que aparece en la unión de dos colores.

La pregunta es:

¿Cual es la manera de obtener el valor hexadecimal de un *pixel (*contenido en una imagen) con javascript?

Gracias.

emprear · #2 (**permalink**) 03/05/2012, 22:02

En primer lugar, bienvenido/a a FDW

Mirá con PHP es sencillo

http://php.net/manual/en/function.imagecolorstotal.php

Ahora con javascript, supongo que con canvas de html5 sería posible, aunque no estoy del todo seguro

Saludos

Panino5001 · #3 (**permalink**) 04/05/2012, 06:25

Con lo que sigue podés obtener la cantidad de colores. Como verás, son demasiados para ponerlos en bucle y hacer algo. Si lo que pretendés es generar una paleta de colores de la imagen, lo que tenés que hacer es, primero ordenar los colores y luego, con una función de comparación, excluir los que son similares con una variable de tolerancia. En realidad, dicho así suena complejo pero es bastante sencillo, como podrás ver acá (aunque sea flash te servirá de guía ya que bitMapData e imageData son muy semejantes): http://blog.soulwire.co.uk/flash/act...colour-palette

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

<script type="text/javascript">

function _(x){return document.getElementById(x);}

onload=function(){

    _('c').width=350;

    _('c').height=379;

    var ctx=_('c').getContext('2d');

    ctx.drawImage(_('im'),0,0);

    var data=ctx.getImageData(0,0,_('c').width,_('c').height).data,

    length=data.length,

    colores={},

    i=0,

    rgb;

    for(;i<length;i+=4){

        rgb = "rgb("+data[i+0]+","+data[i+1]+","+data[i+2]+")";

       (!colores[rgb]) ? colores[rgb] = 1 : colores[rgb]++;

    }

    var count=0;

    for(rgb  in colores){

        ++count;

    }

    _('log').innerHTML=count;

}

</script>

</head>

 
<body>

<img id="im" src="colores-planos.jpg" />

<canvas id="c"></canvas>

<div id="log"></div>

 
 
</body>

</html>

simetricode · #4 (**permalink**) 04/05/2012, 10:27

Hola emprear,
Muchas gracias por responder y por tu bienvenida :D
Esta función en php es bastante buena, pero tengo dificultades para arrojar el total de colores planos.
Quizás esa funcion de php se pueda utilizar, eliminando variables como dice panino5001.
Hola panino5001, Gracias por tu aporte, es de mucha utilidad; aunque me preocupa canvas y la compatibilidad con navegadores antiguos.
El algoritmo que propusiste es muy bueno, de manera que se eliminen colores similares y me gustaría aplicarlo.
Existen 2 posibilidades:
Hacer una paleta de colores y arrojar un resultado en porcentaje.
Los colores que no predominantes son eliminados y los que sobresalen y se repiten varias veces en la imagen, se cuentan como un número entero equivalente a uno. Es decir: rojo=1 verde=1, verde+rojo=2
ese resultado (rojo+verde=2) seria el numero de colores que tiene la imagen.
Otra alternativa seria intentar eliminar el anti-alias de la imagen del lado del servidor pero no tengo conocimiento de manipulación de imágenes con php.

Y como decia panino hacer un bucle es bastante lento a la hora de cargar la pagina, por que se tiene que revisar pixel por pixel dentro de la imagen.

(La imagen que puse como ejemplo tiene un total de 14 colores).

Pero con los dos sistemas que me pasaron los números son muy oscilantes, van desde cero hasta 256.

En conclusión me interesa hacer algo similar al enlace que me pasaste en donde se define una paleta de colores y un rango de tolerancia.

Gracias por responder