web-dev-qa-db-ja.com

html5：キャンバスを画像にコピーして戻します

Canvas要素にズームインとズームアウトの機能を実装しました。キャンバスをスケーリングし、移動して、シーン全体をもう一度再描画することで機能します。問題は、キャンバスにたくさんのものを置いたので、すべてを再描画するのに時間がかかるということです。

キャンバスを画像オブジェクトにコピーし、品質を失うことなく画像をキャンバスにコピーする方法が必要です。キャンバスをJavaScript変数にコピーし、この変数を後でキャンバスにコピーするための具体的な方法は何ですか？

インターネットで良い説明が見つからなかったので、コードを書いてもらえたら嬉しいです。

ありがとう

imagehtmlcanvas
20
Amit Hagin

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);
27
andrewmu

getImageDataとputImageDataメソッド 参照 を使用して行うにはいくつかの方法がありますが、putImageDataとgetImageDataはかなり遅いです。もう1つの方法は、メモリのimageにデータを保存し、それをはるかに高速なものから呼び出すことです。次に、3つ目の方法は、andrewmuが前述した別のキャンバス要素にコピーする方法です。 1番目と2番目のタイプの例を含めました。

イメージインメモリ方式

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

画像をキャンバスに追加

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