使用Javascript存储和恢复画布

我想使用JavaScript存储（以某种方式记住）画布元素的当前状态（所示的图像），然后在以后还原它

var-cvSave//保存ImageData的全局变量
函数function1（）{
//有些东西需要把图像放到画布上
cvSave=context.getImageData（0,0，viewport.width，viewport.height）；
//所有变量都存在，我使用上下文将内容放入画布中，效果很好
}
函数被称为{
var canvas=document.getElementById（'cv'）；
var ctx=canvas.getContext（'2d'）；//获取画布和上下文
putImageData（cvSave，0,0）；//这应该会将画布恢复到我之前保存的状态，对吗？
}

但是，当调用第二个函数时，它只会将画布变白，而不会将其恢复到我认为在cvSave中保存的状态

我希望这是客户端，我想把它恢复到我多次保存的状态

同样重要的是（我一开始忘记了这一点），在恢复画布后，我想使用Processingjs绘制恢复图像的顶部，然后我想能够再次这样做

---

感谢您的帮助。

您可以将ajax与web服务器结合使用，该服务器本身存储数据，或者使用Cookie将数据存储为纯文本。查看此链接：

您可以使用

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);
}

嘿，试试这个

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           
}

---

我尝试了这里建议的大部分内容，但由于某种原因，没有任何效果

---

最后，我创建了一个状态，通过将相应的图像绘制到另一个画布中，并在需要时从那里获取图像，我始终希望恢复并保存该状态。

您是否忘记定义一个全局变量，该变量用于function1命名的上下文？考虑过这一点，但我希望保留它客户端。查看链接，这是客户端。您只需给cookie一个名称，cookie就会保存在客户端浏览器上，稍后您就可以读取该cookie了。如果您的数据不是纯文本，那么surley可以将其编码/解码为Base64。如果尝试此操作，它将不起作用。是否有其他方法将内容设置到画布，以便我可以使用toDataURL（）？我尝试了这个方法。我发现了一些奇怪的错误。由于某些原因，无法正确还原画布。请尝试不使用函数isCalledLater（）中的ctx.save（）。因为restore方法的工作是返回以前保存的路径状态和属性，所以它应该可以工作。。。