Онлайн-кодировщик и декодер Data URL

Что такое Data URL?

Data URL встраивает данные прямо в URL в форме data:[<media-type>][;base64],<data>. Медиатип необязателен, а полезная нагрузка может быть в base64 или процентном кодировании.

Зачем использовать Data URL?

Data URL полезны для встраивания небольших файлов прямо в HTML, CSS, тесты и примеры без отдельного запроса файла.

Пример Data URL

data:text/plain;charset=utf-8;base64,SGVsbG8= -> встроенный текст
data:image/png;base64,... -> предпросмотр изображения

Data URL в 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 в 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 в 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

Декодировать Data URL

О Data URL