将图像路径转换为 base64 TypeScript

在前端开发中，我们经常需要在页面上显示图片。有时候我们需要在代码中将图片转换为base64格式，方便在代码中使用图片，而不用另外加载图片资源。下面介绍如何在TypeScript中将图像路径转换为base64格式。

1. 安装依赖

在开始之前，我们需要安装以下依赖：

npm install --save-dev url-loader file-loader

其中，url-loader和file-loader是webpack的loader，用于处理不同类型的静态资源文件。

2. 配置 webpack

在 webpack.config.js 文件中，我们需要添加以下 loader 配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              esModule: false,
              name: '[name].[ext]',
              outputPath: 'images'
            },
          },
        ],
      },
    ],
  },
};

以上的配置中，我们指定了使用url-loader来加载图片文件，然后如果图片文件大小小于8KB的话，就将图片转换为base64格式。

3. 使用函数转换

在TypeScript中，我们可以使用以下函数将图片路径转换为base64格式：

function pathToBase64(path: string): Promise<string> {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', path, true);
    xhr.responseType = 'arraybuffer';
  
    xhr.onload = function () {
      if (this.status === 200) {
        const blob = new Blob([this.response], { type: xhr.getResponseHeader('content-type') });
        const reader = new FileReader();
  
        reader.onloadend = function () {
          resolve(reader.result as string);
        };
  
        reader.onerror = function (error) {
          reject(error);
        };
  
        reader.readAsDataURL(blob);
      } else {
        reject(new Error('could not load image'));
      }
    };
  
    xhr.onerror = function (error) {
      reject(error);
    };
  
    xhr.send();
  });
}

以上的函数中，我们首先使用XMLHttpRequest来获取图片资源内容，然后使用FileReader将获取到的内容转换为base64格式，并返回base64字符串。

4. 结论

通过以上几个步骤，我们就可以在TypeScript中将图片路径转换为base64格式了。这样就可以方便我们在代码中使用图片资源，而不用另外加载图片文件。