HTML5 - прохождение Canvas между файлами

Question

У меня есть два html-файла, скажем 1.html и 2.html с 1.js и 2.js ссылками javascripts. В 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 холст и установить/применить его на 1.html, так что здесь я действительно люблю:

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

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

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

Answer 1

Возможно, вы сможете делать то, что хотите, сохраняя 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, прежде чем вы можете сделать это на холсте, но я не конечно.

Answer 2

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

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

Javascript Canvas Serialization/Deserialization?