如何取得設(shè)置圖片大小
發(fā)表時(shí)間：2024-06-02 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]大家知道，豐富多彩的Web頁(yè)面離不開圖片的支持，圖像一方面增加了網(wǎng)頁(yè)的生動(dòng)性，另一方面增加了網(wǎng)頁(yè)規(guī)模，使下載速度減慢。如何讓一圖片能以適當(dāng)大小在頁(yè)面上顯示，成了我一時(shí)解不開的謎。 前不久，我為單位開發(fā)了一個(gè)教學(xué)科研網(wǎng)站，采用新聞管理系統(tǒng)，首頁(yè)上新聞欄目中，需要從數(shù)據(jù)庫(kù)中調(diào)用圖片文件作為圖片新聞中的...
大家知道，豐富多彩的Web頁(yè)面離不開圖片的支持，圖像一方面增加了網(wǎng)頁(yè)的生動(dòng)性，另一方面增加了網(wǎng)頁(yè)規(guī)模，使下載速度減慢。如何讓一圖片能以適當(dāng)大小在頁(yè)面上顯示，成了我一時(shí)解不開的謎。
前不久，我為單位開發(fā)了一個(gè)教學(xué)科研網(wǎng)站，采用新聞管理系統(tǒng)，首頁(yè)上新聞欄目中，需要從數(shù)據(jù)庫(kù)中調(diào)用圖片文件作為圖片新聞中的圖片，從而形成文字繞排形式。由于整個(gè)系統(tǒng)包括新聞上傳、新聞編輯、系統(tǒng)公告等都是動(dòng)態(tài)實(shí)現(xiàn)的。在開發(fā)的過(guò)程中，我考慮到以下幾個(gè)因素：（1）作為網(wǎng)站的維護(hù)者，對(duì)計(jì)算機(jī)的操作不太熟練；（2）網(wǎng)站講究布局合理，內(nèi)容充實(shí)。所以，出于設(shè)計(jì)的需要，網(wǎng)站頁(yè)面中，圖片新聞對(duì)圖片的寬度、高度有一定的要求，本網(wǎng)站寬度不能超過(guò)200px,盡管我明白，我們可以使用Photoshop等圖像處理軟件，可以事先把圖片處理好后，再上傳到服務(wù)器中去，達(dá)到首頁(yè)調(diào)用同樣的效果，但作為用戶，最希望的是操作越簡(jiǎn)單越好，因此我決心攻破這個(gè)問(wèn)題。經(jīng)過(guò)幾天激戰(zhàn)，我不斷尋找解決問(wèn)題的途徑、不斷測(cè)試直到成功。至此，我把自己的一些經(jīng)驗(yàn)，寫出來(lái)供廣大從事腳本編寫者參考，以此共勉。
要讓圖片能以適當(dāng)大小顯示的問(wèn)題，實(shí)質(zhì)是一個(gè)大圖片等比例縮小的問(wèn)題。當(dāng)然，小圖片是不能放大在網(wǎng)頁(yè)中顯示的，否則將出現(xiàn)圖象失真現(xiàn)象。如何通過(guò)圖象的URL獲得圖象的大�。╳idth,height）是問(wèn)題的關(guān)鍵，我便到網(wǎng)上去搜索能否用javascript編寫圖象等比例縮放，功夫不負(fù)有心人，終于找到《自適應(yīng)圖片大小的彈出窗口》一文，頁(yè)面效果為，單擊文本超鏈接后，頁(yè)面彈出一個(gè)新窗口，顯示圖片，其中窗體大小與圖片大小相當(dāng)，文章中用javascript：Image()對(duì)象動(dòng)態(tài)裝載圖片，獲取圖片的高度和寬度，再根據(jù)源圖片的高度、寬度設(shè)置彈出窗口的高度與寬度設(shè)置彈出窗口的高度與寬度，并打開該窗口，主要代碼如下：
測(cè)試一：
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312>
<meta name=GENERATOR content=Microsoft FrontPage 4.0>
<meta name=ProgId content=FrontPage.Editor.Document>
<title>test</title>
</head>
<body>
<script language=javascript type=text/javascript>
<!--
var imgObj;
function checkImg(theURL,winName){
// 對(duì)象是否已創(chuàng)建
if (typeof(imgObj) == object){
// 是否已取得了圖像的高度和寬度
if ((imgObj.width != 0) && (imgObj.height != 0))
// 根據(jù)取得的圖像高度和寬度設(shè)置彈出窗口的高度與寬度，并打開該窗口
// 其中的增量 20 和 30 是設(shè)置的窗口邊框與圖片間的間隔量
OpenFullSizeWindow(theURL,winName, ,width= + (imgObj.width+20) + ,height= + (imgObj.height+30));
else
// 因?yàn)橥ㄟ^(guò) Image 對(duì)象動(dòng)態(tài)裝載圖片，不可能立即得到圖片的寬度和高度，所以每隔100毫秒重復(fù)調(diào)用檢查
setTimeout(checkImg(' + theURL + ',' + winName + '), 100)
}
}
function OpenFullSizeWindow(theURL,winName,features) {
var aNewWin, sBaseCmd;
// 彈出窗口外觀參數(shù)
sBaseCmd = toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,;
// 調(diào)用是否來(lái)自 checkImg
if (features == null
features == ){
// 創(chuàng)建圖像對(duì)象
imgObj = new Image();
// 設(shè)置圖像源
imgObj.src = theURL;
// 開始獲取圖像大小
checkImg(theURL, winName)
}
else{
// 打開窗口
aNewWin = window.open(theURL,winName, sBaseCmd + features);
// 聚焦窗口
aNewWin.focus();
}
}
//-->
</script>
<a href=http://www.okasp.com/techinfo/Bt0085.jpg onClick=OpenFullSizeWindow(this.href,'','');return false>圖片測(cè)試</a>
</body>
</html>
有了Image()對(duì)象來(lái)獲取圖象的Width、Height，我就知道該如何去解決怎樣實(shí)現(xiàn)圖象的等比例縮放問(wèn)題了。于是，我用k=Width/Height表示圖象的比例值，當(dāng) K>=1時(shí)，表示width>heght，只要width不超過(guò)200px，則height一定<=200px；相反K<1，只要Height不超過(guò)150Px，width一定<=150px（正常情況下width/height=4：3）。所以只要K>=1限定width，K<1限定height就可以了。在測(cè)試一的幫助下，我很快有了下面的一段代碼（測(cè)試二）：
測(cè)試二
<script language=javascript type=text/javascript>
<!--
var imgObj;
function checkImg(theURL){
var width,height;
var k;
imgObj = new Image();
imgObj.src = theURL;
if (typeof(imgObj) == object){
if ((imgObj.width != 0) && (imgObj.height != 0))
{width=imgObj.width;
height=imgObj.height;
k=width/height;
document.write (k);
if(k>=1){
if (width>=200){
width=200;
height=width/k;
}}
else
{if (height>=200){
height=200;
width=k*height;
}
}
showimg(theURL,width,height);
}
else
setTimeout(checkImg(' + theURL + '), 100)
}
}
function showimg(theURL,x,y)
{
document.write(<imgsrc=+theURL++width=+x++height=+y+border='0'+ +align='left'>);
}
//-->
</script>
<script language=javascript>
checkImg(http://www.okasp.com/techinfo/Bt0085.jpg);
</script>
測(cè)試通過(guò)!我欣喜若狂，立即將代碼移植到首頁(yè)文件（default.asp）中，然后通過(guò)服務(wù)器測(cè)試，結(jié)果當(dāng)我輸入網(wǎng)址的時(shí)候，瀏覽器中出現(xiàn)的已經(jīng)處理好后的圖片，一下子我傻眼了，明明我運(yùn)行首頁(yè)文件，結(jié)果卻出現(xiàn)圖片。另外我發(fā)現(xiàn)瀏覽器工具欄“后退”工具可用，我單擊“后退”，這時(shí)候出現(xiàn)了首頁(yè)頁(yè)面內(nèi)容。再次測(cè)試，結(jié)果顯示很正常。經(jīng)過(guò)反復(fù)測(cè)試，我發(fā)現(xiàn)當(dāng)每次更新圖片的時(shí)候會(huì)出現(xiàn)同樣的現(xiàn)象，另外當(dāng)我每打開一臺(tái)未訪問(wèn)過(guò)本網(wǎng)站的計(jì)算機(jī)也會(huì)出現(xiàn)同樣問(wèn)題。我越來(lái)越糊涂，百思不得其解。為什么出現(xiàn)如此現(xiàn)象？我想了很多方案，結(jié)果都在測(cè)試時(shí)失敗。
情急之中，我到網(wǎng)上去查了Image()對(duì)象的特性，主要用來(lái)實(shí)現(xiàn)圖片翻滾效果，可以將圖片提前下載到客戶端，讓圖片之間的切換沒有時(shí)間延遲。如下邊的代碼一樣，使用 Image 對(duì)象的 src 屬性指定圖片的路徑 (URL)，這樣就將 images 目錄下的圖片 pic2.gif 下載到客戶端了：
var myImg = new Image();
myImg.src = pic.gif;
這段代碼將迫使瀏覽器開始從服務(wù)器下載指定的圖片，如果客戶端的緩存 (Cache) 中有這個(gè)圖片的話，瀏覽器會(huì)自動(dòng)將其覆蓋，那樣，當(dāng)用戶將鼠標(biāo)移動(dòng)到圖片上邊的時(shí)候，圖片將會(huì)立即變換，不會(huì)有時(shí)間的延遲。所以如果第一次顯示圖片后，第二次就能正常顯示首頁(yè)文件就是這個(gè)原因了。由此，我得出不能用Image()對(duì)象獲取圖象的屬性這結(jié)論，應(yīng)該改變解決問(wèn)題的方案。
我查了許多有關(guān)javascript的書籍，有一本書上在編寫“圖的跳動(dòng)”特效的時(shí)候，這樣寫到：“頁(yè)面的<IMG>元素可以定義其顯示范圍，即圖的高度Height和寬度（Width）。處理事件觸發(fā)時(shí)，動(dòng)態(tài)地改變圖的兩個(gè)屬性就可達(dá)到效果；”根據(jù)提示，我很快完成了測(cè)試三的代碼，主要代碼如下：
測(cè)試三
<script>
function show()
{var w,h;
var k;
var con;
w=smallslot.width;
h=smallslot.height;
k=w/h;
if(k>=1){
if (w>=200){
w=200;
h=w/k;
}}
else
{if (h>=150){
h=150;
w=k*h;
}
}
return w;
}
</script>
<img border=0 ID=smallslot src=http://www.okasp.com/techinfo/4.jpg onload=
javascript:width=x; align=left>
<script languge=javascript>
var x=show();
// document.write(x);
</script>
在這段代碼中，我考慮到使用<IMG>中的ID，就可以定義圖的寬度和高度，只要能控制圖象的寬度，就可在Web預(yù)覽中實(shí)現(xiàn)等比例顯示（高度隨寬度變化），所以我將處理后圖象的width作為show()函數(shù)的返回值。在<IMG>中用onload事件調(diào)用圖象的Width。我再一次測(cè)試，通過(guò)！再次移植到首頁(yè)代碼中，再次測(cè)試，這時(shí)候問(wèn)題又出現(xiàn)了：首頁(yè)上圖片新聞中圖片居然沒有顯示。我單擊地址欄中的“轉(zhuǎn)到”按鈕，這時(shí)候圖片能正常顯示了。實(shí)踐告訴我又一次失�。∫�?yàn)樯暇W(wǎng)者唯一習(xí)慣做的是輸入網(wǎng)址、鍵入回車這兩個(gè)動(dòng)作。
在此基礎(chǔ)上，我做了以下嘗試：
(1)、<head></head>之間<meta http-equiv=refresh content=10; url=default.asp>.讓隔10秒自動(dòng)刷新屏幕，結(jié)果圖片能正常顯示，但不斷刷屏讓視覺很不舒服。
（2）、window.location.reload()重新裝載頁(yè)面，可是結(jié)果是一直處于裝載頁(yè)面過(guò)程中，使網(wǎng)頁(yè)不能正確顯示。
（3）、<IMG SRC=http://www.okasp.com/techinfo/1.jpg border=0 onLoad=
javascript:if(this.width>200) this.width=200; align=left>，測(cè)試能夠通過(guò)，但如果圖象width<height，并且width>200px，則頁(yè)面顯示效果為高度超過(guò)150，這樣如果沒有K=width/height的約束，頁(yè)面效果是不合理的，因此不能采用。
我有些黔驢技窮的感覺，找不出更好的辦法解決這個(gè)問(wèn)題，漸漸地失去了信心，為這個(gè)問(wèn)題我已經(jīng)兩個(gè)晚上沒睡著覺了，我準(zhǔn)備最后一搏了。我仔細(xì)分析了我的測(cè)試三，我發(fā)現(xiàn)主要原因是onload事件是頁(yè)面載入時(shí)觸發(fā)的事件。Onload在<Img>元素中使用，當(dāng)IE解釋到此處，需裝載頁(yè)面才能觸發(fā)”
javascript:width=x;
因此要重新裝載頁(yè)面才能顯示圖片。另外，我知道Onload()一般用在<Body>元素中，預(yù)先完成裝載頁(yè)面時(shí)觸發(fā)的事件。所以，我將<IMG>中Onload()事件放到了<Body>中去，代碼如下：
測(cè)試四：
<body onload=window.smallslot.width=show(); >
<script>
function show()
{var w,h;
var k;
var con;
w=smallslot.width;
h=smallslot.height;
k=w/h;
if(k>=1){
if (w>=200){
w=200;
h=w/k;
}}
else
{if (h>=150){
h=150;
w=k*h;
}
}
return w;
}
</script>
<img border=0 ID=smallslot src=http://www.okasp.com/techinfo/1.jpg align=left>this is a test!
再次測(cè)試，通過(guò)了！而且首頁(yè)調(diào)用成功！我成功了！
（出處：Viphot）
