3

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

谢谢你的帮忙。

4

4 回答 4

4

嘿试试这个..

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           
}
于 2013-03-11T12:27:38.400 回答
1

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

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

于 2013-09-01T16:20:32.500 回答
0

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

于 2013-03-11T12:15:18.910 回答
0

你可以使用

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);
}
于 2013-03-11T12:17:50.677 回答