php

PHP: incrustar imagen en base64

El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP: cómo mostrar una imagen (existente en el sistema de archivos) codificada en base64 como el atributo src de un elemento img generado con PHP.

Veremos cómo leer y codificar la imagen así como colocar el tipo mime correcto.

Imagen en base64

Para insertar una imagen como base64 en una etiqueta img sin usar PHP usamos la siguiente sintaxis:

<img src="data:_MIME_;base64,IMAGEN_EN_BASE64"/>

Estoy indicando el mime y la imagen en mayúsculas y con guiones bajos para que puedas notarlos, pues es obligatorio que se indique el data: (fíjate en los dos puntos al final), luego el tipo mime, después un punto y coma, la cadena literal base64, (fíjate en la coma al final) y finalmente la imagen codificada en base64.

Por ejemplo para una imagen PNG:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMcAAAA1CAYAAAD1X//UAAAAAXNSR0IArs4c6...

Fíjate que va el data:, después el mime que es image/png, luego un punto y coma, la cadena base64, y finalmente toda la imagen codificada que, para este ejemplo, está truncada.

Insertar imagen en base64 usando PHP

Ahora que sabemos eso veamos un ejemplo para codificar una imagen existente pero como base64 leyendo su tipo mime correcto usando PHP. Recuerda que:

  1. mime_content_type es una función de PHP que devuelve el tipo mime a partir del nombre del archivo
  2. base64_encode codifica la cadena (montón de bytes) que le pasemos como primer argumento en base64
  3. file_get_contents lee el contenido de un archivo y lo devuelve como una cadena en donde están los bytes del archivo

Con esas 3 funciones podemos obtener el mime y codificar la imagen como base64 para mostrarla en una etiqueta img. También podemos usar la función printf para que el código sea más limpio:

<?php
$nombreImagen = "parzibyte.png";
$mime = mime_content_type($nombreImagen);
$imagenComoBase64 = base64_encode(file_get_contents($nombreImagen));
?>
<img src="<?php printf("data:%s;base64,%s", $mime, $imagenComoBase64) ?>">

Y así es como podemos mostrar una imagen incrustada. No hay problema con la extensión de la imagen, pues el tipo mime siempre será correcto.

Ahora ya conoces el formato para indicar una cadena en base64 como fuente de una imagen usando PHP para codificar una imagen existente en el sistema de archivos.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

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.
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/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

5 días hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.