3

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?
}

しかし、2 番目の関数が呼び出されると、キャンバスが白くなるだけで、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 に答える
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 に答える
0

データまたは Cookie を格納する Web サーバーで ajax を使用して、データをプレーン テキストとして格納できます。これをチェックしてください：http://www.w3schools.com/js/js_cookies.asp

于 2013-03-11T12:15:18.910 に答える