[JavaScript] 画像のオリジナル サイズを取得する 最もシンプルな方法 new

JavaScript で画像のオリジナル サイズ
(表示サイズではなく本来の幅と高さ)を取得する方法です。
しかも、シンプルに。


取得方法とサンプルコード

var img = new Image();
img.src = 'http://image.src.com/image.jpg';

var width  = img.width;  // 幅
var height = img.height; // 高さ

理屈は簡単で、

  • 新しい Image オブジェクトを作成
  • その src にオリジナル サイズを取得したい画像を指定
  • その Image オブジェクトから幅と高さを取得

src しか指定していない Image ですから、当然、オリジナルのサイズが取得できるはず!

注意点

読み込み済みのページに表示されている画像について、
img タグの height 属性や width 属性を無視してオリジナル サイズを取得する想定です。

目的の画像が読み込まれる前だと正しい値が取得できないかも知れません。
タイミングには注意が必要かも、です。

読み込み済みの画像を新しい Image オブジェクトの src に指定した場合、普通に考えるとキャッシュを使ってくれるはずです... そこはブラウザの実装を信じます。ユーザー側でキャッシュを無効にしていた場合、問題となるかも知れません。

尚、Image オブジェクトの width と height をサポートしていないブラウザ(無いと思いますが)では うまくいきません。
すいません、IE8, IE9Firefox12 でしか試していません。


jQuery を使ったサンプルコード

html ページ内の img タグからそのオリジナル サイズの img タグを作成する jQuery コードです。

$(document).ready(function(){
	var $i = $('#img'); // 対象の img タグを選択
	var img = new Image();
	img.src = $i.attr('src');
	
	var $rawimg = $('<img>').attr({
		src: img.src,
		alt: $i.attr('alt'),
		height: img.height,
		width: img.width
	});
	
	$('body').append($rawimg); //ページにオリジナル サイズの画像を挿入
});

クロス ブラウザという呪縛

画像の元のサイズを取得したい、と思って調べ始めたのですが
その当初、こんな簡単なことにもクロス ブラウザの呪縛があって愕然としました。

Firefox や Safari、Google Chrome には、image.naturalWidth と image.naturalHeight という元のサイズが格納されているプロパティがあるそうです。
これが呪縛に囚われてしまう大きなトラップ

当然のように IE にはそのプロパティはありません。じゃあ IE だけ別の方法を...
と考え始めると、クロス ブラウザ対応という泥沼へ踏み込みそうになります。

ご紹介したようなシンプルな方法で すべてをカバーできるなら、それがベストではないでしょうか!

なんて偉そうに書いていますが、
この方法でうまくいかないブラウザがあったらごめんなさい(・ε・)
この記事をツイツイする tweetSearch

Commentあなたのコメントをぜひ書き残してください!

新しいコメント

※設定しておくとあとからコメントを編集できます
管理者にだけ表示を許可する
※公開されません

Trackback あなたのウェブページをリンク!

Trackback URL
画像が縦長か横長か調べて自動でクラス名をつけるJavaScript
画像が横長なのか、縦長なのか、正方形なのかで分けて、それぞれクラス名をつけるJavaScriptを書いてみました。よく読んでもらっているページに「絶対はみ出さない画像!自動でサイズ調節するスタイルシート」というのがあるんですが、これに関連したことで「スマホで見ても、すべての画像が横幅いっぱいになって、はみ出さなくなったんですが、縦長の写真だけサイズを変えられないか」という質問を受けました。 ... [続きを読む]
Big Bang 2014/10/01/Wed 14:24

© こじょらぼ all rights reserved.

旧 すぐへこたれるこじょblog

Guild Wars 2 © 2010-2014 ArenaNet, LLC. and NC Interactive, LLC. All rights reserved. Guild Wars, Guild Wars 2, ArenaNet, NCSOFT, the Interlocking NC Logo, and all associated logos and designs are trademarks or registered trademarks of NCSOFT Corporation. All other trademarks are the property of their respective owners.

Back to Top