JavaScriptで画像の本来の幅と高さを取得する

img要素のwidthプロパティとheightプロパティを参照すれば、画像の幅と高さを取得することができます。しかし、ここで取得できる値はHTMLの<img>タグ中のwidthとheightで指定した数値であり、画像の本来の幅と高さではありません（widthとheightが指定されていない場合は自動的に画像本来のサイズになりますが）。では、画像の本来の幅と高さを知りたい場合はどうするか。

FirefoxやSafariの場合、imgオブジェクトにはnaturalWidthとnaturalHeightというプロパティが設定されていて、これを参照すれば画像のもともとのサイズが取得できるようです（Fx3.0.3、Safari3.1.2で確認）。

<!-- 幅100px、高さ80pxの「foo.jpg」という画像を幅50px、高さ40pxのサイズ指定で表示 -->
<img id="img1" src="foo.jpg" width="50" height="40" />

<script type="text/javascript">
Event.observe(window, 'load', function() {
    var img1 = $('img1');
    alert(img1.width + '*' + img1.height);  // 50*40（HTML中で指定したサイズ）
    alert(img1.naturalWidth + '*' + img1.naturalHeight);  // 100*80（本来のサイズ）
</script>

ブラウザによって画像の読み込みが完了するタイミングはまちまちのようなので、上記のようにloadが完了してからプロパティを参照するようにしたほうが無難です（参考：Safariでは画像のloadが終わっていないとwidth、heightがうまく取得できない at HouseTect, JavaScriptな情報をあなたに）。

ただしこのプロパティはIEでは使えないので、IEの場合は新しいImageオブジェクトを生成してそのオブジェクトのプロパティから幅と高さを取得します。

var newImg = new Image();
newImg.src = 'foo.jpg';
Event.observe(newImg, 'load', function() {
    alert(newImg.width + '*' + newImg.height);  // 100*80
});

この場合も、やはりロードを待ってからプロパティを見に行くようにしたほうが安全です。

10/21追記：

これを使って簡単に画像サイズの指定をチェックするGreasemonkeyスクリプトを作ってみました。こちらもどうぞ。⇒画像のサイズ指定違いを可視化するGreasemonkeyスクリプト - inamenaiの日記

Permalink | コメント(0) | トラックバック(0)