11
Mar
aNieto2k hace 5313 días en: javascript, Programacion, webdev
Detectar caras ya no es solo cosa de Google Images. Ahora tu mismo puedes implementarlo en tu sitio web usando Javascript y las propiedades de canvas.
¿Como funciona?
Para hacerlo funcionar únicamente necesitamos definir 2 ficheros en nuestro <head />.
<script type="text/javascript" src="dat.js"></script>
<script type="text/javascript" src="detector.js"></script>
El fichero dat.js indica la forma a detectar y el fichero detector.js es el que tiene la lógica del script capaz de detectar caras en cualquier foto.
Podemos detectar 1 o varias caras en las fotos, el proceso se convierte más lento dependiendo de cual elegimos (lógico).
1 cara
face_detect_one( document.getElementById("my_canvas") );
Multiples Caras
face_detect_multi( document.getElementById("my_canvas") , progress_callback, result_callback );
function progress_callback( steps_completed, total_steps){
....
}
Respuesta
En la respuesta que las funciones nos devuelve obtenemos los valores de un rectángulo en el que contendremos la cara de la persona.
var my_canvas = document.getElementById("my_canvas");
var result = face_detect_one( my_canvas );
if (result) draw_rect(result, my_canvas);
function draw_rect(r, my_canvas){
var canvas_context = my_canvas.getContext("2d");
canvas_context.strokeRect( r.x, r.y, r.w, r.w );
}
18
Dic
aNieto2k hace 5396 días en: estandares, javascript, Programacion, web, webdev
Pixastic es una librería desarrollada en Javascript con la que será posible hacer un Photoshop Online en tu propia web. Usando las propiedades del elemento <canvas /> que únicamente tienen disponible los navegadores como Firefox 2+, Opera 9.5+ y Safari/WebKit con la ultima versión disponible.
Esta librería nos permite aplicarle efectos a nuestras imagenes en tiempo real con una velocidad similar a la que nos ofrecen las herramientas de escritorio. Nos han montado un ejemplo para que podamos verlo funcionando y la verdad es que me ha sorprendido la velocidad con la que se aplicaban los efectos.
var img = document.getElement("myImage"); // get the image element
if (img.complete) { // make sure the image is fully loaded
Pixastic.process(
img,
"brightness", // brightness/contrast adjustment
{ // options object
"brightness" : 60, // set brightness option value to 60
"contrast" : 0.5, // set contrast option value to 0.5,
"rect" : { // apply the effect to this region only
"left" : 100,
"right" : 100,
"width" : 200,
"height" : 150
}
}
)
}
Documentación / Descargar
5
Dic
aNieto2k hace 5409 días en: javascript, Programacion, webdev
Técnicamente no es LOGO, pero se le parece. CanvasTurtle es un desarrollado basado en Javascript para manipular elementos canvas y así simular un sistema que inicialmente recuerda el antiguo lenguaje LOGO.
Los tiempos cambian y el pequeño triangulo de LOGO a conseguido mejorar su resolución dejando ver las patitas de la tortuga 😀
25
Nov
aNieto2k hace 5419 días en: Asides, javascript, Programacion, webdev
Si te gusta lo que se está viendo últimamente con <canvas /> y estás pensando el como lo hacen. Quizas este tutorial te ayude a disipar esas dudas.
21
Nov
aNieto2k hace 5423 días en: Asides, javascript, Programacion, webdev
Jacob Seidelin nos vuelve a deleitar con una de sus maravillas en Javascript. Esta vez, hace uso de <canvas /> para crear un juego que podría pasar por flash si no fuera posible ver el código fuente de la aplicación.[Demo]
19
Nov
aNieto2k hace 5425 días en: Asides, javascript, Programacion, webdev
No tengo otras palabras que describa este ejemplo de canvas 3D que he visto en Ajaxian. Simplemente impresionante [cuidado con el CPU]
29
Oct
aNieto2k hace 5446 días en: estandares, javascript, Programacion, web, webdev
Buscando por del.icio.us, he caido en Not The User’s Fault y más concretamente en un experimento de menú radial desarrollado sobre canvas con javascript que nos permite testear la posibilidad de implementar este tipo de menus* en nuestras aplicaciones.
Desde Metalize, hace ya más de año y medio, MeTaL_oRgY nos trajo un desarrollo mediante CSS que nos ofrecía esta posibilidad y vimos que el resultado además de bonito era bastante práctico. ¿Que os parece? ¿Podría ser un sistema de menú a tener en cuenta en nuestras aplicaciones?
* La demo solo funciona sobre Firefox 3
27
Oct
aNieto2k hace 5448 días en: Asides, estandares, javascript, Programacion, web, webdev
Bomomo es una aplicación desarrollada con Javascript y que usando canvas nos permite dibujar figuras sorprendentes con nuestro ratón. Se trata de un experimento muy interesante que muestra las posibilidades que canvas nos va a aportar a nuestras aplicaciones.
18
Oct
aNieto2k hace 5457 días en: Curiosidades, estandares, javascript, Programacion, web, webdev
El potencial de Javascript y <canvas /> se pone de manifiesto en esta demostración de tan solo 256 bytes en el que mediante el uso de Data::URL data:image nos permite simular que planeamos sobre la superficie de Marte.
<body onload=setInterval("S=Math.sin;with(R.getContext('2d'))for(fillRect(0,0,300,150,drawImage(R,9,2,282,148,0,3,300,150),fillStyle='rgba(10,0,39,.01)'),a+=x=88;x--;fillRect(x*4,75+S(a+x/27+S(x/9)*S(a*2-x/15))*20,6,2))fillStyle='#730'",a=9)><canvas id=R>
Actualizo:
Jose me avisa de que no usa Data:URL sinó que usa data:image mediante el uso de toDataURL() de canvas. Además nos muestra una versión desarrollada por él mismo del simulador marciano un poco menos ofuscado que el ejemplo anterior.
