Codificador y decodificador de Data URL en línea

¿Qué es una Data URL?

Una Data URL incrusta datos directamente en una URL con la forma data:[<media-type>][;base64],<data>. El tipo de medio es opcional y la carga puede estar en base64 o codificada con porcentaje.

¿Por qué usar Data URLs?

Las Data URLs son útiles para incrustar archivos pequeños directamente en HTML, CSS, pruebas y ejemplos sin una solicitud de archivo separada.

Ejemplo de Data URL

data:text/plain;charset=utf-8;base64,SGVsbG8= -> texto en línea
data:image/png;base64,... -> vista previa de imagen

Data URL en JavaScript

// Encoding in the browser
const file = new File(['Hello'], 'hello.txt', { type: 'text/plain;charset=utf-8' });
const reader = new FileReader();

reader.addEventListener('load', () => {
	console.log(reader.result);
	// Output: data:text/plain;charset=utf-8;base64,SGVsbG8=
});
reader.readAsDataURL(file);

// Decoding in the browser
const response = await fetch('data:text/plain;charset=utf-8;base64,SGVsbG8=');
console.log(await response.text());
// Output: Hello

Data URL en Go

package main

import (
	"encoding/base64"
	"fmt"
	"strings"
)

func main() {
	mediaType := "text/plain;charset=utf-8"
	payload := base64.StdEncoding.EncodeToString([]byte("Hello"))
	dataURL := "data:" + mediaType + ";base64," + payload
	fmt.Println(dataURL)
	// Output: data:text/plain;charset=utf-8;base64,SGVsbG8=

	parts := strings.SplitN(dataURL, ",", 2)
	meta := strings.TrimPrefix(parts[0], "data:")
	isBase64 := strings.HasSuffix(meta, ";base64")
	mediaType = strings.TrimSuffix(meta, ";base64")

	var decoded []byte
	if isBase64 {
		decoded, _ = base64.StdEncoding.DecodeString(parts[1])
	}
	fmt.Println(mediaType, string(decoded))
	// Output: text/plain;charset=utf-8 Hello
}

Data URL en PHP

<?php
// Encoding
$mediaType = "text/plain;charset=utf-8";
$dataUrl = "data:" . $mediaType . ";base64," . base64_encode("Hello");
echo $dataUrl . "\n";
// Output: data:text/plain;charset=utf-8;base64,SGVsbG8=

// Decoding
[$meta, $payload] = explode(",", $dataUrl, 2);
$metadata = substr($meta, 5);
$isBase64 = str_ends_with($metadata, ";base64");
$mediaType = $isBase64 ? substr($metadata, 0, -7) : $metadata;
$decoded = $isBase64 ? base64_decode($payload) : rawurldecode($payload);

echo $mediaType . " " . $decoded . "\n";
// Output: text/plain;charset=utf-8 Hello

Decodificar Data URL

Acerca de Data URLs