我目前正在使用 HTML5 开发 2D、基于图 block 的关卡编辑器游戏。现在，我允许用户使用 localStorage 在浏览器上保存他们的关卡并下载它，两者都作为 json 字符串。我希望能够将关卡图像附加到 json。我弄清楚了如何将关卡的副本创建到 Canvas 和图像元素中以进行保存。
我现在需要的是一种将关卡保存为 png 数据的方法，以便我可以附加关卡的 json 字符串表示形式，然后将其作为 png 保存到硬盘驱动器或将其存储在 localStorage 中。
我尝试过使用canvas.toDataURL()，但这只给我 Canvas 作为base64编码的数据，而不是png。我已经尝试过 canvas2image 库，但它会在我附加数据之前下载图像。
所以，总而言之，有人知道如何将 Canvas 转换为 PNG 文件而不保存为这样我可以在保存之前附加一些附加数据吗？
我认为这个问题很简单，所以我不会添加任何源代码，特别是因为它是在 typescript 中。
最佳答案
无法完成。句号(不修改浏览器的源代码或制作自己的源代码)。
toDataURL() 确实为您提供了 PNG(或 JPEG，如果您指定的话)，但采用 data-uri 的形式。其内容通常编码为需要解码的 Base64 字符串(这会生成二进制 PNG 文件)。
想象一下，如果任何网络应用程序可以在用户不知情的情况下将内容保存到用户磁盘上的任何位置(缓存、 list 、本地存储除外，因为存在独立存储)，那么会存在安全风险。
要保存到 localStorage，只需保存 Base64 字符串，但请注意 localStorage 的大小限制。
base64 版本的大小比原始内容大 33%，并且由于统一编码，每个字符占用 2 个字节，因此 localStorage 可能会根据图像的大小快速耗尽空间.
更好的选择也许是 Indexed DB甚至Web SQL (现已弃用)(也有 File API 但目前仅在 Chrome 中)，因为您可以请求这些尺寸。
关于javascript - 从 Canvas 保存图像，而无需使用“另存为”，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17934096/