使用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的web服務器一起使用，以便以純文本形式存儲數據。檢查了這一點：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   
}