web網(wǎng)頁(yè)按比例顯示圖片實(shí)現(xiàn)原理及js代碼

更新時(shí)間：2013年08月09日 10:52:21 作者：

由于上傳圖片的大小是未知的，在顯示成縮略圖的時(shí)候必須進(jìn)行按比例的縮放才能美觀地顯示，本文將為大家簡(jiǎn)單的介紹一種比較不錯(cuò)的方法，有此需求的朋友可以參考下

在動(dòng)態(tài)站點(diǎn)上經(jīng)常需要上傳自己的圖片，而這些圖片的大小是未知的，在顯示成縮略圖的時(shí)候必須進(jìn)行按比例的縮放才能美觀地顯示。以最近做的golf網(wǎng)站（http://www.changligolfsales.com）做例子。

該網(wǎng)站需要上傳高爾夫產(chǎn)品圖片，并以縮略圖顯示在列表上，站點(diǎn)服務(wù)器支持Asp，但不支持aspjpeg之類的生成縮略圖組件，所以將上傳的圖片直接顯示成縮略圖，就需要按比例縮放了，前提是要獲取圖片的長(zhǎng)寬，第一個(gè)想到的方法是在上傳的時(shí)候通過ADODB.STREAM對(duì)象讀取圖片的長(zhǎng)寬信息保存在數(shù)據(jù)庫(kù)并在頁(yè)面生成的時(shí)候讀取出來計(jì)算比例。這個(gè)方法明顯的缺點(diǎn)是顯示每張圖片都要在服務(wù)器讀取數(shù)據(jù)并計(jì)算，消耗資源多了也加上了頁(yè)面打開時(shí)延。
而第二個(gè)方法使用Javascript是將計(jì)算量轉(zhuǎn)移到了客戶端。

原理是在頁(yè)面載入完成后（onload觸發(fā)）在客戶端使用Javascript讀取每張圖片的大小并進(jìn)行縮放。

復(fù)制代碼代碼如下:

 
//將imageDest圖片的大小按比例縮放,適合顯示在寬W和高H的區(qū)域內(nèi) 
function ResizeImage(imageDest, W, H) 
{ 
//顯示框?qū)挾萕,高度H 
var image = new Image(); 
image.src = imageDest.src; 
if(image.width>0 && image.height>0) 
{ 
//比較縱橫比 
if(image.width/image.height >= W/H)//相對(duì)顯示框：寬>高 
{ 
if(image.width > W) //寬度大于顯示框?qū)挾萕，應(yīng)壓縮高度 
{ 
imageDest.width = W; 
imageDest.height = (image.height*W)/image.width; 
} 
else //寬度少于或等于顯示框?qū)挾萕，圖片完全顯示 
{ 
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; 
} 
} 
} 
} 

以上函數(shù)對(duì)圖片進(jìn)行縮放。
golf網(wǎng)站的每張縮略圖的id都設(shè)為imgProductItem，如：<img src="<%= imgPath %>" name="imgProductItem" width="150" height="113" border="0" id="imgProductItem" />，里面的150x113就是顯示框的最大尺寸，因?yàn)樘幚砗瘮?shù)必須在onload完成時(shí)運(yùn)行，所以這里必須設(shè)置一定的大小，要不整個(gè)頁(yè)面在載入圖片過程中出現(xiàn)排版錯(cuò)亂，到運(yùn)行了RsizeAllImageById才恢復(fù)正常。
添加一個(gè)批量操作的函數(shù)：

復(fù)制代碼代碼如下:

 
//將頁(yè)面內(nèi)所有指定id的圖片按比例縮放 
function RsizeAllImageById(id, W, H) 
{ 
var imgs = document.getElementsByTagName("img"); 
for(var i=0; i<imgs.length; i++) 
{ 
if(imgs[i].id == id) 
{ 
ResizeImage(imgs[i], W, H); 
} 
} 
} 

這樣在頁(yè)面的body添加

復(fù)制代碼代碼如下:

 
<body onload="javascript:init();">；在head區(qū)添加： 

<mce:script language="javascript"><!-- 
function init() 
{ 
RsizeAllImageById("imgProductItem", 150, 113); 
} 
// --></mce:script> 

就可以將所有圖片顯示成縮略圖了。

您可能感興趣的文章: