图片 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
    }
  }
}