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;">
◙ 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+'">◙ '+ 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