자바 스크립트를 사용하여 캔버스 저장 및 복원

Question

자바 스크립트를 사용하여 캔버스 요소의 현재 상태 (이미지가 표시하는 이미지)를 저장하고 나중에 복원합니다.

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에 저장된 생각에 복원하지 않습니다.

나는 이것을 클라이언트 측에두고 싶고 여러 번 저장하는 상태로 복원하고 싶습니다.

캔버스를 복원 한 후에도 중요합니다 (나는 처음에 잊었습니다.) 복원 이미지의 ontop을 그리기 위해 Processingjs를 사용하고 싶습니다. 그런 다음 다시이 작업을 수행 할 수 있기를 원합니다.

도움 주셔서 감사합니다.

Answer 1

시도하지만 어떤 이유로 아무것도 일하고보십시오.

마지막으로 필자는 항상 한 상태를 유지하기 위해 필자는 필요할 때마다 해당 이미지를 다른 캔버스에 그려서 가져 와서 그 상태를 복원하고 저장하려고했습니다.

Answer 2

웹 서버에 ajax를 사용하여 자체적으로 데이터 또는 쿠키를 저장하여 데이터를 일반 텍스트로 저장할 수 있습니다. 이 체크 아웃 : 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   
}