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.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 2,003 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: