Colores RGB desde una Imagen

cmarrero · #1 (**permalink**) 10/11/2010, 10:46

Estoy buscando la posibildad de hacer con javascript una aplicacion que al darle una imagen me diga los colores RGB que esta posee..

Alguien tiene idea si ya hay algo parecido??? o por donde puedo arrancar..

Gracias

sysmadryn · #2 (**permalink**) 10/11/2010, 10:52

Probablemente se pueda con hta (microsoft) o complementos de Firefox. Ambos se pueden programar con javascript.

Saludos

zerokilled · #3 (**permalink**) 10/11/2010, 20:26

no lo aseguro porque nunca lo he hecho pero segun con el metodo getImageData de <canvas> se puede hacer. http://stackoverflow.com/questions/6...om-html-canvas

Panino5001 · #4 (**permalink**) 11/11/2010, 02:02

En efecto, con canvas es posible lograrlo (obviamente no funcionará en las actuales versiones de Explorer: para solventarlo habrá que buscar una solución por el lado del servidor o a través de flash y su clase BitmapData).
Un ejemplo aplicando canvas:
http://tirolatlas.uibk.ac.at/papers/...9/ex_read.html
Más experimentos con canvasPixelArray:
http://www.disegnocentell.com.ar/notas2.php?id=254
Algunos ejemplos con flash y BitMapData:
http://www.disegnocentell.com.ar/notas2.php?id=229
Y del lado del servidor, con GD -basado en la función imagecolorat-:
http://www.bandwise.com/snippets/colorpicker.html

cmarrero · #5 (**permalink**) 11/11/2010, 07:05

No me importa mucho que funcione explorar ya que lo estoy haciendo para dispositivos moviles... y actualmente probando en android..

Voy a investigar como lo puedo hacer con canvas... ahora tengo que ver realmente como es esto, por que la verdad estoy medio perdido con el tema...

Gracias por los aportes..

cmarrero · #6 (**permalink**) 11/11/2010, 09:36

Por lo que vi, lo hace con SVG, estoy todavia perdido...

Esto http://tirolatlas.uibk.ac.at/papers/...tribution.html es exactamente lo que necesito...

pero imposible tomarlo o bajarlo para probar...

Alguna idea

Panino5001 · #7 (**permalink**) 11/11/2010, 10:02

En realidad no es necesario usar svg, eso es sólo un ejemplo -y por cierto, puedes descargarlo y ver el código fuente y acceder a los archivos javascript que usa desde este enlace: http://tirolatlas.uibk.ac.at/papers/...stribution.svg .
Pero todo eso se puede hacer sin problemas usando únicamente canvas. Fijate cómo se trabaja para leer los colores rgb de cada pixel usando la propiedad data del objeto que devuelve el método getImageData.
Un ejemplo de cómo obtener la información y manipularla podrás verlo en este enlace, en el cual tomé la foto de un amigo y la convertí en ascii art:
http://www.disegnocentell.com.ar/eje...scaleJS/cv.php

cmarrero · #8 (**permalink**) 11/11/2010, 10:37

Gracias panino por tu aporte... lo q estoy haciendo es una aplicacion para telefonos android que al sacarle una foto a algo me de los coleres RGB mas predominantes ...

Ya tengo todo listo menos eso... vamos a ver como me va...

cmarrero · #9 (**permalink**) 11/11/2010, 13:41

Dando a luz:

Bueno, pude hacerlo con exito, se los pongo aca para que lo vean... ahora me queda ver en algunos foros de Android por que no funciona canvas. y un ultimo tema...

si ven el codigo se los explico mas abajo...

Código HTML:

<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap</title>
    <link rel="stylesheet" href="css/app.css" type="text/css">
    <script type="text/javascript" charset="utf-8" src="js/phonegap.js"></script>	  
    <script type="text/javascript" charset="utf-8" src="js/app.js"></script>	  
</head>
<body onload="init();" id="stage" class="theme">
    <a href="#" class="btn large" onclick="show_pic();">Tomar Fotos</a>
    <div id="viewport" class="viewport" style="display: none;">
    	<h1>Localizacion de la Foto</h1>
	    <div id="localizacion" class="localizacion"></div>
        <h2>Foto Tomada</h2>
        <img style="width:300px;height:300px" id="test_img" src="jpg.png" />
        <canvas id="micanvas" width="300" height="300">
        </canvas>
        <a href="#" class="btn large" onclick="tomar_colores();">Tomar Colores RGB</a>
        <div id="colorRGB" class="colorRGB" style="display:none;">
        &#x25D9; Colores de la Imagen
        </div>
    </div>
    </div> 
  </body>
</html>

Y el js donde esta el codigo.... es

Código HTML:

 function tomar_colores(){
	var hint = document.getElementById('colorRGB');
    var imagenTomada = document.getElementById("test_img").src;
   var ctx = cargaContextoCanvas('micanvas');
   if(ctx){
      var img = new Image();
      img.src = imagenTomada; 
      img.onload = function(){
         ctx.drawImage(img, 0, 0);
	     var count = {};
		var data = ctx.getImageData(0,0,300,300).data;
		for (var i=0; i<data.length; i+=4) {
		  var rgb = "rgb("+data[i+0]+","+data[i+1]+","+data[i+2]+")";
		  (! count[rgb]) ? count[rgb] = 1 : count[rgb]++;
		}
		hint.style.display = "block";
		for (rgb in count) {
			var perc = Math.round(100.0/(data.length/4)*count[rgb]*10)/10.0;
			if(perc>=50){
				hint.innerHTML += '<br><font color="'+rgb+'">&#x25D9; '+ rgb+' ('+perc+'%)</font>';
			}
		}
	  };
   }
};

Si ven esta parte

if(perc>=50){
hint.innerHTML += '<br><font color="'+rgb+'">◙ '+ rgb+' ('+perc+'%)</font>';
}

Tengo un problema, que al poner una imagen donde ningun color predomina en un 50 porciento, no me muestra ningun color... que me recomiendan para poder colocar como maximo 10 colores RGB que mas predominen... recordemos que pueden variar muchisimo...

Saludos

Panino5001 · #10 (**permalink**) 11/11/2010, 13:56

Mirá, este enlace corresponde a flash, pero verás que tiene bastantes similitudes con canvas y, aunque no las tuviera, lo que importa en este caso es la lógica para determinar los colores predominantes. Vas a ver cálculos que te resultarán, seguramente, muy interesantes y afines con tu objetivo: http://blog.soulwire.co.uk/flash/act...olour-palette/

cmarrero · #11 (**permalink**) 11/11/2010, 14:14

Me imagine algo asi... es pasar a Hexadecimal etc etc etc... tendria que utilizar funciones de javascript para hacer conversiones....

Por ahora, solo estoy usando una idea para colores plenos, que me da un porcentaje de pixeles que tienen el mismo color, el tema es una pequeña variacion y se me desbarata el codigo.. no me funcionaria con fotografias reales...

Asi que bueno... tendre que ponerme mas las pilas...

gracas