Base64 para PNG

Como converter Base64 para PNG

1. Cole o Base64 ou o URI data:image/png;base64,... completo na caixa. Também dá para abrir ou arrastar um arquivo .txt com a string.
2. Confira a linha de status: ela deve mostrar Base64 válido e Detectado PNG. A prévia exibe a imagem e o tamanho em pixels.
3. Mude o Nome do arquivo se precisar. A Extensão já vem como png.
4. Clique em Baixar arquivo.

Se os dados forem de outro formato, um aviso aparece acima da prévia, por exemplo “Isto parece ser JPEG, não PNG”, com um botão Baixar como .jpg. Renomear não converte nada, então salvar com a extensão real costuma ser a melhor escolha.

De onde vem o PNG em Base64

PNG é a saída padrão de muitas ferramentas que entregam imagens como texto:

• canvas.toDataURL() nos navegadores devolve um data URI PNG, a menos que você peça outro tipo. Campos de assinatura, apps de desenho e bibliotecas de gráficos que exportam imagens se baseiam nele.
• Automação de navegador: o get_screenshot_as_base64() do Selenium e o page.screenshot({ encoding: "base64" }) do Puppeteer devolvem screenshots PNG como Base64 puro, sem prefixo. Relatórios de teste muitas vezes os embutem em JSON ou HTML.
• APIs de QR code, código de barras, captcha, mapas e geração de imagens costumam devolver PNGs em um campo JSON.
• HTML e CSS com ícones embutidos, e exportações em arquivo único de relatórios e notebooks.

Tudo isso pode ser colado direto. Quebras de linha, um = faltando no final e caracteres URL-safe são tolerados; a linha de status avisa quando o preenchimento foi adicionado.

Lendo o cabeçalho do PNG

Um PNG começa com uma assinatura de 8 bytes seguida do chunk IHDR, que guarda as propriedades básicas da imagem. Clique em Mostrar dump hex para vê-las. Para uma imagem de 120×40 com transparência, as duas primeiras linhas são:

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

O tipo de cor diz que tipo de PNG você tem: 00 tons de cinza, 02 RGB, 03 paleta (indexado), 04 tons de cinza com alfa, 06 RGB com alfa. Um PNG de paleta saído de um otimizador costuma ser bem menor que um RGBA, o que é bom saber quando o Base64 precisa ser curto.

Se as dimensões parecerem absurdas, como uma largura de vários milhões de pixels, os bytes depois da assinatura estão danificados e a prévia vai falhar.

Verificar um PNG no código

Os mesmos campos do cabeçalho podem ser lidos em poucas linhas de Python, sem nenhuma biblioteca de imagem. O split na vírgula faz a função servir tanto para Base64 puro quanto para data URIs:

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 gravar o arquivo em Node.js, fs.writeFileSync("shot.png", Buffer.from(b64, "base64")) basta. O decodificador Base64 do Node ignora quebras de linha e também aceita caracteres URL-safe. Mais em Base64 em Python e Base64 em Node.js.

Quando o PNG não decodifica ou não aparece

• Erro “Caractere inválido”. Há algo além de Base64 na string: um escape de JSON como \/, uma entidade HTML ou o resto de uma linha de log. O erro informa a posição, e Reparar Base64 limpa os suspeitos de sempre.
• A imagem aparece pela metade ou não aparece. A string foi truncada. Um PNG completo termina com um chunk IEND; compare o Tamanho com o arquivo original, se você souber qual é.
• “Não parece ser PNG”. Os bytes nem começam com a assinatura PNG. Isso é típico de dados criptografados, de outra codificação como hex ou de Base64 codificado duas vezes, caso em que aparece Decodificar de novo.
• A prévia funciona, mas outro programa rejeita o arquivo. Compare o SHA-256 mostrado aqui com o hash do arquivo que o programa recebeu. Se forem iguais, o arquivo decodificado está correto e o problema é do programa.

Para o caminho inverso, codificar um PNG, use PNG para Base64.

Perguntas frequentes