一例WEB頁面圖片本地預加載實現

摘要:由于受客戶端控件加載圖片時間段影響，以及JS(JavaScript)的異步執行模式制約，往往對客戶端控件所加載的圖片進行處理，會出現圖片未加載完，而JS處理代碼已經開始執行的情況，此時會造成JS相關代碼執行錯誤。該文就這種在WEB頁面開發過程中常見的問題進行了詳細分析，并在此基礎上設計了相應解決方案，給出了部分關鍵代碼。

關鍵詞:預加載;異步執行;本地加載;瀏覽器緩存

中圖分類號:TP311文獻標識碼:A文章編號:1009-3044(2010)05-1223-02

One Cases of WEB Page Picture of Local Pre-loaded to Achieve

HE Miao

(Nanjing College of Information Technology， Nanjing 210046， China)

Abstract: Due to client controls affect the time you load your images， and JS (JavaScript) of asynchronous execution mode constraints are often loaded on the client-side controls the image processing， there will be finished picture is not loaded， while the JS processing code the situation has already begun at this time would cause JS errors related to code execution. In this paper， the development process in the WEB page frequently asked questions are analyzed in detail， and on this basis to design the corresponding solution， and given some key code.

Key words: pre-load; asynchronous implementation; local load; browser cache

1 問題描述

在WEB項目開發中出現以下需求:網頁能夠提供給用戶上傳頭像圖片的功能，而該功能要求能夠為用戶在手頭沒有頭像近照的情況下，可以提供對含有用戶影象的生活照片進行頭像剪截功能。

因此，我們設計讓用戶先在客戶端本地將待處理圖片(母圖)打開顯示，用JS提供給用戶頭像截取的大小、尺寸位置選擇框，改框由JS實現成可以由用戶在客戶端按實際需求進行任意調整，當調整完畢確定后，WEB頁面統一將母圖與用戶選擇的截取區域的對角坐標與寬高上傳至服務器，然后在服務器利用圖形處理類庫統一處理，當處理成功后，將截取的目標頭像(子圖)隨頁面回發給客戶端，并在相應客戶端控件中顯示。整個設計處理流程如圖1。

在以上過程中的動作(1)操作時，由于受圖片控件容器加載速度影響，尤其是當加載大尺寸圖片時，即使圖片在客戶端本地，也存在一個短暫的加載過程，而此時JS為后面圖片截取進行的母圖初始化過程(例如此處圖片按照一定的縮放比例顯示出來)已經開始執行，在這個執行過程中，需要母圖的寬、高、大小等圖片信息，但由于圖片還沒加載完畢，相應圖片信息無法獲取，因此導致JS為圖片進行的初始化處理失敗，表現為母圖加載入HTML容器時異常顯示，且初始化的截取矩形框顯示不正常。

2 圖片本地加載設計

根據問題原因分析，需要使用異步的方法為圖片設置預加載，即只有當圖片加載完畢后，再對圖片獲取基本信息，然后根據基本信息執行圖片截取初始化JS代碼。以下實現為.NET環境，服務器端代碼為C#.NET。

2.1 設置瀏覽器緩存圖片對象

為了預先加載圖片后獲取圖片信息，可以先用JS創建Image對象，并預加載圖片:

var tempimg = document.createElement(\"img\");//設置全局Image對象

function preview(ImageUrl) {

tempimg.src = ImageUrl;

ImagePreLoad(); //檢測圖片有沒加載完畢

}

2.2 判斷預加載圖片是否完成

由于預加載圖片有一個過程，需要不斷進行判斷是否加載完畢，可以使用Image對象的readyState屬性來判斷，并用setTimeout進行遞歸判斷，為防止遞歸過頻，降低系統資源，因此設置setTimeout觸發遞歸間隔時間為100ms。

function ImagePreLoad() {if (tempimg.readyState != \"complete\") {

setTimeout(\"ImagePreLoad(document.getElementById('tempImage'))\"， 100);

} else { previewComplete();//當加載完畢后開始圖片處理初始化

}}

2.3 圖片截取處理初始化

圖片截取處理初始化分為2步:1)將圖片按圖片原尺寸結合縮小在500*500范圍以內顯示于HTML容器中，以便用戶查看截取。

//計算圖片按最大象素壓縮后的寬與高

var width = tempimg.width; var height = tempimg.height;

if (width > height) { width = 500;

height = tempimg.height * (500 / tempimg.width);

document.getElementById(\"BiLi\").value = 500 / tempimg.width;}//記錄縮放比例

else { height = 500;

width = tempimg.width * (500 / tempimg.height);

document.getElementById(\"BiLi\").value = 500 / tempimg.height; }//記錄縮放比例

2)根據圖片寬和高以及縮放比例生成JS截取處理對象。

document.getElementById(\"bgDiv\").innerHTML =

\"

\"\" +

\"

\"

\"

\"

\"

\"

\"\" +

\"\";

var CutImageObj = new ImgCropper(\"bgDiv\"， \"dragDiv\"， ImageUrl， width， height，

{ Right: \"rRight\"， Left: \"rLeft\"， Up: \"rUp\"， Down: \"rDown\"， RightDown: \"rRightDown\"，

LeftDown: \"rLeftDown\"， RightUp: \"rRightUp\"， LeftUp: \"rLeftUp\"});

定義的CutImageObj為圖片截取處理對象，主要負責實現截取區域選擇，并將截取矩形區域的左上角坐標、區域的寬和高通過HTML隱藏控件傳遞至服務器端。

var drag = document.getElementById(\"dragDiv\");

document.getElementById(\"L\").value = drag.offsetLeft; //獲取左上角離母圖左邊框距離

document.getElementById(\"T\").value = drag.offsetTop; //獲取左上角離母圖上邊框距離

document.getElementById(\"W\").value = drag.offsetWidth; //獲取截取區域寬

document.getElementById(\"H\").value = drag.offsetHeight; //獲取截取區域高

2.4 根據截取區域進行圖片處理

//t，l為截取圖片在原圖的坐標，w，h為截取圖片寬高，BiLi為母圖縮放比例

float BiLi = float.Parse(this.BiLi.Value);

int t = Convert.ToInt32(int.Parse(this.T.Value)/BiLi);

int l = Convert.ToInt32(int.Parse(this.L.Value)/BiLi);

int w = Convert.ToInt32(int.Parse(this.W.Value)/BiLi);

int h = Convert.ToInt32(int.Parse(this.H.Value)/BiLi);

//獲取截取圖片對象，strPhotoName為母圖在服務器端的路徑

Bitmap bitmap = GetPartOfImage(strPhotoName， w， h， l， t);

3 運行結果總結

由于使用了異步模式判斷，只有當圖片加載完畢時，才開始執行母圖片截取處理初試化，此時已可以獲取母圖的基本屬性信息，為定義截取對象提供必要信息，使得用戶可以正常利用截取矩形框按需拖放截取圖片區域。截取初始化效果如圖2。

參考文獻:

[1] 劉軒明，林連雷，姜守達.一種數字地圖圖片加載方法[J].自動化技術與應用，2009，28(10).

[2] 歐永紅，姚耀文.一種基于IE緩存的WEB圖片獲取方法[J].計算機系統應用，2009(12).

[3] 伊夫杰.ASP.NET2.0高級編程[M].李敏波，譯.4版.北京:清華大學出版社，2006.

[4] 程不功，龍躍進，卓琳.ASP.NET2.0動態網站開發教程[M].北京:清華大學出版社，2006.

[5] msdn主頁[EB/OL].http://msdn.microsoft.com/zh-cn/default.aspx.