写真の拡大・縮小

１．はじめに

　最近、モニターサイズの種類が非常に多くなってきている。
私も最近、１７インチ(1024x768ピクセル)から１９インチ(1280x1024ピクセル)に交換しました。
そうすると、今まで大きく表示されていた写真(800x533ピクセル)が、当然小さく表示されるようになってしまいました。
　また、小さなサイズのモニターで見られている方は当然はみ出してしまいます
図は2006年1月1日～27日までの間、私のホームページに来られた方のモニターサイズのデータです。明らかにモニターサイズは大きな方向に移行しています

そこで、モニターサイズに応じて写真を「拡大・縮小」する方法を検討してみました

２．拡大・縮小とサンプル

■　表示サンプル

まず、サンプルをご覧下さい。表示サンプルはモニターの全画面で表示します
カーソルキーの　[↑↓]　で拡大・縮小します
なお、Internet Explorer　の場合はマウスホイールの回転で拡大・縮小が可能です

■　基本的な考え方

//-- 写真を一旦原寸で表示します

                  document.myPhoto.src = f_name

                  

                  //-- モニターの表示サイズに対する写真サイズの大小を判断します

                  

                  //-- 横サイズ

                  var w_malti = disp_width / f_width

                  if(w_malti>1){w_malti = 1}

                  

                  //-- 縦サイズ

                  var h_malti = disp_height/f_height

                  if(h_malti>1){h_malti = 1}

                  

                  //-- 高さ基準で計算

                  var photo_h = Math.round(f_height * h_malti* malti)

                  var photo_w = Math.round(photo_h * f_whr)

                  

                  //-- 横サイズが表示範囲より大きな場合

                  if(photo_w > disp_width){

                  photo_w = Math.round(f_width * w_malti* malti)

                  photo_h = Math.round(photo_w / f_whr)

                  }

                  

                  //-- 写真表示 指定サイズで再描画します

                  document.myPhoto.height = photo_h

                  document.myPhoto.width = photo_w

変数の説明
　myPhoto <IMG src="123.jpg" name="myPhoto"> と設定します
　disp_width　　モニター上で表示する大きさ
　disp_height　　　　　　〃
　malti　　　　　拡大・縮小の係数　通常は　malti = 1 です
　f_name、f_width、f_height、f_whr　　写真のファイル名、横、縦、縦横比　です

具体的にはサンプルのソースをご覧下さい。

下記のサンプルは実際の写真ページに適用した場合です
■　サンプル２　　　写真サイズを統一した場合
■　サンプル３　　　様々なサイズの写真が含まれる場合

３．キーコードの取得

キーで実行（ここでは写真の拡大・縮小）するためには、キーコードの取得が必要です
任意のキーを押してキーコードを確認してください
Key Code =

詳しくは キーコードの取得 でご覧ください

４．終わりに

如何でしょうか、
現在写真表示の各ページにこの方法を適用しています
しかし、写真のサイズを拡大していくと、当然画質は劣化してきます
したがって原寸のサイズをどのように設定するかが重要だと思います

2007/06/22　アルゴリズム修正