Compreendendo data:image/png;base64: o wrapper e os bytes

data:image/png;base64, é um prefixo, não uma imagem completa. Ele introduz um recurso embutido: o esquema é data, o tipo de mídia declarado é image/png e o marcador indica que a carga útil a seguir usa Base64. A vírgula é o limite entre metadados e dados.

Leia a estrutura

data:[media-type][;base64],payload

data:text/plain;base64,SGVsbG8=
data:text/plain,Hello%20world

O primeiro exemplo representa o texto Olá até Base64. O segundo usa codificação percentual. Um analisador Data URI deve inspecionar os metadados antes de escolher um decodificador. O envio do URI completo para um decodificador Base64 bruto falha porque dois pontos, ponto e vírgula e vírgula não são caracteres de carga útil.

Divida na primeira vírgula, não em todas as vírgulas. Os dados restantes podem conter vírgulas, especialmente em um texto não Base64 URI. Parâmetros opcionais de tipo de mídia podem aparecer antes do marcador Base64. Quando o tipo de mídia é omitido, o formato de dados URL possui um tipo de texto e conjunto de caracteres padrão; esse padrão não transforma bytes binários arbitrários em texto legível.

Um rótulo MIME é uma reivindicação

Qualquer um pode colocar image/png no prefixo. O rótulo não prova que os bytes formam PNG. Compare a assinatura e peça a um decodificador de imagem real para carregar o resultado. Da mesma forma, um cabeçalho PDF é apenas uma pista de reconhecimento; um analisador PDF completo ainda pode rejeitar o documento.

Mudando image/png para image/jpeg não converte a imagem. Conversão significa decodificar a imagem de origem e codificar um novo arquivo no formato de destino. Isso pode alterar a transparência, os metadados, a qualidade e o tamanho. Mantenha o original quando essas diferenças forem importantes.

Recuperar o recurso sem executá-lo

Analise e inspecione primeiro. O texto pode ser mostrado como texto, enquanto as imagens raster suportadas podem ser visualizadas em um elemento de imagem. Evite inserir marcações arbitrárias HTML ou SVG no documento. Um dado URL pode representar conteúdo ativo e também uma imagem, portanto, sua natureza independente não é uma garantia de segurança.

Para baixar um arquivo, preserve os bytes decodificados e use uma extensão sensata com base nas informações de formato confirmadas. Para um relatório de diagnóstico, exiba o tipo declarado e o tipo detectado separadamente. Isso torna as incompatibilidades visíveis em vez de ocultá-las atrás de um ícone de arquivo tranquilizador. A sintaxe dos dados URL e seus padrões são descritos em MDN: URLs de dados.