明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

如何取得設(shè)置圖片大小

發(fā)表時間：2024-01-28 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]大家知道，豐富多彩的Web頁面離不開圖片的支持，圖像一方面增加了網(wǎng)頁的生動性，另一方面增加了網(wǎng)頁規(guī)模，使下載速度減慢。如何讓一圖片能以適當(dāng)大小在頁面上顯示，成了我一時解不開的謎。 前不久，我為單位開發(fā)了一個教學(xué)科研網(wǎng)站，采用新聞管理系統(tǒng)，首頁上新聞欄目中，需要從數(shù)據(jù)庫中調(diào)用圖片文件作為圖片新聞中的...

大家知道，豐富多彩的Web頁面離不開圖片的支持，圖像一方面增加了網(wǎng)頁的生動性，另一方面增加了網(wǎng)頁規(guī)模，使下載速度減慢。如何讓一圖片能以適當(dāng)大小在頁面上顯示，成了我一時解不開的謎。

前不久，我為單位開發(fā)了一個教學(xué)科研網(wǎng)站，采用新聞管理系統(tǒng)，首頁上新聞欄目中，需要從數(shù)據(jù)庫中調(diào)用圖片文件作為圖片新聞中的圖片，從而形成文字繞排形式。由于整個系統(tǒng)包括新聞上傳、新聞編輯、系統(tǒng)公告等都是動態(tài)實現(xiàn)的。在開發(fā)的過程中，我考慮到以下幾個因素：（1）作為網(wǎng)站的維護者，對計算機的操作不太熟練；（2）網(wǎng)站講究布局合理，內(nèi)容充實。所以，出于設(shè)計的需要，網(wǎng)站頁面中，圖片新聞對圖片的寬度、高度有一定的要求，本網(wǎng)站寬度不能超過200px,盡管我明白，我們可以使用Photoshop等圖像處理軟件，可以事先把圖片處理好后，再上傳到服務(wù)器中去，達到首頁調(diào)用同樣的效果，但作為用戶，最希望的是操作越簡單越好，因此我決心攻破這個問題。經(jīng)過幾天激戰(zhàn)，我不斷尋找解決問題的途徑、不斷測試直到成功。至此，我把自己的一些經(jīng)驗，寫出來供廣大從事腳本編寫者參考，以此共勉。

要讓圖片能以適當(dāng)大小顯示的問題，實質(zhì)是一個大圖片等比例縮小的問題。當(dāng)然，小圖片是不能放大在網(wǎng)頁中顯示的，否則將出現(xiàn)圖象失真現(xiàn)象。如何通過圖象的URL獲得圖象的大�。╳idth,height）是問題的關(guān)鍵，我便到網(wǎng)上去搜索能否用javascript編寫圖象等比例縮放，功夫不負有心人，終于找到《自適應(yīng)圖片大小的彈出窗口》一文，頁面效果為，單擊文本超鏈接后，頁面彈出一個新窗口，顯示圖片，其中窗體大小與圖片大小相當(dāng)，文章中用javascript：Image()對象動態(tài)裝載圖片，獲取圖片的高度和寬度，再根據(jù)源圖片的高度、寬度設(shè)置彈出窗口的高度與寬度設(shè)置彈出窗口的高度與寬度，并打開該窗口，主要代碼如下：

測試一：

<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){

// 對象是否已創(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

// 因為通過 Image 對象動態(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)用是否來自 checkImg

if (features == null
features == ){

// 創(chuàng)建圖像對象

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>圖片測試</a>

</body>

</html>



有了Image()對象來獲取圖象的Width、Height，我就知道該如何去解決怎樣實現(xiàn)圖象的等比例縮放問題了。于是，我用k=Width/Height表示圖象的比例值，當(dāng) K>=1時，表示width>heght，只要width不超過200px，則height一定<=200px；相反K<1，只要Height不超過150Px，width一定<=150px（正常情況下width/height=4：3）。所以只要K>=1限定width，K<1限定height就可以了。在測試一的幫助下，我很快有了下面的一段代碼（測試二）：



測試二

<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>



測試通過!我欣喜若狂，立即將代碼移植到首頁文件（default.asp）中，然后通過服務(wù)器測試，結(jié)果當(dāng)我輸入網(wǎng)址的時候，瀏覽器中出現(xiàn)的已經(jīng)處理好后的圖片，一下子我傻眼了，明明我運行首頁文件，結(jié)果卻出現(xiàn)圖片。另外我發(fā)現(xiàn)瀏覽器工具欄“后退”工具可用，我單擊“后退”，這時候出現(xiàn)了首頁頁面內(nèi)容。再次測試，結(jié)果顯示很正常。經(jīng)過反復(fù)測試，我發(fā)現(xiàn)當(dāng)每次更新圖片的時候會出現(xiàn)同樣的現(xiàn)象，另外當(dāng)我每打開一臺未訪問過本網(wǎng)站的計算機也會出現(xiàn)同樣問題。我越來越糊涂，百思不得其解。為什么出現(xiàn)如此現(xiàn)象？我想了很多方案，結(jié)果都在測試時失敗。

情急之中，我到網(wǎng)上去查了Image()對象的特性，主要用來實現(xiàn)圖片翻滾效果，可以將圖片提前下載到客戶端，讓圖片之間的切換沒有時間延遲。如下邊的代碼一樣，使用 Image 對象的 src 屬性指定圖片的路徑 (URL)，這樣就將 images 目錄下的圖片 pic2.gif 下載到客戶端了：

var myImg = new Image();

myImg.src = pic.gif;

這段代碼將迫使瀏覽器開始從服務(wù)器下載指定的圖片，如果客戶端的緩存 (Cache) 中有這個圖片的話，瀏覽器會自動將其覆蓋，那樣，當(dāng)用戶將鼠標移動到圖片上邊的時候，圖片將會立即變換，不會有時間的延遲。所以如果第一次顯示圖片后，第二次就能正常顯示首頁文件就是這個原因了。由此，我得出不能用Image()對象獲取圖象的屬性這結(jié)論，應(yīng)該改變解決問題的方案。

我查了許多有關(guān)javascript的書籍，有一本書上在編寫“圖的跳動”特效的時候，這樣寫到：“頁面的<IMG>元素可以定義其顯示范圍，即圖的高度Height和寬度（Width）。處理事件觸發(fā)時，動態(tài)地改變圖的兩個屬性就可達到效果；”根據(jù)提示，我很快完成了測試三的代碼，主要代碼如下：

測試三

<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ù)覽中實現(xiàn)等比例顯示（高度隨寬度變化），所以我將處理后圖象的width作為show()函數(shù)的返回值。在<IMG>中用onload事件調(diào)用圖象的Width。我再一次測試，通過！再次移植到首頁代碼中，再次測試，這時候問題又出現(xiàn)了：首頁上圖片新聞中圖片居然沒有顯示。我單擊地址欄中的“轉(zhuǎn)到”按鈕，這時候圖片能正常顯示了。實踐告訴我又一次失�。∫驗樯暇W(wǎng)者唯一習(xí)慣做的是輸入網(wǎng)址、鍵入回車這兩個動作。

在此基礎(chǔ)上，我做了以下嘗試：

(1)、<head></head>之間<meta http-equiv=refresh content=10; url=default.asp>.讓隔10秒自動刷新屏幕，結(jié)果圖片能正常顯示，但不斷刷屏讓視覺很不舒服。

（2）、window.location.reload()重新裝載頁面，可是結(jié)果是一直處于裝載頁面過程中，使網(wǎng)頁不能正確顯示。

（3）、<IMG SRC=http://www.okasp.com/techinfo/1.jpg border=0 onLoad=javascript:if(this.width>200) this.width=200; align=left>，測試能夠通過，但如果圖象width<height，并且width>200px，則頁面顯示效果為高度超過150，這樣如果沒有K=width/height的約束，頁面效果是不合理的，因此不能采用。



我有些黔驢技窮的感覺，找不出更好的辦法解決這個問題，漸漸地失去了信心，為這個問題我已經(jīng)兩個晚上沒睡著覺了，我準備最后一搏了。我仔細分析了我的測試三，我發(fā)現(xiàn)主要原因是onload事件是頁面載入時觸發(fā)的事件。Onload在<Img>元素中使用，當(dāng)IE解釋到此處，需裝載頁面才能觸發(fā)”javascript:width=x;

因此要重新裝載頁面才能顯示圖片。另外，我知道Onload()一般用在<Body>元素中，預(yù)先完成裝載頁面時觸發(fā)的事件。所以，我將<IMG>中Onload()事件放到了<Body>中去，代碼如下：

測試四：

<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!

再次測試，通過了！而且首頁調(diào)用成功！我成功了！
（出處：Viphot）