JavaScript で画像本来のサイズ(幅, 高さ)を取得する

画像や動画を lightbox 風に表示する拙作の jQuery 用プラグイン jQuery.lightpop.js ですが、画像の拡大表示で大きな問題がありました。
以下のようにサムネイル表示されている画像と、リンク先の画像が同一で、サムネイル表示している画像を width, height で小さく表示している場合、画像本来のサイズ(幅, 高さ)が取得できないため、正常に表示できないのです。

<a href="pict01.jpg" rel="lightbox" title="画像1"><img src="pict01.jpg" alt="画像1" width="160" height="120"></a>

困ったなぁと思いつつも、画像本来のサイズを取得する方法について調べずに放置していましたが、以下のエントリを読んで解決したので、久々に jQuery.lightpop.js をバージョンアップします。
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 – latest log

各主要ブラウザでの取得方法は、以下のとおり

  • Firefox, Safari, Chrome などのブラウザでは、image オブジェクトに naturalWidth, naturalHeight というプロパティから取得可能
  • IE では runtimeStyle を利用して取得可能
  • Opera では naturalWidth も runtimeStyle も無いので image オブジェクトから、width, height を removeAttribute すれば取得可能

と言うわけで、いかのようにして取得することにしました。

// get Image true size
var img_true_size = function(image){
	var	w = image.width ,
		h = image.height ;

	if ( typeof image.naturalWidth !== 'undefined' ) {	// for Firefox, Safari, Chrome
		w = image.naturalWidth;
		h = image.naturalHeight;

	} else if ( typeof image.runtimeStyle !== 'undefined' ) {	 // for IE
		var run = image.runtimeStyle;
		var mem = { w: run.width, h: run.height };	// keep runtimeStyle
		run.width  = "auto";
		run.height = "auto";
		w = image.width;
		h = image.height;
		run.width  = mem.w;
		run.height = mem.h;

	} else {		 // for Opera
		var mem = { w: image.width, h: image.height };	// keep original style
		image.removeAttribute("width");
		image.removeAttribute("height");
		w = image.width;
		h = image.height;
		image.width  = mem.w;
		image.height = mem.h;
	}

	return {width:w, height:h};
}

JavaScript で画像本来のサイズ(幅, 高さ)を取得する」への3件のフィードバック

  1. ピンバック: [お手軽実装]画像を表示する際に、一定以上の幅を超えた画像を縮小する。 | 岐阜20年目ノート

  2. ピンバック: noise

  3. ピンバック: ibushiの日記

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください