En este post te mostraré cómo tomar una foto con la cámara web usando JavaScript; para más tarde enviarla a PHP y guardarla en una base de datos.
Recuerda que ya anteriormente vimos cómo hacer lo mismo pero guardando la foto en el disco duro, esto no es más que una modificación a lo que aparece en ese post.
Recomiendo encarecidamente que leas el post que menciono, pues aquí solo cambia la parte del guardado de la foto.
Lo primero que haremos será definir la estructura de la tabla. He optado por guardar la foto en base64 usando un tipo de dato LONGBLOB que es el BLOB con mayor capacidad.
Para efectos de simplicidad el esquema es así:
Como ves simplemente tiene un id que es su llave primaria, y la foto.
El envío de la foto queda igual que en lo anterior. Lo dejaré aquí de igual manera. Tenemos el index.html que muestra una visualización de la cámara, así como un botón para tomar la foto:
Después se maneja todo con un script de JavaScript:
He tomado el archivo de conexión de mi post de PDO y PHP con MySQL. Se ve así:
Este archivo lo debemos incluir en donde queramos conectarnos a la base de datos. Recuerda cambiar tus credenciales.
Ahora veamos el archivo de PHP que recibe la foto y la guarda en MySQL. Queda así:
Lo único que hacemos es simplemente guardar la cadena en base64 dentro de la base de datos, quitándole el prefijo de data:image/png;base64,
Usamos sentencias preparadas (prepare) para evitar inyecciones SQL.
Ahora veamos cómo mostrar esta foto. Debido a que ya la tenemos en base64 podemos mostrarla como src en una etiqueta img:
De este modo la foto se va a mostrar al visitar ver.php y pasarle el ID.
El código fuente de todo este proyecto lo encuentras en GitHub. Recuerda que se puede acceder a la cámara solo si usas localhost o https.
Yo te recomiendo que no guardes la foto en la base de datos, sino en el disco duro. Y que en la base de datos guardes el nombre de la foto o un id de la misma.
El ejemplo aquí mostrado solo es por si necesitas saber cómo guardar la foto en MySQL.
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Hoy vamos a ver programar la impresión de un PDF generado a partir de HTML…
En este tutorial básico de JavaScript con HTML vamos a ver cómo llenar una lista…
En este artículo se presenta una guía para imprimir un PDF a partir de una…
En este post voy a enseñarte cómo imprimir un PDF a partir de su representación…
Esta web usa cookies.
Ver comentarios
Hola buenas tardes, tu codigo funciona perfecto, me ayudo mucho en lo que estaba haciendo, pero mi pregunta ahora es, como se puede hacer para tomar 3 fotos diferentes y enviarlas a la BD.
Por supuesto, estaré encantado de ayudarle más a fondo. Ofrezco servicios de consultoría personalizados para resolver problemas específicos. Si está interesado, envíeme un mensaje a https://parzibyte.me/#contacto y podemos conversar sobre cómo puedo ayudarle.
Buenas noches, un favor, como hago esto: Yo te recomiendo que no guardes la foto en la base de datos, sino en el disco duro. Y que en la base de datos guardes el nombre de la foto o un id de la misma.
Hola. Gracias por sus comentarios. Si tiene alguna consulta o duda, solicitud de creación de un programa, solicitud de vídeo o solicitud de cambio de software estoy para servirle en https://parzibyte.me/#contacto
Saludos!
Buen Dia, Baje los codigo, cree la table fotos, ejecuta index.html y se detiene en el mensaje de enviando foto , por favor espera.
Revise la consola y aparece que CORS ha bloqueado, la aplicacion, instale la extencion y sigue igual.
lo ejecute en windows chrome y en android
Buen día. Acabo de probar y funciona correctamente. Tal vez hay algo que no está tomando en cuenta.
Si necesita ayuda envíeme un mensaje en https://parzibyte.me/#contacto
Excelente código, me ayuda mucho en lo que busco para implementar. Ahora como podría adjuntar un formulario a ese index.html para enviarlo y capturarlo en el .js ? necesito más objetos para luego enviarlo al guardar_foto.php?
Hola. Gracias por sus comentarios. Si tiene alguna consulta o duda, solicitud de creación de un programa, solicitud de vídeo o solicitud de cambio de software estoy para servirle en https://parzibyte.me/#contacto
Saludos!
Excelente blog y excelentes las ideas y soluciones.
Con el uso de la camara lmentablemente la privacidad de los iphone no permite el acceso a la camara de parte del navegador.
Alguna sugerencia de como poder forzar el mensaje de autorización?
Tal vez usando Google Chrome o un dispositivo Android