Inzicht in data:image/png;base64: de wrapper en de bytes

data:image/png;base64, is een voorvoegsel, geen volledige afbeelding. Het introduceert een inline bron: het schema is data, het aangegeven mediatype is image/png, en de markering zegt dat de volgende payload Base64 gebruikt. De komma is de grens tussen metadata en data.

Lees de structuur

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

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

Het eerste voorbeeld vertegenwoordigt de tekst Hallo tot en met Base64. De tweede gebruikt in plaats daarvan procentcodering. Een Data URI parser moet de metadata inspecteren voordat hij een decoder kiest. Het verzenden van de volledige URI naar een onbewerkte Base64-decoder mislukt omdat de dubbele punt, puntkomma en komma geen payload-tekens zijn.

Splits bij de eerste komma, niet bij elke komma. De overige gegevens kunnen zelf komma's bevatten, vooral in een niet-Base64 tekst URI. Optionele mediatypeparameters kunnen vóór de Base64-markering verschijnen. Wanneer het mediatype wordt weggelaten, heeft het gegevensformaat URL een standaard teksttype en tekenset; die standaard zet willekeurige binaire bytes niet om in leesbare tekst.

Een MIME-label is een claim

Iedereen kan plaatsen image/png in het voorvoegsel. Het label bewijst niet dat de bytes een PNG vormen. Vergelijk de handtekening en vraag vervolgens een echte beelddecoder om het resultaat te laden. Op dezelfde manier is een PDF-header slechts een herkenningsaanwijzing; een volledige PDF-parser kan het document nog steeds afwijzen.

Veranderen image/png aan image/jpeg converteert de afbeelding niet. Conversie betekent het decoderen van de bronafbeelding en het coderen van een nieuw bestand in het doelformaat. Hierdoor kunnen de transparantie, metadata, kwaliteit en omvang veranderen. Bewaar het origineel als die verschillen er toe doen.

Herstel de bron zonder deze uit te voeren

Eerst analyseren en inspecteren. Tekst kan worden weergegeven als tekst, terwijl ondersteunde rasterafbeeldingen vooraf kunnen worden bekeken in een afbeeldingselement. Vermijd het invoegen van willekeurige HTML of SVG markeringen in het document. Gegevens URL kunnen zowel actieve inhoud als een afbeelding vertegenwoordigen, dus het op zichzelf staande karakter ervan is geen veiligheidsgarantie.

Voor het downloaden van een bestand bewaart u de gedecodeerde bytes en gebruikt u een verstandige extensie op basis van bevestigde formaatinformatie. Voor een diagnostisch rapport geeft u het gedeclareerde type en het gedetecteerde type afzonderlijk weer. Dit maakt mismatches zichtbaar in plaats van ze te verbergen achter een geruststellend bestandspictogram. De syntaxis van gegevens URL en de standaardinstellingen ervan worden beschreven in MDN: gegevens-URL's.