html5：キャンバスをイメージにコピーして戻す

Question

キャンバス要素にズームイン/アウト機能を実装しました。 キャンバスを拡大縮小してキャンバスを拡大してから、シーン全体を再描画します。 問題は、キャンバス上にたくさんのものがあるので、すべてを再描画するのに時間がかかることです。

イメージオブジェクトにキャンバスをコピーし、イメージをキャンバスにコピーして品質を落とさずにコピーする方法が必要です。キャンバスをjavascript変数にコピーし、この変数を後でキャンバスにコピーする特定のメソッドは何ですか？

私はインターネット上で良い説明を見つけることができなかったので、コードを書き留めるとうれしいです。

おかげで、

Answer 1

のdrawImage（）メソッドは、別のキャンバスの代わりに画像を使用して、キャンバスに描画することができます。

元のサイズと同じサイズの「バックアップ」キャンバスを作成し、そこに最初のものを描画し、必要に応じてオリジナルのものに戻します。

// Assume we have a main canvas 
// canvas = <main canvas> 
ctx = canvas.getContext('2d'); 
.. 

// create backing canvas 
var backCanvas = document.createElement('canvas'); 
backCanvas.width = canvas.width; 
backCanvas.height = canvas.height; 
var backCtx = backCanvas.getContext('2d'); 

// save main canvas contents 
backCtx.drawImage(canvas, 0,0); 

.. 

// restore main canvas 
ctx.drawImage(backCanvas, 0,0); 

Answer 2

それを行うには、いくつかの方法があります。しかしputImageDataとgetImageDataはかなり遅く、getImageDataとputImageData方法Referenceをtheresの。もう1つの方法は、データをimageのメモリに保存し、それをはるかに速く呼び出すことです。そして、3番目の方法は、andrewmuで言及されている別のキャンバス要素にコピーすることです。私は第一と第二のタイプの例を挙げました。

Image in memory method

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"), 
    savedData = new Image(); 

function save(){ 
    // get the data 
    savedData.src = canvas.toDataURL("image/png"); 
} 

function restore(){ 
    // restore the old canvas 
    ctx.drawImage(savedData,0,0) 
} 

getImageData putImageData method

// Setup our vars, make a new image to store the canvas data 
var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"), 
    canvasData = ''; 

function save(){ 
    // get the data 
    canvasData = ctx.getImageData(0, 0, 100, 100); 
} 

function restore(){ 
    // restore the old canvas 
    ctx.putImageData(canvasData, 0, 0); 
} 

Answer 3

キャンバスに

var image = new Image(); 
image.src = "1.jpg"; 
image.onload = function() { 
context.drawImage(image, 0, 0); 
};