html - キャンバスの描画を保存するには?

Question

私はこのフィンガーペインティングアプリを持っています。ユーザーが描いたものを保存し、後で戻ってきて描き続けることができるようにしたいと考えています。

これを行うためのより軽い方法は何ですか？

score 7 · Accepted Answer

これを行う1つの方法は次のとおりです。

canvas.toDataURL()を呼び出してキャンバスのコンテンツを base64 でエンコードされた PNG 画像として保存し、エンコードされた文字列をページのlocalStorageに保存します。

キャンバスを復元する場合は、画像を作成し、src を以前にローカルに保存された値に設定してから、その画像をキャンバスに描画します。

すべての描画操作を記録し、それらをローカルまたはサーバーセッションに保存し、次にページにアクセスしたときにそれらを「再生」するなど、他の方法もあります。

score 3 · Accepted Answer

HTML 保存ボタン:

  <input type="button" id="save" value="Save to PNG">

次にスクリプト：

  document.getElementById('save').onclick = function () {
    window.location = document.getElementById("canvas").toDataURL('image/png');
  };

次に、保存された画像で Canvases の drawImage を使用する必要があります。画像を保存する方法/場所 (サーバー、ダウンロードフォルダー) は、どのように再読み込みするかによって異なります。

3 に答える 3