Base64 a PNG

Cómo convertir Base64 a PNG

1. Pega el Base64 o la URI completa data:image/png;base64,... en el cuadro. También puedes abrir o soltar un archivo .txt con la cadena.
2. Revisa la línea de estado: debería decir Base64 válido y Detectado PNG. La vista previa muestra la imagen y su tamaño en píxeles.
3. Cambia el Nombre de archivo si hace falta. La Extensión ya es png.
4. Pulsa Descargar archivo.

Si los datos resultan ser otro formato, aparece una nota sobre la vista previa, por ejemplo «Esto parece JPEG, no PNG», con un botón Descargar como .jpg. Renombrar no convierte nada, así que guardarlo con la extensión real suele ser la mejor opción.

De dónde sale el Base64 de un PNG

PNG es la salida por defecto de muchas herramientas que te entregan imágenes como texto:

• canvas.toDataURL() en los navegadores devuelve una data URI PNG salvo que pidas otro tipo. Los paneles de firma, las apps de dibujo y las bibliotecas de gráficos que exportan imágenes se basan en él.
• Automatización de navegadores: get_screenshot_as_base64() de Selenium y page.screenshot({ encoding: "base64" }) de Puppeteer devuelven capturas PNG como Base64 sin más, sin prefijo. Los informes de pruebas suelen incrustarlas en JSON o HTML.
• Las API de códigos QR, códigos de barras, captchas, mapas y generación de imágenes suelen devolver PNG en un campo JSON.
• HTML y CSS con iconos incrustados, y exportaciones de un solo archivo de informes y notebooks.

Todo esto se pega directamente. Se toleran los saltos de línea, la falta de = al final y los caracteres URL-safe; la línea de estado avisa cuando se añadió relleno.

Leer el encabezado del PNG

Un PNG empieza con una firma de 8 bytes seguida del chunk IHDR, que contiene las propiedades básicas de la imagen. Pulsa Mostrar volcado hex para verlas. Para una imagen de 120×40 con transparencia, las dos primeras líneas son:

00000000  89 50 4e 47 0d 0a 1a 0a  00 00 00 0d 49 48 44 52  |.PNG........IHDR|
00000010  00 00 00 78 00 00 00 28  08 06 00 00 00 35 ea 3e  |...x...(.....5.>|

El tipo de color te dice qué clase de PNG tienes: 00 escala de grises, 02 RGB, 03 paleta (indexado), 04 escala de grises con alfa, 06 RGB con alfa. Un PNG de paleta salido de un optimizador suele ocupar mucho menos que uno RGBA, algo útil cuando el Base64 tiene que ser corto.

Si las dimensiones parecen absurdas, como un ancho de varios millones de píxeles, los bytes tras la firma están dañados y la vista previa fallará.

Comprobar un PNG en código

Los mismos campos del encabezado se pueden leer en unas pocas líneas de Python sin ninguna biblioteca de imágenes. La división por la coma hace que funcione tanto con Base64 sin más como con data URI:

import base64, struct

def png_info(b64: str) -> dict:
    data = base64.b64decode(b64.split(",", 1)[-1])
    if data[:8] != b"\x89PNG\r\n\x1a\n":
        raise ValueError("not a PNG")
    width, height, depth, color_type = struct.unpack(">IIBB", data[16:26])
    return {"width": width, "height": height, "bit_depth": depth, "color_type": color_type}

Para escribir el archivo en Node.js basta con fs.writeFileSync("shot.png", Buffer.from(b64, "base64")). El decodificador Base64 de Node ignora los saltos de línea y también acepta caracteres URL-safe. Más en Base64 en Python y Base64 en Node.js.

Cuando el PNG no se decodifica o no se ve

• Error «Carácter no válido». En la cadena hay algo que no es Base64: un escape JSON como \/, una entidad HTML o el resto de una línea de log. El error da la posición, y Reparar Base64 limpia los sospechosos habituales.
• La imagen sale a medias o no sale. La cadena se truncó. Un PNG completo termina con un chunk IEND; compara el Tamaño con el del archivo original si lo conoces.
• «Esto no parece PNG». Los bytes no empiezan por la firma PNG. Es típico de datos cifrados, de otra codificación como hex o de un Base64 codificado dos veces, en cuyo caso aparece Decodificar de nuevo.
• La vista previa funciona, pero otro programa rechaza el archivo. Compara el SHA-256 que se muestra aquí con el hash del archivo que recibió el programa. Si coinciden, el archivo decodificado es correcto y el fallo está en el programa.

Para ir en sentido contrario y codificar un PNG, usa PNG a Base64.

Preguntas frecuentes