使用 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 在恢复图像上绘制，然后我希望能够再次执行此操作。

感谢您的帮助。

Answer 1

嘿试试这个..

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           
}

Answer 2

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

最后我做到了，这样我就有了一个状态，我总是想恢复并保存该状态，方法是将相应的图像绘制到另一个画布中，并在需要时从那里获取它。

Answer 3

您可以将 ajax 与 Web 服务器一起使用，该服务器本身存储数据或 cookie 以将数据存储为纯文本。看看这个：http://www.w3schools.com/js/js_cookies.asp

Answer 4

你可以使用

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