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

JavaScript – Dividir texto en varias líneas con espacio

Hoy te voy a enseñar a agregar un salto de línea a un texto para…

1 semana hace

Emitir sonido y parpadear LED en impresora térmica

Algunas impresoras térmicas ESC POS tienen un buzzer o zumbador que puede emitir sonidos, también…

2 semanas hace

Tailwind CSS – Centrar verticalmente

En este corto tutorial de programación CSS con Tailwind vamos a ver cómo centrar un…

3 semanas hace

Cámara a impresora térmica – Aplicación web

Hoy te voy a enseñar una aplicación web (programada con JavaScript en el lado del…

3 semanas hace

Mejorar calidad de imágenes en impresora térmica

En este artículo te voy a enseñar una técnica para mejorar la calidad de las…

3 semanas hace

Convertir OffscreenCanvas a imagen en base64

La API de OffscreenCanvas permite trabajar con un canvas en JavaScript sin tener que usar…

3 semanas hace

Esta web usa cookies.