image - キャンバス内にタグの内容を表示するには?

Question

ページには<img>タグとキャンバス要素があります。中の画像<img>はトリミングされており、ルーペを使用して操作されています。画像のトリミングされたコンテンツをキャンバス内に表示するにはどうすればよいですか。

Answer 1

の ID を持つ<img>タグがあるとしますimage。メソッドを使用して画像参照を取得できますgetElementById。次のようなもの：

var img = document.getElementById("image");

次に、HTML5drawImageメソッドを使用して、イメージ コンテンツをキャンバスに描画できます。コードは次のようになります。

var canvas = document.getElementById('canvas') // reference to canvas element
var ctx = canvas.getContext('2d'); // get the canvas context;
ctx.drawImage(img, 0, 0); //draw image into canvas;

Answer 2

イメージが最初にロードされるまで待機する、これを使用したほうがよいでしょう (easimov による元の回答よりも)。画像が読み込まれていない場合、キャンバスに描画されません。img がイメージタグであると想定しています。

var canvas = document.getElementById('canvas') // reference to canvas element
var ctx = canvas.getContext('2d'); // get the canvas context;

img.onload = function ()
{
    ctx.drawImage(img, 0, 0); //draw image into canvas;
}