web関連

【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座標, y座標)
    ctx.drawImage(img, 0, 0);
};
</script>

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

今回の例だと、画像自体のサイズが460×460で<canvas>のサイズが500×500だから40pxずつ隙間ができちゃう
なので画像サイズに合わせて<canvas>のサイズを調整するコードを足してみる

画像のサイズを取得して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ってのを使うとブラウザに表示されるサイズじゃなくて画像の元のサイズを知ることができるみたい
初めて知ったわ

ちなみに<canvas>って幅とか高さを指定しないと幅は300pxで高さは150pxになるみたい

メモ: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を挿入してるみたいね

canvasを使って画像を読み込むと基本px固定でレスポンシブに対応できないからjavascriptで都度コンテンツ幅の計算とかする必要性ありそうね CSSのpadding-topで比率を固定したまま扱うこともできるみたいだけどそこまでしてcanvasを使うメリットは感じられないなぁ

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

CAPTCHA