2011年7月9日土曜日

画像読み込み完了時に画面幅によって画像をリサイズする

作成した画像を、スマートフォンのブラウザで見るときに、画面幅にあわせてリサイズさせてみた。

ブラウザの画面幅を取得するコードは以下のページを参考にした。
参考：ブラウザの画面サイズの取得(javascript) - Object Design Blog

画像の読み込み完了前に拡大縮小率を計算しないように、img の load 完了イベント時に、画像の幅を取得するのがポイント。以下、コードの一部抜粋。

<head>

<script type="text/javascript">
var imgW = 0;
var imgH = 0;
var paneW = 0;
var scale = 100;

//ブラウザ幅に合わせて拡大縮小率を算出する
//マージンは20px
function calcScale(){
  var paneW_alt = paneW - 20;
  if(imgW > paneW_alt){
    scale= ((paneW_alt/imgW)*100).toFixed(0);
  }else{
    scale = 100;
  }
}

function getBrowserWidth() {  
    if(window.innerWidth) {
        return window.innerWidth; 
    } 
    else if(document.documentElement && document.documentElement.clientWidth != 0){
        return document.documentElement.clientWidth;
    }
    else if(document.body){
        return document.body.clientWidth;
    }
    return 0;
}

</script>

</head>

<body marginheight="0" marginwidth="0">


(中略)


<script type="text/javascript"><!--
var img = document.getElementById("dlImg");

//画像のload完了時に画像の幅と高さを取得する
img.addEventListener('load', getImageSize, false);
function getImageSize(){
    imgW = img.width;
    imgH = img.height;
}

//画像の幅と高さを取得した上で画像をリサイズする
img.addEventListener('load', resize, false);

//端末が回転された際もブラウザ幅に合わせて再度リサイズする
window.addEventListener('orientationchange', resize, false);

function resize(){
    paneW = getBrowserWidth();
    calcScale();
    if(imgW > 0 && imgH > 0){
      img.width=(imgW * (scale/100)).toFixed(0);
      img.height=(imgH * (scale/100)).toFixed(0);
    }
}
//--></script>

</body>
時刻:

0 件のコメント:

コメントを投稿