web網頁按比例顯示圖片實作原理及js程式碼_javascript技巧

在動態網站上經常需要上傳自己的圖片，而這些圖片的大小是未知的，在顯示成縮圖的時候必須進行按比例的縮放才能美觀地顯示。以最近做的golf網站（http://www.changligolfsales.com）做範例。

網站需要上傳高爾夫產品圖片，並以縮圖顯示在列表上，網站伺服器支援Asp，但不支援aspjpeg之類的生成縮圖組件，所以將上傳的圖片直接顯示成縮圖，就需要按比例縮放了，前提是要獲取圖片的長寬，第一個想到的方法是在上傳的時候通過ADODB.STREAM對象讀取圖片的長寬信息保存在數據庫並在頁面生成的時候讀取出來計算比例。這個方法明顯的缺點是顯示每張圖片都要在伺服器讀取資料併計算，消耗資源多了也加上了頁面開啟時延。
而第二個方法使用Javascript是將計算量轉移到了客戶端。

原理是在頁面載入完成後（onload觸發）在客戶端使用Javascript讀取每張圖片的大小並進行縮放。

複製程式碼 程式碼如下:

///將大小縮放,適合按比例縮放顯示在寬W和高H的區域內
function ResizeImage(imageDest, W, H)
{
//顯示框寬度W,高度H
var image = new Image();
image.src = imageDest.src;
if(image.width>0 && image.height>0)
{
//比較縱橫比
if(image.width/image. height >= W/H)//相對顯示框：寬>高
{
if(image.width > W) //寬度大於顯示框寬度W，應壓縮高度
{
imageDest.width = W;
imageDest.height = (image.height*W)/image.width;
}
else //寬度少於或等於顯示框寬度W，圖片完全顯示
{
imageDest.width = image.width;
imageDest.height = image.height;
}
}
else//同理
{
if(image .height > H)
{
imageDest.height = H;
imageDest.width = (image.width*H)/image.height;
}
else
{
imageDest.width = image.width;
imageDest.height = image.height;
}
}
}
}

}
}
}

}

} } golf網站的每張縮圖的id都設為imgProductItem，如：，裡面的150x113就是顯示框的最大尺寸，因為處理函數必須在onload完成時運行，所以這裡必須設定一定的大小，要不整個頁面在載入圖片過程中出現排版錯亂，到運行了RsizeAllImageById才恢復正常。 新增一個批次運算的函數：

複製程式碼


程式碼如下:



程式碼如下:


/🎜>/🎜>

/🎜>將頁面內所有指定id的圖片按比例縮放

function RsizeAllImageById(id, W, H)
{
var imgs = document.getElementsByTagName("img");

for(var i= 0; i{ if(imgs[i].id == id) { ResizeImage(imgs[i], W, H); } }

}

這樣在頁面的body添加




複製代碼

程式碼如下:
；在head區新增： 就可以將所有圖片顯示成縮圖了。