JavaScriptで画像本来の幅/高さを取得する方法

2022年9月11日日曜日

JavaScript

t f B! P L


img要素の naturalWidthnaturalHeight プロパティにアクセスすることで画像本来の幅/高さを取得することが可能。

HTML
<img id="test_id" src="test.png" width="100" height="50"/>

JavaScript
const imgElment = document.getElementById("test_id") ;

// img要素に設定された幅/高さを表示
alert("width=" + imgElment.width + ", height=" + imgElment.height);

imgElment.onload = function(ev) {
  // 画像本来の幅/高さを表示
  alert("naturalWidth=" + imgElment.naturalWidth + ", naturalHeight=" + imgElment.naturalHeight);
}

width、height ではimg要素に設定されたサイズ(上記例だと100と50)が、
naturalWidth、naturalHeight では実際の画像自身の幅/高さが取れる。

注意点として、naturalWidthとnaturalHeightは画像の読み込み完了前にアクセスすると正しい値が取得できない(0が返る)ということ。
そのためこれらのプロパティにアクセスする場合は、上記例のように onload イベントで画像の読み込み完了を待つ必要がある。

自己紹介

SESから工場へ転職 ⇒ その後SESへ出戻った底辺客先常駐エンジニアです。 主に組み込み、オープン系の現場で詳細設計~実装を担当しています。 使用言語:C/C++/C#/Java/JavaScript (Node.js)/Python etc..

QooQ