保存HTML5畫布數據

Question

我正在使用ASP.NET/JavaScript創建白板應用程序。 HTML5畫布是我目前開發白板功能（繪圖，文本，圖像，形狀等）的工具。如何保存我的場景，以便以後可以加載（並繼續繪製）？我見過保存畫布PNG圖像的功能，它是保存畫布數據的唯一方式嗎？還是有另一種方式可以讓我將畫布數據保存在其語義中，例如，我可以保存在畫布上繪製的線條，形狀，文本和圖像嗎？我有什麼選擇？

Answer 1

畫布是給出的指令的光柵化輸出，純粹是像素數據存儲。如果您需要知道爲達到目標所採取的步驟，您需要將它們記錄在您正在使用的JavaScript中，以便首先創建它。否則，如果相對簡單，您可以將每個元素繪製到堆疊/屏幕外畫布上，並分別導出這些畫布。顯然這可能會變得很貴，這取決於你需要做的數量。

有一些像this這樣的事情'撤銷'畫布操作，但實際上它只是存儲一系列線條，並且每次都從頭開始重新繪製它們。如果您單擊撤消，它會從數組中刪除一行，否則會添加一行。要做你想做的事情，你需要存儲一個操作數組，從一個完全黑色的畫布中繪製出來。