jsで画像本来のサイズを取得する方法

画像本来のサイズを取得する必要があったので試してみました。
自分の覚え書きの意味も込めて。

jQueryで「$(img).width();」としても表示サイズしか取得出来ず、「display:none;」していると値が0になったりする。ちゃんと取得しようとすると、各ブラウザ毎に仕様が違うらしく非常に手間がかかるので、もっと簡単に出来ないか無いを知恵絞って考えてみました。


例）画像本来のサイズを取得し幅が500px以上あるなら500pxにリサイズ

■html
<img src="sample.jpg" class="resize">


■js
$(window).bind('load', function(){
	var resize = 500;
	$('.resize').each(function(){
		var img = new Image();
		var imgSrc = $(this).attr('src');
		img.src = imgSrc;

		if(img.width < resize){
			return;
		}
		$(this).width(resize);
	}
});

「new Image();」で新しいイメージを作りそこに要素をコピーすると、画像本来の情報を取り扱えるらしい。これなら「display:none;」してても、本来とは違うサイズで表示されてても関係ないし、IE,chrome,safari,Firefoxなどのブラウザにも差は無かった。