How to save a canvas drawing?

Question

I have a finger drawing application, and I want my users to be able to save what they are drawing and come back later and continue drawing.

What is an easier way to do this?

Answer 1

One way to do this:

Save the contents of the canvas as a base64 encoded PNG image by calling canvas.toDataURL () and save the encoded string on the localStorage page .

If you want to restore the canvas, you must create an image, set src as the value previously saved locally, and then draw this image on the canvas.

, , .

Answer 2

HTML:

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

script:

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

Canvases drawImage . / ( , ) , .

Answer 3

you can use js. It has a method that helps serialize JSON, and then you can save that JSON to the database. documentation