我目前正在研究HTML5中基于平铺的2D平面编辑器游戏。现在我允许用户使用localStorage在浏览器上保存他们的级别并将其下载，都作为json字符串。我希望能够在json上附加关卡的图像。我想出了如何在画布和图像元素中创建关卡的副本以进行保存。
我现在需要的是一种将级别保存为png数据的方法，以便我可以附加我的json字符串表示形式，然后将其作为png保存到硬盘驱动器或将其存储在localStorage中。 / p>
我尝试过使用canvas.toDataURL（），但这只给我画布作为base64编码数据而不是png。我已经尝试过canvas2image库，但是在我可以附加数据之前它会下载图像。
所以，总而言之，任何人都知道如何将画布转换为PNG文件而不保存，因此我可以在保存前附加一些额外的数据吗？
我认为这个问题是直接的，所以我没有添加任何源代码，特别是因为它是打字稿。
答案 0 :(得分：2)
无法完成。期间（不是不修改浏览器的源代码或制作自己的源代码）。
toDataURL()确实会为您提供PNG（如果您指定的话，则为JPEG），但会以数据形式显示。其内容通常编码为需要解码的Base64字符串（导致二进制PNG文件）。
想象一下，如果任何网络应用程序只是在他们不知情的情况下将内容保存到用户磁盘上的任何位置（缓存，清单，本地存储被排除，因为存在独立存储），则存在安全风险。
要保存到localStorage，只需保存Base64字符串，但要注意localStorage的大小限制。
base64版本的大小比原始内容大33％，并且由于Uni编码，每个char占用2个字节，因此localStorage可能会在空间中快速运行，具体取决于图像的大小。
更好的选择可能是Indexed DB甚至是Web SQL（现已弃用）（File API也有，但目前只在Chrome中），因为您可以请求这些尺寸。