2

我目前正在开发一个 2D、基于图块的 HTML5 关卡编辑器游戏。现在我允许用户使用 localStorage 在浏览器上保存他们的关卡并下载它，两者都作为 json 字符串。我希望能够将级别的图像附加到 json 中。我想出了如何将关卡的副本创建到画布和用于保存的图像元素中。

我现在需要一种将关卡保存为 png 数据的方法，以便我可以附加关卡的 json 字符串表示，然后将其作为 png 保存到硬盘驱动器或存储在 localStorage 中。

我曾尝试使用 canvas.toDataURL() 但这只会给我画布作为 base64 编码数据，而不是 png。我已经尝试过 canvas2image 库，但它会在我附加数据之前下载图像。

所以，总而言之，任何人都知道如何将画布转换为 PNG 文件而不保存，以便我可以在保存之前附加一些额外的数据？

我认为这个问题很直接，所以我没有添加任何源代码，特别是因为它在打字稿中。

4

1 回答 1

2

做不到。期间（不修改浏览器的源代码或自己制作）。

确实给你一个PNG（或JPEG ，toDataURL()如果你指定它），但以数据uri的形式。其内容通常编码为需要解码的 Base64 字符串（生成二进制 PNG 文件）。

想象一下，如果任何 Web 应用程序可以在用户不知情的情况下将内容保存到用户磁盘上的任何位置（缓存、清单、本地存储除外，因为存在隔离存储），那么安全风险会怎样。

要保存以localStorage仅保存 Base64 字符串，但请注意localStorage.

base64 版本的大小比原始内容大 33%，由于 Uni-coding，每个 char 占用 2 个字节，因此localStorage可能会根据图像的大小快速耗尽空间。

更好的选择可能是Indexed DB甚至Web SQL（现已弃用）（也有File API，但目前仅在 Chrome 中），因为您可以为这些请求大小。

于 2013-07-29T21:07:45.713 回答