开发一个 DataURL 相关工具

「这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战」

大家好，我是山月。我最近写了一款工具

先睹为快，附上链接: devtool.tech/dataurl。

哦对，时隔半年，最近我又在 B 站直播，我会把我开发者工具网站上所有工具都在 B 站上传视频讲解一遍使用及其原理。可在 B 站搜索程序员山月关注我。

DataURL Preview

可根据图片生成其 DataURL，也可根据 DataURL 实时预览图片。并展示了 DataURL 的原理及使用场景。

如何使用

DataURL Preview

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

DataURL Generator

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

工作原理

Data URL 由四个部分组成：

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

data:[<mediatype>][;base64],<data>
复制代码

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

将图片生成 DataURL

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

Blob -> FileReader -> DataURL
Blob -> ArrayBuffer -> DataURL

这里仅列举其中第二种实现:

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
    }
  }
}
复制代码

下一个工具与新功能的建议欢迎留言！

下一个工具，我已经想好了，一个 SVG Viewer，可压缩可美化、可预览图片、可生成 DataURL、可转为 JPG/PNG、可转为 React Component。