JavaScript: canvas に画像を読み込む

HTML5 Canvas API を使って、画像を読み込みます。

画像を読み込むには drawImage() メソッドを使用します。 drawImage() メソッドの構文は次の３通りあります。 

// 画像サイズはそのまま
drawImage(image, x, y)

// 幅、高さを指定
drawImage(image, x, y, width, height)

// 画像の一部を切り取って表示
drawImage(image, x1, y1, width1, height1, x2, y2, width2, height2)

３通りの方法についてそれぞれサンプルを見てみます。

サンプルコード: 画像サイズはそのまま

HTML・CSS


<canvas id="canvas"></canvas>

<style>
    canvas {
        border: 1px solid silver;
    }
</style>

JavaScript


var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');

// Image オブジェクトを生成
var img = new Image();
img.src = '../sample/img/bg_nangoku.jpg';

// 画像読み込み終了してから描画
img.onload = function(){
    c.drawImage(img, 10, 10);
}

canvas に画像を読み込むには、まず Image オブジェクトを生成します。 そして画像のURLを指定します。

// 画像読み込み終了してから描画
img.onload = function(){
    c.drawImage(img, 10, 10);
}

この部分が画像を読み込む時のポイントです。画像は非同期で読み込まれます。 ですから画像の読み込みが完了してから drawImage() メソッドを呼び出します。

// 構文: 画像サイズはそのまま
drawImage(image, x, y)

今回は最も単純な構文を使っています。(x, y)にそれぞれ(10, 10)と指定し、 サイズは画像サイズそのままに表示されます。

サンプルコード: 画像の幅、高さを指定

HTML・CSS は省略します。

JavaScript


var canvas = document.getElementById('canvas1');
var c1 = canvas.getContext('2d');

// Image オブジェクトを生成
var img1 = new Image();
img1.src = '../sample/img/bg_nangoku.jpg';

// 画像読み込み終了してから描画
img1.onload = function(){
    c1.drawImage(img1, 0, 0, 300, 150);
}
}

今回のサンプルは、画像の幅と高さを指定しています。 (x, y) を (0, 0)として、幅を 300、高さを 150に指定しています。

キャンパスのサイズに合わせたサイズ指定ですので、 結果的にキャンバスの枠一杯に表示されます。

// 構文: 幅、高さを指定
drawImage(image, x, y, width, height)

サンプルコード: 画像の一部を切り取って表示

HTML・CSS は省略します。

JavaScript


var canvas = document.getElementById('canvas2');
var c2 = canvas.getContext('2d');

// Image オブジェクトを生成
var img2 = new Image();
img2.src = '../sample/img/bg_nangoku.jpg';

// 画像読み込み終了してから描画
img2.onload = function(){
    c2.drawImage(img2, 10, 10, 50, 50, 20, 20, 100, 100);
}

今回のサンプルは画像の一部を切り取って、拡大表示しています。

// 構文: 画像の一部を切り取って表示
drawImage(image, x1, y1, width1, height1, x2, y2, width2, height2)

(x1, y1) が画像の切り出し開始位置。width1、height1 が切り出す幅と高さです。

(x2, y2) が切り出した画像の描画開始位置、width2、height2 が描画画像の幅と高さです。

サンプルでは、切り出し開始位置(10, 10)、幅 50、高さ 50 で切り出し、 描画開始位置(20, 20)、幅 100、高さ 100 で描画しています。

切り出したサイズの２倍のサイズで描画していますので、画像が少しぼやけて見えています。

この一部を切り出す方法は実用性の高い方法ですので、ぜひおさえておいてください。

JavaScript入門