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, IE9 と Firefox12 でしか試していません。
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 だけ別の方法を...
と考え始めると、クロス ブラウザ対応という泥沼へ踏み込みそうになります。
ご紹介したようなシンプルな方法で すべてをカバーできるなら、それがベストではないでしょうか!
この方法でうまくいかないブラウザがあったらごめんなさい(・ε・)

jQuery/JavaScript同カテゴリの前後記事
Commentあなたのコメントをぜひ書き残してください!
Trackback あなたのウェブページをリンク!
Trackback URL |