JavaScript toDataURL

什么是 toDataURL?

toDataURL 是一个 JavaScript 方法，可以将一个 Canvas 转换为一张图片的 Data URL（一种能够被浏览器直接渲染的图片格式）。Data URL 包含了图片的 Base64 编码数据。

如何使用 toDataURL?

使用 toDataURL() 方法将 Canvas 转换为 Data URL

const canvas = document.getElementById('my-canvas');
const dataURL = canvas.toDataURL();

将 Data URL 渲染为图片

const img = new Image();
img.src = dataURL;
document.body.appendChild(img);

从服务器获取图片并转换为 Data URL

const imgUrl = 'https://example.com/image.jpg';
fetch(imgUrl)
  .then(response => response.blob())
  .then(blob => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = () => {
      const dataURL = reader.result;
      const img = new Image();
      img.src = dataURL;
      document.body.appendChild(img);
    };
  });

toDataURL 的注意事项

• toDataURL() 返回的 Data URL 包含了完整图片的 Base64 编码数据，因此对于大图片来说，这可能会导致性能问题。
• 直接使用 toDataURL() 转换一个带透明度的 Canvas 可能会导致与预期不符的结果。详细信息请查看 MDN 文档。
• 转换一个 Canvas 到 Data URL 是一个异步操作。如果 Canvas 需要被使用（例如，用作纹理或绘制另一个 Canvas），请确保在完成转换操作之前，Canvas 不要被修改或删除。

参考

• Mozilla Developer Network: HTMLCanvasElement.toDataURL()