どのようにキャンバスの状態をdbに保存しますか？

Question

私はこのリアルタイム描画アプリケーションをnode.js、socket.io、およびhtml5 canvasで構築しました。クリックされた状態でマウスが移動されるすべてのピクセルが追跡され、ブロードキャストされます（他のコンピュータの描画入力を表示するため）。

キャンバスのイメージを保存することは可能ですが、このキャンバスは非常に大きい（10000x10000 +ピクセル）ことがわかりました。今、ページが更新されると、すべての図面が消えてしまいます（単にソケットを送信しただけなので、何も保存されません）。

私はすべてのキャンバスデータをdbに保存してから、ページが再び読み込まれたときに何らかの形で書き換えたいと思いますが、それは単純すぎます。あなたはこれについてどうやって行きますか？

Answer 1

キャンバスをソケット上に送信している間にそのように見えるようにしたクリックとマウスの動きを追跡し、それらをシミュレートしてイメージを再構築することができます。