Foros del Web » Programando para Internet » Javascript »

Conocer la cantidad de colores en una imagen

Estas en el tema de Conocer la cantidad de colores en una imagen en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/05/2012, 21:17
 
Fecha de Ingreso: mayo-2012
Mensajes: 2
Antigüedad: 11 años, 10 meses
Puntos: 0
Conocer la cantidad de colores en una imagen

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.
  #2 (permalink)  
Antiguo 03/05/2012, 22:02
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Conocer la cantidad de colores en una imagen

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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 04/05/2012, 06:25
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 10 meses
Puntos: 834
Respuesta: Conocer la cantidad de colores en una imagen

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] = 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> 
  #4 (permalink)  
Antiguo 04/05/2012, 10:27
 
Fecha de Ingreso: mayo-2012
Mensajes: 2
Antigüedad: 11 años, 10 meses
Puntos: 0
Respuesta: Conocer la cantidad de colores en una imagen

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

Etiquetas: cantidad, colores, conocer
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:16.