如何擷取設定圖片大小以適應大小在頁面上顯示

來源:互聯網
上載者:User
顯示|頁面 大家知道,豐富多彩的Web頁面離不開圖片的支援,映像一方面增加了網頁的生動性,另一方面增加了網頁規模,使下載速度減慢。如何讓一圖片能以適當大小在頁面上顯示,成了我一時解不開的謎。

前不久,我為單位開發了一個教學科研網站,採用新聞管理系統,首頁上新聞欄目中,需要從資料庫中調用圖片檔案作為圖片新聞中的圖片,從而形成文字繞排形式。由於整個系統包括新聞上傳、新聞編輯、系統公告等都是動態實現的。在開發的過程中,我考慮到以下幾個因素:(1)作為網站的維護者,對電腦的操作不太熟練;(2)網站講究布局合理,內容充實。所以,出於設計的需要,網站頁面中,圖片新聞對圖片的寬度、高度有一定的要求,本網站寬度不能超過200px,儘管我明白,我們可以使用Photoshop等影像處理軟體,可以事先把圖片處理好後,再上傳到伺服器中去,達到首頁調用同樣的效果,但作為使用者,最希望的是操作越簡單越好,因此我決心攻破這個問題。經過幾天激戰,我不斷尋找解決問題的途徑、不斷測試直到成功。至此,我把自己的一些經驗,寫出來供廣大從事指令碼編寫者參考,以此共勉。

要讓圖片能以適當大小顯示的問題,實質是一個大圖片等比例縮小的問題。當然,小圖片是不能放大在網頁中顯示的,否則將出現圖象失真現象。如何通過圖象的URL獲得圖象的大小(width,height)是問題的關鍵,我便到網上去搜尋能否用javascript編寫圖象等比例縮放,功夫不負有心人,終於找到《自適應圖片大小的快顯視窗》一文,頁面效果為,單擊文本超連結後,頁面彈出一個新視窗,顯示圖片,其中表單大小與圖片大小相當,文章中用javascript:Image()對象動態裝載圖片,擷取圖片的高度和寬度,再根據源圖片的高度、寬度設定快顯視窗的高度與寬度設定快顯視窗的高度與寬度,並開啟該視窗,主要代碼如下:

測試一:

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

// 對象是否已建立

if (typeof(imgObj) == object){

// 是否已取得了映像的高度和寬度

if ((imgObj.width != 0) && (imgObj.height != 0))

// 根據取得的映像高度和寬度設定快顯視窗的高度與寬度,並開啟該視窗

// 其中的增量 20 和 30 是設定的視窗邊框與圖片間的間隔量

OpenFullSizeWindow(theURL,winName, ,width= + (imgObj.width+20) + ,height= + (imgObj.height+30));

else

// 因為通過 Image 對象動態裝載圖片,不可能立即得到圖片的寬度和高度,所以每隔100毫秒重複調用檢查

setTimeout(checkImg(' + theURL + ',' + winName + '), 100)

}

}



function OpenFullSizeWindow(theURL,winName,features) {

var aNewWin, sBaseCmd;

// 快顯視窗外觀參數

sBaseCmd = toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,;

// 調用是否來自 checkImg

if (features == null || features == ){

// 建立映像對象

imgObj = new Image();

// 設定映像源

imgObj.src = theURL;

// 開始擷取映像大小

checkImg(theURL, winName)

}

else{

// 開啟視窗

aNewWin = window.open(theURL,winName, sBaseCmd + features);

// 聚焦視窗

aNewWin.focus();

}

}

//-->

</script>

<a href=http://www.webjx.com/htmldata/2005-11-19/Bt0085.jpg onClick=OpenFullSizeWindow(this.href,'','');return false>圖片測試</a>

</body>

</html>



有了Image()對象來擷取圖象的Width、Height,我就知道該如何去解決怎樣實現圖象的等比例縮放問題了。於是,我用k=Width/Height表示圖象的比例值,當 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.webjx.com/htmldata/2005-11-19/Bt0085.jpg);

</script>



測試通過!我欣喜若狂,立即將代碼移植到首頁檔案(default.asp)中,然後通過伺服器測試,結果當我輸入網址的時候,瀏覽器中出現的已經處理好後的圖片,一下子我傻眼了,明明我運行首頁檔案,結果卻出現圖片。另外我發現瀏覽器工具列“後退”工具可用,我單擊“後退”,這時候出現了首頁頁面內容。再次測試,結果顯示很正常。經過反覆測試,我發現當每次更新圖片的時候會出現同樣的現象,另外當我每開啟一台未訪問過本網站的電腦也會出現同樣問題。我越來越糊塗,百思不得其解。為什麼出現如此現象?我想了很多方案,結果都在測試時失敗。

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

var myImg = new Image();

myImg.src = pic.gif;

這段代碼將迫使瀏覽器開始從伺服器下載指定的圖片,如果用戶端的緩衝 (Cache) 中有這個圖片的話,瀏覽器會自動將其覆蓋,那樣,當使用者將滑鼠移動到圖片上邊的時候,圖片將會立即變換,不會有時間的延遲。所以如果第一次顯示圖片後,第二次就能正常顯示首頁檔案就是這個原因了。由此,我得出不能用Image()對象擷取圖象的屬性這結論,應該改變問題的解決方案。

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

測試三

<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.webjx.com/htmldata/2005-11-19/4.jpg onload=javascript:width=x; align=left>

<script languge=javascript>

var x=show();

// document.write(x);

</script>

在這段代碼中,我考慮到使用<IMG>中的ID,就可以定義圖的寬度和高度,只要能控製圖象的寬度,就可在Web預覽中實現等比例顯示(高度隨寬度變化),所以我將處理後圖象的width作為show()函數的傳回值。在<IMG>中用onload事件調用圖象的Width。我再一次測試,通過!再次移植到首頁代碼中,再次測試,這時候問題又出現了:首頁上圖片新聞中圖片居然沒有顯示。我單擊地址欄中的“轉到”按鈕,這時候圖片能正常顯示了。實踐告訴我又一次失敗!因為上網者唯一習慣做的是輸入網址、鍵入斷行符號這兩個動作。

在此基礎上,我做了以下嘗試:

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

(2)、window.location.reload()重新裝載頁面,可是結果是一直處於裝載頁面過程中,使網頁不能正確顯示。

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



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

因此要重新裝載頁面才能顯示圖片。另外,我知道Onload()一般用在<Body>元素中,預先完成裝載頁面時觸發的事件。所以,我將<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.webjx.com/htmldata/2005-11-19/1.jpg align=left>this is a test!

再次測試,通過了!而且首頁調用成功!我成功了!

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。