无法打开使用 canvas.toDataUrl 创建的 PNG

Question

我使用 toDataUrl 方法从画布创建一个 png blob。

const pngdata = canvas.toDataURL("image/png");

我打开一个文本编辑器并将pngdata 的内容复制到我称为img.png 的文件中

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAkMAAAiICAYAAAD...

我保存了这个文件。当我尝试打开它时（Windows 10）我得到“看起来我们不支持这种文件格式”

从文件中删除 data:image/png;base64, 没有帮助

为什么这不起作用？

Answer 1

因为您的文件仍被编码为Base64。您需要将其解码为实际的二进制数据才能成为正确的二进制文件。

您可以找到许多可以为您执行此操作的在线工具，或者最好的可能是 directly export your canvas drawing to a binary Blob 并通过 blob:// URL 下载此 Blob。