什么是 Data URL？

Data URL 以 data:[<media-type>][;base64],<data> 形式内嵌字节。本工具会按所选文件的媒体类型生成 Base64 载荷，并可解码 Base64 或百分号编码载荷。

为什么使用 Data URL？

Data URL 适合在需要减少独立请求时内嵌小图片、测试夹具或自包含的 HTML/CSS。Base64 会使体积增加约 33%，内嵌数据无法独立缓存，不受信任的活动媒体还可能带来风险或被内容安全策略阻止。

Data URL 示例

data:text/plain;charset=utf-8;base64,SGVsbG8= -> 内联文本
data:image/png;base64,... -> 图像预览

JavaScript 中的 Data URL

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

Go 中的 Data URL

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
}

PHP 中的 Data URL

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

关于 Data URL