基于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浏览本地的图片文件就要使用数字签名。

图1

2、图片浏览器是基于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];

 

}