【HTML5・javascript】canvasで画像を読み込む方法

canvasで画像を読み込んで色々しようと思ったけど、使い方わからなかったから調べた時の備忘録

画像をcanvasを使って読み込む方法

<canvas id="canvas" width="500" height="500"></canvas>

<script>
// キャンパスの要素を取得
var canvas = document.getElementById('canvas');
// 2次元の描画を行うメソッド
var ctx = canvas.getContext('2d');
// img要素を生成
var img = new Image();
// canvasタグで描画したい画像URL
img.src = "https://picsum.photos/seed/picsum/460/460";
// 画像の読み込みが終わってからcanvasに画像を描画
img.onload = () => {
    // drawImage(img要素, x座標, ｙ座標)
    ctx.drawImage(img, 0, 0);
};
</script>

<canvas>に画像を読み込む時って、onloadというイベントハンドラで画像が読み込み終わってから描画するようにしないと画像がうまく出力されないみたい
注意

画像のサイズを取得してcanvasに反映する方法

さっきのコードに画像のサイズを取得して<canvas>に幅高さを上書きするコード足してみた

<canvas id="canvas" width="500" height="500"></canvas>

<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = "https://picsum.photos/seed/picsum/460/460";
img.onload = () => {
    // 追加　ここから
    var width = img.naturalWidth;
    var height = img.naturalHeight;
    canvas.width = width;
    canvas.height = height;
    console.log('横は' + width + 'px');
    console.log('縦は' + height + 'px');
    // 追加　ここまで
    ctx.drawImage(img, 0, 0);
};
</script>

これで<canvas>に指定してある500pxは上書きされて画像のサイズ460×460に合わせてリサイズされる

naturalWidthってのを使うとブラウザに表示されるサイズじゃなくて画像の元のサイズを知ることができるみたい
初めて知ったわ

メモ：es6以降での書き方

最近、es6での書き方意識するようにしててfunction使わない方がいいって記事に書いてあったのでアロー関数ってのを使って書いてみた

// es6からの書き方
img.onload = () => {
    ctx.drawImage(img, 0, 0);
};
// es6以前の書き方
img.onload = function () {
    ctx.drawImage(img, 0, 0);
}

メモ：new Image()ってなんだ？

console.log(img);で中身を見たら<img>ってタグが出てきた
img.src = '画像URL'の後は<img src="画像URL">ってコンソールに出てくるから、スクリプト内でimg要素を作成してimg.srcで画像URLを挿入してるみたいね