Data URLs

语法

Data URLs，即前缀为data:协议的 URL，其允许内容创建者向文档中嵌入小文件。

Data URLs 由四个部分组成：前缀(data:)、指示数据类型的 MIME 类型、如果非文本则为可选的base64标记、数据本身：

data:[<mediatype>][;base64],<data>

mediatype是 MIME 类型的字符串，例如image/png表示 PNG 图像文件。如果省略，则默认值为text/plain;charset=US-ASCII。

如果数据是文本类型，可以直接将文本嵌入（根据文档类型，使用合适的实体字符或转义字符）。如果是二进制数据，可以将数据进行 base64 编码之后再进行嵌入，并且以数据前加上;base64表明编码。

以下是一些示例：

Data URLs	说明
data:,Hello%2C%20World!	简单的 text/plain 类型数据
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D	上一条示例的 base64 编码版本
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E	一个 HTML 文档源代码 <h1>Hello, World</h1>
data:text/html,<script>alert(‘hi’);</script>	一个会执行 JavaScript alert 的 HTML 文档。注意 script 标签必须封闭

使用 Go 语言生成 base64 编码数据

Data URLs 常用于图片中，把一些小尺寸图片转为 Data URLs 可以减少 HTTP 请求，但对于大尺寸图片不建议转换。以下是 Go 语言生成 base64 编码格式图片的示例：

package main

import (
    "encoding/base64"
    "os"
    "log"
    "bytes"
    "io"
)

func main() {
    reader, err := os.Open("./practice/images/test.png")
    if err != nil {
        log.Fatal(err)
    }
    defer reader.Close()

    var buf bytes.Buffer
    var b = make([]byte, 1024)
    for {
        n, err := reader.Read(b)
        if err != nil {
            if err == io.EOF {
                buf.Write(b[:n])
                break
            }
            log.Fatal(err)
        }

        n, err = buf.Write(b[:n])
        if err != nil {
            log.Fatal(err)
        }
    }

    writer, err := os.OpenFile("./test.html", os.O_CREATE|os.O_RDWR,0644)
    if err != nil {
        log.Fatal(err)
    }
    defer writer.Close()

    writer.WriteString("<img src='data:image/png;base64,")
    encoder := base64.NewEncoder(base64.StdEncoding, writer)
    encoder.Write(buf.Bytes())
    encoder.Close()
    writer.WriteString("'>")
}

以上代码对./practice/image/test.png中的内容进行 base64 编码，并输出到./test.html文件中。浏览器打开 test.html 文件即可看到效果。

常见问题

语法

Data URLs 的格式很简单，但很容易会忘记data:[<mediatype>][;base64],<data>中的<data>前面是有,的。

HTML 代码格式化

Data URLs 是文件中的文件，相对文档来说这个文件可能非常长。因为 Data URLs 也是 URL，所以 data 会用空白符来对它进行格式化。但如果数据是经过 base64 编码的，就可能会遇到一些问题。

长度限制

缺乏错误处理

Data URLs 无法被解析时不会有任何相关提示。

不支持查询字符串

data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val

这个 Data URL 代表的 HTMl 源文件内容为：

lots of text...<p><a name%3D"bottom">bottom</a>?arg=val

本文整理自 Data URLs

William A