HTML5 - передача холста между файлами

Question

У меня есть два html-файла, скажем 1.html и 2.html с ссылками javascripts на ссылки 1.js и 2.js. В 1.html у меня есть объект Canvas с функцией перетаскивания, поэтому я использую метод drawImage для добавления дополнительных изображений на холст. Когда я закончу с добавлением изображений в 1.html, я сохраню холст в localStorage . В скором времени это будет выглядеть так:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

ctx.drawImage(imageObj, x, y, imageObj.width, imageObj.height);
ctx.drawImage(imageObj2, x2, y2, imageObj2.width, imageObj2.height);

localStorage.setItem("context1", ctx);  // Unsure if i should save context or canvas

Теперь, в 2.html, я хочу получить сохраненный в 1.html canvas и установить / применить его к 1.html, поэтому здесь я делаю следующее:

var savedContext = localStorage.getItem("context1");

var canvas1 = document.getElementById('canvas1');
var context1 = savedContext;

И я не получаю никаких результатов, я даже не знаю, возможно ли вообще передать Canvas таким образом со всеми изображениями, которые были нарисованы на нем, или, может быть, есть другой способ сделать это

Answer 1

Я не думаю, что это правильный способ сделать это. Причина: API localstorage хранит только пары ключ-значение. Так что вам нужно строковое представление вашего элемента canvas.

Смотрите здесь:

Сериализация / десериализация Javascript Canvas?

Answer 2

Вы можете сделать то, что вы хотите, сохранив URL-адрес данных, а не пытаясь сохранить холст или контекст:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

ctx.drawImage(imageObj, x, y, imageObj.width, imageObj.height);
ctx.drawImage(imageObj2, x2, y2, imageObj2.width, imageObj2.height);

localStorage.setItem("imageData", canvas.toDataUrl());

И восстановить его позже:

var img = document.createElement('img');
img.src = localStorage.getItem("imageData");

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

ctx.drawImage(img, x, y, img.width, img.height);

Возможно, вам также придется подождать, пока событие «onload» не сработает на img, прежде чем вы сможете нарисовать его на холсте, но я не уверен.