画布保存和恢复

Question

我目前正在做一个应用程序，允许用户做一些幻灯片。我正在使用fabricjs使它们在当前幻灯片上添加文字&。但我希望他们能够添加新的幻灯片。

所以我需要一种方法来保存和存储当前幻灯片（画布），当他们击中“新幻灯片”按钮。
另一件事是用户被允许通过从列中选择它们来编辑以前的画布。

我相对较新的html5 & fabricjs所以我真的不知道该怎么做。我尝试过使用克隆函数，但实际上并没有工作，所以前一个画布的drawImage也是如此。

任何想法，可以帮助我开始呢？

我也一直在想如何存储创建的画布，我想知道数组列表是否是一个好的方法。

感谢您的帮助

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