JavaScriptによる画像縮小

目次

概要 †

HTML表示段階で画像のリサイズを行うJavaScript。
IMGタグにname属性を設定し、HTML読み込みの最後にname属性を取得してリサイズを行う。
このため、縮小を行いたくない画像にはname属性を付けない（もしくは、img-resize以外のname属性を付ける）ことで縮小処理の対象外とすることができる。

HTML部（IMGタグ） †

• 縮小する場合
  

  <IMG src="hogehoge.jpg" name="img-resize">

• 縮小しない場合
  

  <IMG src="hogehoge.jpg">

JavaScript部 †

• サイズの指定
  「var maxWidth」に横幅を指定する
  

• name属性の指定
  「document.getElementsByName」のパラメータで指定する
  

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