- 1PS提示：因為圖層已鎖定，無法編輯圖層的處理方法
- 2Adobe Illustrator CS5 序列號大全
- 3picacg蘋果版怎么找不到|picacg ios版是不是下架了介紹
- 4ACDsee注冊碼免費分享（含ACDsee18、ACDsee10等版本）
- 5蘋果iphone自動時間不準確的多種校正方法
- 6眼萌app怎么色弱測試 眼萌app色弱測試圖文說明教程
- 7百度安全衛士好用么_百度安全衛士技巧說明
- 8PDF瀏覽器能看3D文件嗎？PDF瀏覽器看3D文件圖文詳細教程
- 9Potato(馬鈴薯聊天)怎么注冊不了|Potato不能注冊處理方法介紹
- 10Potato(土豆聊天)怎么換頭像|Potato app更改頭像方法介紹
- 11ipad版office如何激活? office365激活的圖文說明教程
- 12最新的Adobe Illustrator CS4序列號大全
[摘要]大家知道，豐富多彩的Web頁面離不開圖片的支持，圖像一方面增加了網頁的生動性，另一方面增加了網頁規模，使下載速度減慢。如何讓一圖片能以適當大小在頁面上顯示，成了我一時解不開的謎。 前不久，我為單位開發了一個教學科研網站，采用新聞管理系統，首頁上新聞欄目中，需要從數據庫中調用圖片文件作為圖片新聞中的...
大家知道，豐富多彩的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.okasp.com/techinfo/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.okasp.com/techinfo/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.okasp.com/techinfo/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.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的約束，頁面效果是不合理的，因此不能采用。
我有些黔驢技窮的感覺，找不出更好的辦法解決這個問題，漸漸地失去了信心，為這個問題我已經兩個晚上沒睡著覺了，我準備最后一搏了。我仔細分析了我的測試三，我發現主要原因是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.okasp.com/techinfo/1.jpg align=left>this is a test!
再次測試，通過了！而且首頁調用成功！我成功了！
（出處：Viphot）
標簽：如何取得設置圖片大小
推薦資訊 總人氣榜
相關文章
