Как сохранить и загрузить HTML5 Canvas в локальное хранилище и из него?

Question

Я хочу, чтобы пользователь мог сохранять рисунки холста в localStorage (используя кнопку "Сохранить") под произвольным именем, а затем иметь возможность загружать (используя кнопку загрузки) предыдущие рисунки из localStorage.

Answer 1

Первый вариант

Если вы хотите сохранить только растровое изображение, вы можете сохранить его следующим образом:

localStorage.setItem(canvasName, canvas.toDataURL());

а затем загрузить как это:

var dataURL = localStorage.getItem(canvasName);
var img = new Image;
img.src = dataURL;
img.onload = function () {
    ctx.drawImage(img, 0, 0);
};

Я рекомендую использовать canvas.toDataURL() вместо ctx.getImageData() так как ctx.getImageData() Размер строки JSON будет просто огромен, даже если canvas пуст.

Второй вариант

Если вы хотите сохранить холст как массив строк, вам следует сохранить координаты линий в некоторой переменной и сохранить ее в формате json:

localStorage.setItem(canvasName, JSON.stringify(linesArray));

Затем вы можете загрузить массив строк и перерисовать холст:

var lines = JSON.parse(localStorage.getItem(canvasName));
lines.forEach(function (line) {
    ctx.beginPath();
    ctx.strokeStyle = line.color;
    ctx.moveTo(line.x1, line.y1);
    ctx.lineTo(line.x2, line.y2);
    ctx.stroke();
});

Answer 2

Первым шагом будет получение данных изображения с холста.

var imageData = myCtxt.getImageData(0,0,WIDTH,HEIGHT);

Теперь сохраните это localStorage после stringifying Это:

localStorage.setItem(savekey, JSON.stringify(idt));

Чтобы прочитать и восстановить данные, вы можете использовать следующее:

var idt = localStorage.getItem(savekey) || null;
if (idt !== null) {
    var data = JSON.parse(idt);
    ctx.putImageData(idt, 0, 0);
}

Я поместил функции для управления функциональностью в вашу скрипку.

относительно localStorage Вы можете прочитать это и этот вопросы.