javascriptで画像を自動的に縮小させてみる

ユーザーに自由に画像アップロードさせるサービスを作る際、必ず必要になってくるもの。そう「画像縮小」です。最近のデジカメはかなり進歩していて、横幅が数千ピクセルの写真を簡単に撮る事ができます。そういった大きい画像は通常、サーバーサイドのプログラムで自動的に縮小し、サムネイルを作ったりしますが、プログラム言語によっては非常に難しかったりします。

そこで、javascriptで簡単に画像縮小（表示）させる方法をご紹介。
まずはソースをご覧ください。

<script type="text/javascript">
//<![CDATA[
var maxWidth = 500;
window.onload = function(){
  var elements = document.getElementsByTagName("img");
  for(i=0;i<elements.length;i++){
    if(elements[i].width > maxWidth){
      elements[i].width = maxWidth;
    }
  }
}
//]]>
</script>

しくみは簡単です。
ウインドウを読み込み終わった直後に、すべてのimgタグを取得し、ループしながら横幅を比較し、指定された幅より大きいものは、MAXの幅を指定して縮小します。
実際は画像を加工しているわけではないので、画像容量は変わりませんが、画面表示崩れの防止は可能です。
また、すべてのimgタグを取得するのではなく、ある範囲のimgタグを取得するというのも、ちょっと工夫すればできそうですね。