用 JavaScript 讓圖片自動縮放大小

用 JavaScript 讓圖片自動縮放大小(三)

下圖原始圖檔 pic01.jpg 尺寸為 600 X 450
使用 JavaScript 程式後，便可將此圖檔依據你的需要自動縮放此圖片尺寸。
本例我設寬度為 300 Pixel，高度自動變更為 225 Pixel。
你也可以在此圖檔上使用滑鼠右鍵，選擇內容，查看你伸縮過的尺寸。
優點：輕鬆達到自動縮放圖片，符合自己所要的尺寸。

使用 JavaScript 程式如下：

<HEAD>
<script language="JavaScript" type="text/javascript">
<!--
 var flag=false;     
  function  DrawImage(ImgD){     
    var   image=new   Image();     
    var   iwidth   =   300;
    var   iheight   =   225;
    image.src=ImgD.src;     
    if(image.width>0   &&   image.height>0){     
    flag=true;     
    if(image.width/image.height>=   iwidth/iheight){     
      if(image.width>iwidth){         
      ImgD.width=iwidth;     
      ImgD.height=(image.height*iwidth)/image.width;     
      }else{     
      ImgD.width=image.width;         
      ImgD.height=image.height;     
      }     
      ImgD.alt=image.width+"×"+image.height;     
      }     
    else{     
      if(image.height>iheight){         
      ImgD.height=iheight;     
      ImgD.width=(image.width*iheight)/image.height;         
      }else{     
      ImgD.width=image.width;         
      ImgD.height=image.height;     
      }     
      ImgD.alt=image.width+"×"+image.height;     
      }     
    }
  }
//-->
</script>
</HEAD>
<BODY>

<img src="pics/pic01.jpg" border=0 onload="DrawImage(this);" alt="這是自動縮放後的圖片效果">

本報導資料來源：Firnow

請按瀏覽器的檢視原始碼查看