Как сохранить рисунок холста?

Question

У меня есть это приложение для рисования пальцев, и я хочу, чтобы мои пользователи могли сохранить то, что они нарисовали, и вернуться позже и продолжить рисование.

Какой самый легкий способ сделать это?

Answer 1

Один из способов сделать это:

Сохранить содержимое холста как PNG-изображение в кодировке base64, вызвав canvas.toDataURL () и сохранить закодированную строку в * 1005 страницы* localStorage .

Когда вы хотите восстановить холст, вы должны создать изображение, установить src в качестве значения, ранее сохраненного локально, а затем нарисовать это изображение на холсте.

Существуют и другие методы, такие как запись всех операций рисования, сохранение их локально или в сеансе сервера и их «повторное воспроизведение» при следующем посещении страницы.

Answer 2

HTML Сохранить кнопку:

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

Тогда скрипт:

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

Тогда вам нужно будет использовать drawImage Canvases с сохраненным изображением. То, как / где вы сохраняете изображение (ваш сервер, его папка для скачивания), зависит от того, как вы хотите загрузить его обратно.

Answer 3

Вы можете использовать ткань JS.У него есть метод, который помогает сериализации в JSON, а затем вы можете сохранить этот JSON в БД Документация