以角度将图像转换为 Base64 - TypeScript

在 TypeScript 中，将图像转换为 Base64 格式是一项常见的任务。通过这种方式，您可以轻松地将图像添加到应用程序中，而不需要使用外部文件。

步骤

以下是将图像转换为 Base64 格式的基本步骤：

1. 将图像加载到 <img> 标签中。
2. 获取图像的数据 URL。
3. 将数据 URL 转换为 Base64 格式。

让我们逐步解释这些步骤。

将图像加载到 <img> 标签中

要将图像加载到 <img> 标签中，您可以使用以下代码：

const img = new Image();
img.onload = () => {
  // 图像已经加载完毕，可以进行下一步操作。
};
img.src = 'path/to/image.png';

在上面的代码中，onload 回调函数将在图像加载完毕之后触发。您应该在该回调函数中执行下一步操作。

获取图像的数据 URL

要获取图像的数据 URL，您可以使用 <canvas> 元素。以下是使用 <canvas> 元素获取数据 URL 的代码：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const dataURL = canvas.toDataURL('image/png');

在上面的代码中，我们创建了一个 <canvas> 元素，并使用 drawImage() 方法将图像绘制到画布上。然后，我们可以使用 toDataURL() 方法获取数据 URL。

将数据 URL 转换为 Base64 格式

要将数据 URL 转换为 Base64 格式，您可以使用以下代码：

const base64 = dataURL.replace(/^data:image\/(png|jpg);base64,/, '');

在上面的代码中，我们使用 replace() 方法删除数据 URL 中的前缀，并将其转换为 Base64 格式。

示例代码

以下是将图像转换为 Base64 格式的完整 TypeScript 代码：

const img = new Image();
img.onload = () => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  const dataURL = canvas.toDataURL('image/png');
  const base64 = dataURL.replace(/^data:image\/(png|jpg);base64,/, '');
  // 在此处使用 Base64 编码的图像。
};
img.src = 'path/to/image.png';

结论

在 TypeScript 中将图像转换为 Base64 格式非常简单。遵循以上步骤并使用示例代码，您可以轻松地将图像添加到您的应用程序中。