图片 DataURL 生成及预览器
上传图片生成 DataURL
图片尺寸: 507 B

图片 DataURL 生成及预览器

如何使用

DataURL Preview

在输入框直接输入 DataURL,将在右侧进行实时预览。

DataURL Generator

在输入框上侧点击上传图片,将在输入框中生成 Base64 DataURL,并在右侧进行实时预览。

工作原理

Data URL 由四个部分组成:

  1. 前缀(data:)
  2. 指示数据类型的MIME类型([<mediatype>]),所有 MIME Type,可查 mime-db
  3. 如果二进制数据则为可选的base64标记,比如图片([;base64])
  4. 数据
data:[<mediatype>][;base64],<data>

因此,任意 MIME Type 的资源均可以表示为 DataURL 而不仅仅限于图片。

将图片生成 DataURL

将图片生成 DataURL 的方式有两种:

  1. Blob -> FileReader -> DataURL
  2. Blob -> ArrayBuffer -> DataURL

这里仅列举其中通过 FileReader API 的实现:

function blobToDataURL(blob: Blob): Promise<string> {
const reader = new FileReader();
return new Promise((resolve, reject) => {
reader.addEventListener('load', () => {
const url = reader.result as string
resolve(url)
}, false)
reader.addEventListener('error', (e) => {
reject(e)
}, false)
reader.readAsDataURL(blob)
})
}

应用

在工程化实践中,往往会将小于 8KiB 的图片展示为 Base64 DataURL,并内联在 HTML 中。从而减少小体积图片 HTTP 请求的次数,并提升页面性能。

webpack 4 中进行如下配置:

module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
}
},
],
},
]
}
}

webpack 5 中进行如下配置:

{
test: /\.(png|jpe|gif)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 8192
}
}
}