Excelente tutorial realizado por tutorialzine en el que nos enseñan a crear una galería de imágenes con jQuery, Php y CSS al estilo de la aplicación Mac Photobooth.
Se trata de una galería en la que nos da la opción de capturar la imagen desde la cámara de nuestra computadora, gracias al uso de Flash, aunque hace uso de webcam.js para envolver el SWF y controlarlo desde Javascript.
Requerimientos para realizar este tutorial (descargar):
Un tutorial para un nivel de desarrollo más bien avanzado, con el que obtendremos conocimiento de PHP y jQuery.
DEMO |
DESCARGA |
13 comentarios
Hola excelente información sobre uso de las camaras web, actualmente desarrollo un sistema de clientes y me viene excelente para el momento de capturar la foto del cliente, nomas falta enviar la foto a la base de datos, ya logro generarla y guardarla en imagen jpeg con el codigo facilitado gracias:
$folder = ‘uploads/’;
$nombre_archivo = uniqid().’.jpg’;
$original = $folder.$nombre_archivo;
// enviamos la imagen jpeg
$input = file_get_contents(‘php://input’);
$resultado = file_put_contents($original, $input);
if (!$resultado) {
echo ‘{
«error» : 1,
«message» : «El guardado fallo checa los permisos en la carpeta.»
}’;
exit;
}
$info = getimagesize($original);
if($info[‘mime’] != ‘image/jpeg’){
unlink($original);
exit;
}
//movemos de la carpeta temporal:
rename($original,’uploads/original/’.$nombre_archivo);
$original = ‘uploads/original/’.$nombre_archivo;
Heriberto, te aconsejaría que no guardaras la foto en la base de datos, sino la ruta especifica, es decir, una cadena de texto como por ejemplo –> img/clientes/nombrecliente.jpg
Una vez lo quieras recuperar, solo tienes que hacer uso de la cadena de texto.
Saludos.
Gracias por la recomendacion, lo voy a desarrollar de la manera en que me aconsejas, ya que las imagenes estarian muy pesadas para guardarlas en la base de datos,estoy totalmente de acuerdo, aprovecho para mencionarte que el captcha de verificación a veces no funciona bien y tienes que intentar en varias ocasiones para que aparezca el codigo aleatorio, estoy usando google chrome , saludos
gracias, la verdad que es un problema que llevo tiempo con él, al final tendré que optar por otro captcha, no se que pasa en google chrome, saludos.
me gusto mucho tu codigo pero tengo una duda porque cuando pongo al div camera style=»display none» ya no me vuelve a cargar el flash?
Alely no es que no te vuelva a cargar el flash, es que si pones display:none a una capa ya no aparecerá.
¿Que es lo que quieres hacer exactamente?
No te preocupes admin ya resolvi ese problema
Esta muy bueno el codigo, el problema es que solo me funciona con Firefox, hice pruebas con chrome, safari, opera e internet exploresr pero no captura la foto, si se visualiza pero no captura.
Hola heriberto estoy tratando de hacer lo mismo que tu, me gustaria saber si ya lo hiciste. y Gracias
Hola.
Estoy implementado un sistema en el cual tengo que tomar Fotografias de Articulos, este codigo me funciona pero solo con Chrome pero no con Internet Explorer… alguien a solucionado este problema que pueda auxiliarme.
Un saludo espero su respuesta…
Alguien a podido resolver los problemas que ocurren con Internet Explorer cuando ejecutan la aplicacion y refrescan la pagina.
Quisiera agregar un nombre a la foto, me podrán apoyar para indicarme como colocar un cuadro de texto antes de darle upload y que se guarde con el nombre que ponga dentro del cuadro de texto?
Se lo agradeceria mucho!!!
en la carpeta assets/js esta script.js
hay esta una funcion mi pregunta es como hago para que cuando yo apriete enter en una caja de texto tome la foto ya que la funcion esta en el click
var shootEnabled = false;
$(‘#formulario’).click(function(){ // este click es lo que quiero cambiar para que cuando oprima enter me tome la foto y me la guande
if(!shootEnabled){
return false;
}