JavaScript: canvas に画像を読み込む

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

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

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

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

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

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

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

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 で描画しています。

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

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