製作HTML繪圖應用程序可節省您的繪圖

Question

我對我想製作的程序有個概念。我想製作某種繪圖程序，讓您在頁面上畫線，保存，然後當另一個用戶查看同一頁面時，他可以看到第一個用戶製作的圖形，並對其進行編輯。這將全部在線，大概使用HTML5畫布。

我想我可以弄清楚繪圖部分沒問題：當用戶點擊鼠標時，程序將基本上填充一系列跟蹤鼠標移動的圓圈。但是，我很難搞清楚如何堅​​持圖紙。我現在可以想到的最佳解決方案是對圖形進行「快照」並以某種格式進行保存，但隨着圖形變大，這意味着有一個大文件被保存並從服務器發送到客戶端，聽起來很不理想。

有人可以提供建議，如何堅持和有效地保存這些圖紙？

Answer 1

HTML5像素數據可以輕鬆導出並導入爲PNG圖像。像素數據大小僅取決於尺寸，而不是應用了多少繪圖命令，因爲它是基於位圖緩衝區的，而不是基於矢量的。

使用出口toDataURL（）：

Capture HTML Canvas as gif/jpg/png/pdf?

保存數據到服務器。

導入現有圖像，只需將其加載爲<img>並使用drawImage()在<canvas>上繪製圖像即可。