節省從畫布上的圖像，而無需使用另存爲

Question

我目前的工作在HTML5二維，瓷磚的關卡編輯器遊戲。現在，我允許用戶使用localStorage將它們的級別保存在瀏覽器中，並將其作爲json字符串下載。我希望能夠附加到json的關卡圖像。我想出瞭如何創建一個級別的副本到畫布和圖像元素進行保存。

我現在需要的是一種將級別保存爲png數據的方法，以便我可以附加該級別的json字符串表示形式，然後將其保存爲png格式或存儲在localStorage中。

我一直在使用canvas.toDataURL（）嘗試，但這隻給我的畫布爲Base64編碼的數據，是不是PNG。我已經嘗試過canvas2image庫，但它會在我可以追加數據之前下載圖像。

所以，綜上所述，任何人都知道如何將畫布轉換成PNG文件時沒有保存爲這樣我就可以在保存之前附加一些額外的數據呢？

我想這個問題是泥炭直線前進，所以我不加入任何的我的源代碼，特別是因爲它是打字稿。

Answer 1

不能完成。期間（不是沒有修改瀏覽器的源代碼或製作自己的代碼）。

的toDataURL()給你做一個PNG（或JPEG如果指定的話），但在數據URI的形式。其內容通常被編碼爲需要解碼的Base64字符串（這導致了二進制PNG文件）。

想象一下，如果任何Web應用程序只是在不知情的情況下將內容保存到用戶磁盤上的任何位置（緩存，清單，本地存儲，因爲存在獨立存儲而被排除），則存在安全風險。

要保存到localStorage只保存Base64字符串，但要注意localStorage的大小限制。

由於Uni編碼，base64版本的尺寸比原始內容大33％，每個字符佔用2個字節，因此localStorage可能會根據圖像的大小快速運行。

一個更好的選擇也許是Indexed DB甚至Web SQL（廢棄）（有File API太多，但目前僅適用於Chrome），你可以申請一個大小爲這些。