PHP: tomar foto con cámara y guardar en MySQL

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.

Definiendo la estructura de la base de datos

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.

Tomando 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:

La base de datos

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.

Recibiendo y guardando la foto en base de datos

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.

Mostrando foto

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.

Poniendo todo junto

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.

Mi recomendación

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.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

10 comentarios en “PHP: tomar foto con cámara y guardar en MySQL”

  1. Javier Bernal Velasquez

    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

  2. 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?

  3. 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?

Dejar un comentario