水曜以外もどうでしょう

北海道発。食べ歩きの記録グルメ情報や北海道の見どころなどをメモ替わりに書いています。

PREV | PAGE-SELECT | NEXT

≫ EDIT

JavaScriptで画像の本当のサイズを調べる

javascriptで画像本来のサイズ(幅と高さ)を調べたくなった。

web上の表示サイズではなく、サーバに置いてあるファイルそのもののサイズだ。

JQueryでスライドショー的に並べる時に、表示したいエリアから画像がはみ出るのを防ぎたくて、「実際のサイズが表示エリアより大きい場合には縮小表示する」なんて処理を入れたかったのだ。


以下のページが参考になった。

http://dogmap.jp/2009/06/17/javascript-image-natural-size-2/


メモも兼ねて、ほぼコード引用ですが、多少カスタマイズしたところもあるんで書きます。


function img_true_size_byelements(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;
    }
    var ret = new Array(2);
    ret[0] = w;
    ret[1] = h;
    return ret;
  }




非常に助かりました。

幅と高さを配列で返すようにしました。


imgに指定したidから検索したい場合は、下記のような感じですね。


    function img_true_size(id){
      image = document.getElementById(id);



スポンサーサイト
応援宜しくお願いします。ポチ↓↓
fC2ブログランキング にほんブログ村 グルメブログ 北海道食べ歩きへ 人気ブログランキングへ


| web系 | 02:14 | comments:0| trackbacks:0| TOP↑

COMMENT















非公開コメント

TRACKBACK URL

http://vmemo.blog36.fc2.com/tb.php/583-c489d72f

TRACKBACK

PREV | PAGE-SELECT | NEXT