Question

我想使用JavaScript来存储（以某种方式记住）canvas元素的当前状态（显示的图像），然后再恢复它。

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来绘制恢复图像的ontop，然后我希望能够再次执行此操作，这也很重要（我最初忘记了）。

感谢您的帮助。

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

使用Javascript存储和恢复画布

4 个答案: