基於Extjs的相簿系統設計

 

基於Extjs的相簿系統設計 一、系統結構系統結構分為四大部分：1、 圖片管理器（PhotoManage），圖片分類管理、圖片目錄管理、圖片上傳控制項。2、 圖片瀏覽器（PhotoSee），類似於ACDSee，鍵盤的四個方向鍵分別控制上一頁、下一頁、放大和縮小。可以對每幅圖片添加備忘，顯示圖片的Exif資訊，對圖片進行評論等。3、 圖片搜尋引擎（PhotoSearch），可以對圖片備忘、圖片標題、圖片的Exif資訊進行搜尋。4、 後台管理器（Web Management），對使用者帳號、密碼等進行管理。 二、系統設計重點說一片上傳控制項、圖片瀏覽器和圖片搜尋的實現。1、圖片上傳控制項。圖片上傳控制項採用JavaApplet編寫，以JNLP的方式發布。首先用JavaApplet編寫一個圖片瀏覽器（1）方便挑選要上存的圖片。使用FTP方式上傳，FTP伺服器端使用Apache 的開源項目FTPServer，上傳的時候先產生圖片的縮圖，圖片名隨機產生。圖片上傳到FTP伺服器後還要將圖片的資訊（如路徑、名稱、Exif資訊等）提交伺服器，最後要使JavaApplet瀏覽本地的圖片檔案就要使用數位簽章。圖12、圖片瀏覽器是基於Extjs編寫的，瀏覽器的視窗採用左右布局，左邊是圖片的資訊，導覽列等，右邊是圖片瀏覽區。圖片的顯示採用Ajax技術，實現不刷屏顯示圖片，每顯示一幅圖片都執行一次CreatPhoto()函數。 function CreatPhoto(){ // 建立IMG，每開一幅圖運行一次     oldImg = objDivImg.firstChild; //<old img>    objDivImg.removeChild(oldImg); // 刪除舊的IMG     objDivImg.style.visibility = "hidden";    objImg = document.createElement("img");     objImg.onload = function(){        originalWidth = objImg.width ;        originalHeight = objImg.height;         if (isFitScreen){            creatFitScreen();        }else{            creatOriginalScreen();        }                onGetRemark(gAlbumInfo[photoIndex][2]);                objDivImg.style.visibility = "visible";             };     if (Ext.isIE){ // 設定圖片移動 設定position : absolute ; 才可以移動        objImg.setAttribute("className","ImgMain");    }else{        objImg.setAttribute("class","ImgMain");    }     objDivImg.appendChild(objImg); // 建立新的IMG     objImg.src = COMMON_PICS_DIR + gAlbumInfo[photoIndex][1] + '/' + gAlbumInfo[photoIndex][0]; }