原文鏈接：http://blog.csdn.net/liqinghuiyx/article/details/5442349

在動(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之類的生成縮略圖組件，所以將上傳的圖片直接顯示成縮略圖，就需要按比例縮放了，前提是要獲取圖片的長寬，第一個(gè)想到的方法是在上傳的時(shí)候通過ADODB.STREAM對象讀取圖片的長寬信息保存在數(shù)據(jù)庫并在頁面生成的時(shí)候讀取出來計(jì)算比例。這個(gè)方法明顯的缺點(diǎn)是顯示每張圖片都要在服務(wù)器讀取數(shù)據(jù)并計(jì)算，消耗資源多了也加上了頁面打開時(shí)延。

而第二個(gè)方法使用Javascript是將計(jì)算量轉(zhuǎn)移到了客戶端。

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

[javascript] view plaincopy

//將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)//相對顯示框：寬>高??

????{??

?????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ù)對圖片進(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è)頁面在載入圖片過程中出現(xiàn)排版錯(cuò)亂，到運(yùn)行了RsizeAllImageById才恢復(fù)正常。

添加一個(gè)批量操作的函數(shù)：

[javascript] view plaincopy

//將頁面內(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);??

???}??

}??

}??

這樣在頁面的body添加

[javascript] view plaincopy

<body???οnlοad="javascript:init();">；在head區(qū)添加：??

??

<mce:script?language="javascript"><!--??

function?init()??

{??

RsizeAllImageById("imgProductItem",?150,?113);??

}??

//?--></mce:script>??

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

總結(jié)

以上是生活随笔為你收集整理的web 网页按比例显示图片 js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。