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

19件の返信
clip!

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

<a href="pict01.jpg" rel="lightbox" title="画像１"><img src="pict01.jpg" alt="画像１" 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};
}
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
このエントリーをはてなブックマークに追加

“JavaScript で画像本来のサイズ(幅, 高さ)を取得する” への19件のコメント

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

  8. ピンバック: noise Japan WordPress

  12. kazato delicious

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

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

  18. ピンバック: ibushiの日記 Japan Hatena Diary

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>