web 網頁按比例顯示圖片 js

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

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

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

而第二個方法使用Javascript是將計算量轉移到了客戶端。

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

[javascript] view plaincopy

//將imageDest圖片的大小按比例縮放,適合顯示在寬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，如：<img src="<%= imgPath %>"??? name="imgProductItem" width="150" height="113" border="0" id="imgProductItem" />，里面的150x113就是顯示框的最大尺寸，因為處理函數必須在onload完成時運行，所以這里必須設置一定的大小，要不整個頁面在載入圖片過程中出現排版錯亂，到運行了RsizeAllImageById才恢復正常。

添加一個批量操作的函數：

[javascript] view plaincopy

//將頁面內所有指定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區添加：??
??
<mce:script?language="javascript"><!--??
function?init()??
{??
RsizeAllImageById("imgProductItem",?150,?113);??
}??
//?--></mce:script>??

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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/276658.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/276658.shtml
英文地址，請注明出處：http://en.pswp.cn/news/276658.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！