Используйте Javascript для сохранения и восстановления холста

Question

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

var cvSave; //Global variable to save ImageData 

function function1(){ 
//some stuff wich involes putting an image into a canvas 
cvSave = context.getImageData(0,0,viewport.width, viewport.height); 
// All the variables are existing and I use the context to put Stuff into the canvas which works fine 
} 

function isCalledLater(){ 
var canvas = document.getElementById('cv'); 
var ctx = canvas.getContext('2d');   //Get canvas and context 
ctx.putImageData(cvSave,0,0);    //So this should restore the canvas to what I save earlier, right? 
} 

Но когда вторая функция называется получается только холст белый и не восстановить его на то, что я думаю, что я сохранил в cvSave.

Я хочу, чтобы это было на стороне клиента, и я хочу восстановить его в состоянии, которое я сохраняю несколько раз.

Также важно (что я забыл вначале) после восстановления холста. Я хочу использовать Processingjs, чтобы нарисовать ontop восстанавливающего изображения, а затем я хочу, чтобы иметь возможность сделать это снова.

Благодарим за помощь.

Answer 1

Я попробовал большинство из того, что было предложено здесь, но почему-то ничего не работает.

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

Answer 2

Вы можете использовать ajax с веб-сервером, который сам хранит данные или файлы cookie для хранения данных в виде обычного текста. проверить это: http://www.w3schools.com/js/js_cookies.asp

Answer 3

Вы можете использовать

cvSave = canvas.toDataURL("image/png"); 
ctx.drawImage(cvSave,0,0); 

Я думаю, однако, вам не хватает что-то. Попробуйте

function function1(){ 
    var context = canvas.getContext('2d'); 
    cvSave = context.getImageData(0,0,viewport.width, viewport.height); 
} 

Answer 4

Эй попробовать это ..

var cvSave; //Global variable to save ImageData 

function function1(){ 
//some stuff wich involes putting an image into a canvas 
context.save(); 
// All the variables are existing and I use the context to put Stuff into the canvas which works fine 
} 

function isCalledLater(){ 
var canvas = document.getElementById('cv'); 
var ctx = canvas.getContext('2d');   //Get canvas and context 
ctx.restore(); //So this should restore the canvas to what I save earlier, right? 
ctx.save(); // this will save once again   
}