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

Cannot open PNGs created with canvas.toDataUrl

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

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

我打开一个文本编辑器,将 pngdata 的内容复制到一个名为 img.png

的文件中
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAkMAAAiICAYAAAD...

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

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

为什么这不起作用?

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

您可以找到许多可以为您完成此操作的在线工具,或者最好的可能是 directly export your canvas drawing to a binary Blob and download this Blob thanks to a blob:// URL