캔버스 저장 및 복원

Question

현재 사용자가 슬라이드 쇼를 만들 수있는 앱을 만들고 있습니다. fabricjs를 사용하여 현재 슬라이드에 텍스트 &을 추가합니다. 그러나 나는 그들에게 새로운 슬라이드를 추가 할 수 있기를 바랍니다.

그래서 "새로운 슬라이드"버튼을 눌렀을 때 현재 슬라이드 (캔버스)를 저장하고 저장하는 방법이 필요합니다.
다른 것은 사용자가 이전 캔버스를 열에서 선택하여 편집 할 수 있다는 것입니다.

나는 html5 & fabricjs에 비교적 새로운 편이어서 그렇게하는 방법을 모른다. 나는 clone 함수를 사용해 보았지만 didnt은 실제로 작동하지만 이전 캔버스의 drawImage도 마찬가지입니다.

이 문제를 시작하는 데 도움이되는 의견이 있으십니까?

저는 캔버스를 저장하는 방법에 대해서도 생각해 봤는데 arraylists가 좋은 방법인지 궁금합니다. 당신의 도움이

TL에 대한

감사합니다; 박사 : 나는 분명 그것을 캔버스을 저장하고 나중에 복원 할 수 있도록합니다.

Answer 1

캔버스 직렬화를 사용하여 캔버스를 JSON에 저장하고 나중에 캔버스를 복원 할 수 있습니다. 자세한 자습서는 this fabricjs article이 좋습니다.

Answer 2

ctx.fillStyle= 'red' 
// draw a rectangle with default settings 
    ctx.fillRect(0,0,150,150); 
    // Save the default state 
    ctx.save(); 



ctx.fillStyle = '#66FFFF'  
    ctx.fillRect(15,15,120,120); 
    // Save the current state 
    // ctx.save(); 


// Restore previous state 
    ctx.restore(); 
    ctx.fillRect(45,45,60,60); 

http://www.tutorialspoint.com/html5/canvas_states.htm