智能数字相册系统的设计_毕业论文.docVIP

I 摘 要 随着计算机和数码设备的普及，数字图片资源已成为我们日常生活中的一个重要 部分，对于日益增多的图片资源，如何更好的存储和有效检索已成为人们面临的一个 新的课题，于是电子相册应运而生。该系统和一般的数字相册系统相比，更具有一定 的智能性。例如：当用户需要某幅相片时，可以通过简单的人机交互，或者根据用户 的使用记录，自动推荐出用户可能需要的图像。 本文介绍基于.NET平台开发的基于B/S模式的智能数字相册的具体实现。系统的 主要开发语言为C#，应用了XML、Ajax等技术，结合了目录管理与SQL Server数据库 管理。同时采用基于文件方式的图像存储，即图像文件以文件形式存放于指定的计算 机目录下，在数据库表中只反映图像数据文件的存储路径及各种属性，这种存储方式 缩小了数据库的容量，对图像的操作和使用都十分方便。对于数字相片的录入，检索 等功能的实现，系统采用了当今流行的Ajax技术，其改变了传统的客户端与服务器端 交互的方式，使得用户无需等待数据刷新，即可执行其他的操作，所有的数据处理都 在后台进行，提高了用户体验。 系统的主要功能包括：用户登录与用户管理、图像的导入和显示，根据关键字检 索图像，根据图像的分类浏览相册及改变相册的风格。 关键词： Ajax； .NET； 电子相册 II Abstract With the popularity of computers and numeral devices, the resources of digital photos have become important parts of our daily life. As for the growing number of images, how to keep and retrieval them effectively is the facing problem. As a result, e-album came into being. Compared with other e-albums, this new system attend to be more intellect. For example, if you want to find out one picture from the album, you could choose to contact with your computer. Also, you could wait the system to recommend according your records, then you will find out the image you want. At the same time, if you want to look though some related pictures, you could input some keywords, then your pictures will come into being immediately. This paper will introduce you the intelligent e-album, which is developed with B/S model and is based on .NET platform .The e-album is developed in C# language, applied with XML and Ajax technology, combined with the management of catalogue and SQL Server. Pictures in the e-album are storaged based on files, that is pictures are storaged at the given catalogue as files not images. At the same time, only the storage location and attributes of pictures are written in the database, which makes the database smaller .Therefore, it is convenient to users. For the loading and retrieval, Ajax is used in the e-album. This most popular technology changes the traditional pattern between client and server, allowing replacing data without renewing the whole page. All the processing work is done in the background, which is quite convenient to users. The e-album includes the login and management of users, the import and display of images, searching images according to some key words. Looking though pictures of diffirent catalogy is also included. Key words: Ajax; .NET; E-album III 目 录 1 绪论绪论.1 1.1 研究的意义及目的.1 1.2 国内外文献综述.1 1.3 研究内容.1 2 相关技术相关技术.2 2.1 AJAX技术概述2 2.1.1 Ajax 技术的含义.2 2.1.2 Ajax 技术的特点.2 2.1.3 Ajax 开发的关键技术.2 2.2 .NET FRAMEWORK.4 2.2.1 .NET 框架结构4 2.2.2 ASP.NET 技术.4 2.2.3 ASP.NET 命名空间.5 2.2.4 ADO.NET 技术 .6 2.3 本章小结.8 3 智能数字相册系统的设计智能数字相册系统的设计.9 3.1 总的设计目标.9 3.2 需要解决的重点问题.9 3.3 系统数据结构的设计.10 3.4 系统功能设计.10 3.4.1 图片管理11 3.4.2 图片检索 .12 3.4.3 图片浏览16 3.5 本章小结.19 4系统实现与测试系统实现与测试20 4.1 系统开发环境与工具.20 4.1.1 Visual Studio 2008.20 4.1.2 SQL Server 2005.21 4.2 系统运行环境.21 IV 4.3 实验结果.22 4.3.1 用户登录22 4.3.2 用户注册22 4.3.3 更改用户信息23 4.3.4 浏览相片24 4.3.5检索相片24 4.3.6 上传相片26 4.4 本章小结.26 5 结论结论.27 5.1 总结.27 5.2 展望.27 参考文献参考文献.28 致致 谢谢.29 1 1 绪论 1.1 研究的意义及目的 随着人们生活水平的逐步提高，旅游成了大家必不可少的放松方式，每当笔者走 到一个美丽的景点，就会忍不住拿起数码相机照上几张留做回忆。虽然照片最后会存 入到自己的电脑里，但是时间一长、照片一多，这些有着勾起回忆的资料，就会显得 杂乱无章，即不方便欣赏，也不方便管理。而电子相册具有欣赏、传播方便，界面美 观等特点，可以很好的管理所存入的照片，不失为欣赏、保存照片的最佳工具。 1.2 国内外文献综述 智能数字相册是一种应用性较强的图像管理软件，也是时下最流行的一种网络元 素，它可以应该在很多的领域，例如时下最流行的空间及博客就应用到了这一技术， 而且受到大多数网友的认可和追捧。其以静态照片为素材(获得源方式为扫描仪扫描、 数码相机拍摄等)，配合动感的背景、前景和字幕等视频处理的特殊效果，配上音乐就 可制作成电子相册。 制作好的电子相册可以在电脑上，各类影碟机上，以及手机和 MP4 里观看，这是 数字相册技术发展到今天的一个新的突破，即不再像传统那样，只能在电脑上或在影 碟机上观看了。并且还可以通过手机将自己的个性化 MTV 发送给远方的亲朋好友们分 享。当然，如果考虑到长期保存的话，制作成电子相册光盘那是最好的选择，它可保 存 100 多年之久，标准 VCD、SVCD、DVD 格式，兼容性好，通过影碟机即可与家人、 朋友、客户观赏，若保存在硬盘上，也便于随时调阅、欣赏，永久保存。 1.3 研究内容 该系统比一般的数字相册系统而言，更具有一定的智能性，例如：当用户需要某 幅相片时，可以通过简单的人机交互，或者根据用户使用记录，自动推荐出用户可能 需要的图像。该智能数字相册系统是一种基于 B/S 架构的系统，它采用 ASP.NET 开发， 采用 Ajax 技术缩短了网络的延迟，节约了用户的时间。 本系统所研究的是从数字相册的管理到相册的生成等一系列的问题，大致分为： 图像的导入和显示、数据库索引的建立、根据关键字检索图像、图像的分类等。 2 2 相关技术 2.1 Ajax 技术概述 2.1.1 Ajax 技术的含义 Ajax 技术是 Asynchronous JavaScript And XML（异步 JavaScript 和 XML） 的英文缩写， 它不是一种单独的技术，而是一种融合了多项现有的成熟的技术集合。 这种技术集合发挥了其中每一种技术的独特之处，糅合起来便形成了一种功能强大的 新技术1。Ajax 使用通信技术发送和接收对服务器的异步请求/响应，然后利用显示技 术处理响应。Ajax 技术主要是一种客户端技术，是一种以浏览器为中心的开发框架， 是一种新的 Web 体系结构，是 Web 2.0 的核心技术2。Ajax 的工作原理相当于在客户 和服务器之间加了个中间层，使用户操作与服务器响应异步化。这样把以前的一些 服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和 带宽的负担。 2.1.2 Ajax 技术的特点 Ajax技术的核心理念在于使用XMLHttpRequest对象发送异步请求。它使XHTML和 CSS实现基于各种标准的页面呈现，使用文档对象模型(Document Object Model)实现动 态显示和交互，使用XML和XSLT操作数据和实现数据交换，使用XMLHttpRequest实 现异步数据检索和读取，最后使用JavaScript将所有数据进行绑定和处理。与传统Web 页面需刷新的“瘦客户端”不同，Ajax提供的是无需完全刷新页面、近乎桌面应用、 丰富多彩的“富客户端”用户体验。 2.1.3 Ajax 开发的关键技术 Ajax技术实际上是由JavaScript、XHTML、CSS、DOM模型、XML、XSLT和 XMLHttpRequest对象等七种不同技术组成的一种技术集合和综合应用。Ajax技术开发 者可以使用XHTML和CSS实现数据信息的统一化、标准化呈现，使用DOM模型实现浏 览器端丰富的动态显示效果以及与服务器端的交互，使用XML和XSLT进行浏览器端和 服务器端的数据信息交换与处理3，使用 XMLHttpRequest对象进行浏览器端和服务器 端的异步数据读取，使用JavaScript实现对所有数据进行整合。XMLHttpRequest对象和 JavaScript是实现Ajax应用必不可少的核心技术，其它五项技术在每一个Ajax应用中不 一定都会用到，主要依据开发的实际需要而定。 下面介绍本系统中应用到的Ajax开发的关键技术：JavaScript，XMLHttpRequest对 象以及CSS层叠样式表。 JavaScript是一种基于对象(object)和事件驱动(Event Driven)并具有安全性能的、 3 可以与HTML标记语言混合使用的解释性编程语言，其源代码在发往客户端执行之前 不需经过编译，而是将文本格式的字符代码发送给客户端，由浏览器解释执行，用它 编写的程序可以在浏览器的支持下实现跨平台运行4。 JavaScript在编程风格上主要具有如下特征： (1) 引入for和if等控制语句使程序效率化； (2) 目标模块(Document、Math、Date和文字列模块等)的导入使程序模块化； (3) 网页、Frame和Window的管理增强了网页设计的技巧； (4) OnClick、OnChange等事件处理的实现使网页可以在客户端作动态响应； (5) Timer处理的实现可以实现动态网页； (6) 对客户端数据输入输出对话框的实现； (7) Image目标模块对应的图像动态操作。 在Ajax中，JavaScript已经从默默无闻的后台状态完全转移到了前台，发挥着巨大 的作用。JavaScript是整个Ajax的核心部分，它使开发人员能够运用编程语言来控制浏 览器客户端的行为。事实上Ajax的其它组成部分都提供了JavaScript的编程接口，例如， DOM模型将文档结点表现为对象，并定义了这些对象具有的方法和属性；CSS也可以 作为节点的一个属性由JavaScript进行控制。JavaScript脚本充分发挥了其脚本语言的特 点，使用代码控制着DOM模型、XML、CSS和XHTML等技术的行为，因此可以将 JavaScript看作是Ajax中的黏合剂，它使Ajax的各个组成部分协同工作，一起完成需要 实现的功能。 XMLHttpRequest对象是浏览器中已定义好的对象,它是Ajax技术的核心组成部分， JavaScript通过它和服务器之间进行异步通信，并通过它来解析从服务器返回的XML文 件。 Ajax应用的特点之一就是可以通过XMLHttpRequest对象发送请求向服务器传输或 者读写数据，可以像桌面应用程序一样，只同服务器进行数据层面的交换，而无需刷 新页面，也不用每次都将数据处理的工作提交给服务器来做。这样既减轻了服务器的 负担又加快了响应速度、缩短了用户等待时间。 需要注意的是，在定义XMLHttpRequest对象时，IE浏览器和其它浏览器的定义方 式有所不同。 XMLHttpRequest对象是通信的基础。是Ajax技术开发的关键，它能够提供异步通 信来完成在很多传统Web开发中无法完成的工作。XMLHttpRequest对象由JavaScript创 建并使用，客户端可以从服务器端获取需要的信息，通过与DOM和CSS的结合，实现 局部刷新；同时还可以通过XMLHttpRequest对象异步提交信息，将输入的数据在后台 提交到服务器而无需刷新。 CSS层叠样式表是为了弥补HTML超文本标记语言在格式修饰中的不足，同时也是为 了能够实现页面格式的批量动态更新5。为了进一步丰富页面的动态效果，通过使用 4 脚本语言与CSS结合，动态控制页面元素的位置、色彩等属性。 CSS提供了独立的手段来控制页面的表现6，因此可以让Ajax开发人员更专注于开 发应用逻辑的相关代码，他们只需提供合理的文档结构即可，而不必关注表现，这在 一定程度上简化了Ajax的开发。同时，CSS还有助于结合Ajax完成一些特殊的功能，例 如，要实现树状菜单的折叠功能，一种方法是使用DOM模型在展开时添加所有子结点， 折叠时移除所有子结点。但这显然是效率低的做法，使用CSS可以让其变得非常简单， 只要通过CSS设置子结点是否显示即可。 2.2 .NET Framework 微软公司将.NET Framework(框架)定义为：支持生成和运行下一代应用程序和 XML Web Services 的内部 Windows 组件7。.NET 框架旨在实现下列目标：提供一个 统一的面向对象的开发环境。这个开发环境支持本地代码的开发，远程对象程序的开 发，或者在本地执行但分布在 Internet 上的各种应用程序的开发；更好的解决开发应用 的版本和部署版本之间的冲突；通过框架的解决方案，可以调用未知的或第三方的代 码，实现已有系统的移植以及代码的可重复使用；使开发人员在开发各种不同类型应 用的时候，有一样的开发体验，如基于 Windows 的应用程序和基于 Web 的应用程序； 按照行业标准生成所有通信，以保证基于.NET Framework 的代码可与任何其他代码集 成。 2.2.1 .NET 框架结构 .NET Framework 主要由两个重要的组件构成：公共语言运行库 CLR 和.NET 类库。 公共语言运行库是.NET 框架的基础。可以将运行库看做是一个在执行时管理代码 的代理，它提供内存管理、线程管理和远程处理等核心服务，并且强制实施严格的类 型安全，可提高安全性和可靠性的其他形式的代码准确性。以运行库为目标的代码称 为托管代码，而不以运行库为目标的代码称为非托管代码8。 .NET 框架的另一个主要组件是类库，它是一个综合性的面向对象的可重用类型集 合，可以使用它开发多种应用程序，这些应用程序包括传统的命令行或图形用户界面 应用程序，也包括基于 ASP.NET 所提供的应用程序，如 Web 窗体和 XML Web Services。 2.2.2 ASP.NET 技术 ASP.NET 技术是.NET 框架提供的一个统一 Web 开发模型，它使用尽可能少的代 码生成企业级 Web 应用程序所必须的各种服务。ASP.NET 是.NET 框架中的一个重要 组成部分。当编写 ASP.NET 应用程序的代码时，可以访问.NET Framework 中的类， 也可以使用公共语言运行库(CLR)兼容的任何语言来编写应用程序的代码。 5 可以使用 ASP.NET 网页作为 Web 应用程序的用户界面及后台逻辑部分。 ASP.NET 网页在任何时候浏览器或者客户端设备中向用户提供信息，并使用服务器端 代码来实现应用程序逻辑。ASP.NET 有下列特点9： (1) 基于 Microsoft ASP.NET 技术。在该技术中，服务器上运行的代码动态的生成 到浏览器或客户端设备的网页输出； (2) 兼容所有浏览器或移动设备。ASP.NET 网页自动为样式、布局等功能呈现正确 的、符合浏览器的 HTML。此外，还可以将 ASP.NET 网页设计为在特定浏览器（如 IE7.0）上运行并利用浏览器特定的功能； (3) 兼容.NET 公共语言运行库所支持的任何语言，其中包括 Microsoft Visual Basic、Microsoft Visual C#、Microsoft J#和 Microsoft Jscript .NET； (4) 基于 Microsoft .NET Framework 平台，它提供了 Framework 的所有优点，包括 托管环境、类型安全性和继承； (5) 具有灵活性，可以在开发的时候向页面添加用户创建的控件和第三方控件。 在 ASP.NET 网页中，用户界面编程分为两个部分：可视组件和逻辑。可视组件由 一个包含静态标记（如 HTML 或 ASP.NET 服务器控件或两者）的文件组成。 ASP.NET 可视组件用来显示网页中的静态文本和控件。ASP.NET 网页的逻辑由代码组 成，这些代码与页面可视组件进行交互。代码可以驻留在页的标记脚本块或者单独的 类中。如果代码在单独的类文件中，则该文件称为“代码隐藏”文件。代码隐藏文件 中的代码可以使用 Visual Basic、Visual C#、Visual J# 或 Jscript .NET 编写。 在 ASP.NET 中，改变了 ASP 的脚本编程的概念，在 Web 应用的开发中引入的对 象化的概念，使得 WebForm 的开发更接近于 WinForm 的开发，同时 ASP.NET 中还提 供大量的服务端控件。各种控件的使用大大的简化及规范了各种功能的实现，使得开 发人员得以从脚本的编写中摆脱出来，去完善 Web 页面的业务逻辑的开发。 2.2.3 ASP.NET 命名空间 ASP.NET 命名空间全部位于 System.Web 下，它一共包含了七个命名空间。这些 命名空间提供了页面开发中的页面对象、缓存、配置、安全以及 Web 控件等几方面的 类。 (1) System.Web 该命名空间包含页面基本操作的类，可以利用这些类完成浏览器和 Web 服务器之 间的通信。 (2) System.Web.UI.HtmlControls 该命名空间包含的类用于使用服务器代码控制 HTML 元素。 (3) System.Web.UI.WebControls 该命名空间下包含的类可用于在网页上常见 Web 服务器控件。Web 控件在服务器 6 上运行，并包含窗体控件（如按钮和文本框）以及特殊用途的控件（如 Calendar 控件） 。 这些类能够以编程方式控制网页上的元素。 (4) System.Web.Caching 该命名空间提供用于在服务器上缓存常用资源的类。ASP.NET 缓存技术可以将页 面信息存储到服务器的内存中，无论是数据对对象还是页面的某些部分，通过使用缓 存技术，使得用户在重新访问页面的时候，对这些资源进行重复使用，从而提供了网 站的访问性能。 (5) System.Web.Configuration 该命名空间包含用于配置 ASP.NET 的类。配置文件是程序中的一个重要组成部分， 它用来描述程序中的一些特定属性，由于这些属性的变化性比较强，所以可以通过配 置文件的更改来使程序的结果发生变化。在.NET 框架中，配置文件就是一个 XML 文 件，开发人员可以通过配置文件接口来获取相关的配置文件信息，系统管理员可以通 过更改配置文件来改变应用程序的控制策略，使用配置文件最根本的好处是它的灵活 性，不会因为修改了配置文件而需要重新编译程序。 (6) System.Web.Security 该命名空间包含的类用于在 Web 服务器应用程序中实现 ASP.NET 安全性。 ASP.NET 的安全是指保护网站的安全性，防止非法用户进行恶意的破坏。对于 Web 开发人员来说，保护网站的安全是一个关键而又复杂的问题。 (7) System.Web.Services 该命名空间包含可用于 ASP.NET 创建 XML Web Services 的类。 2.2.4 ADO.NET 技术 ADO.NET 是一组向 .NET 程序员公开数据访问服务的类。ADO.NET 为创建分布 式数据共享应用程序提供了一组丰富的组件。它提供了对关系数据、XML 和应用程序 数据的访问，因此是 .NET Framework 中不可缺少的一部分。ADO.NET 支持多种开发 需求，包括创建由应用程序、工具、语言或 Internet 浏览器使用的前端数据库客户端和 中间层业务对象。 ADO.NET 对 Microsoft SQL Server 和 XML 等数据源以及通过 OLE DB 和 XML 公 开的数据源提供一致的访问。数据共享使用者应用程序可以使用 ADO.NET 来连接到 这些数据源，并检索、处理和更新所包含的数据。 ADO.NET 通过数据处理将数据访问分解为多个可以单独使用或一前一后使用的不 连续组件。ADO.NET 包含用于连接到数据库、执行命令和检索结果的.NET Framework 数据提供程序。您可以直接处理检索到的结果，或将其放入 ADO.NET DataSet 对象， 以便与来自多个源的数据或在层之间进行远程处理的数据组合在一起，以特殊方式向 用户公开。ADO.NET DataSet 对象也可以独立于.NET Framework 数据提供程序使用， 7 以管理应用程序本地的数据或源自 XML 的数据。 ADO.NET 类在 System.Data.dll 中，并且与 System.Xml.dll 中的 XML 类集成。当 编译使用 System.Data 命名空间的代码时，请引用 System.Data.dll 和 System.Xml.dll。ADO.NET 向编写托管代码的开发人员提供了类似于 ActiveX 数据对象 (ADO)为本机组件对象模块(COM)开发人员提供的功能。 (1) ADO.NET 设计目标 随着应用程序开发的发展演变，新的应用程序越来越松散地耦合，通常基于 Web 应用程序模型。如今，越来越多的应用程序使用 XML 来编码要通过网络连接传递的数 据。Web 应用程序将 HTTP 用作在层间进行通信的结构，必须显式处理请求之间的维 护状态。这一新模型大大不同于连接、紧耦合的编程风格，此风格曾是客户端/服务器 时代的标志。在此编程风格中，连接会在程序的整个生存期中保持打开，而不需要对 状态进行特殊处理。 在设计符合当今开发人员需要的工具和技术时，Microsoft 认识到需要为数据访问 提供全新的编程模型，此模型是基于.NET Framework 生成的。基于.NET Framework 这 一点将确保数据访问技术的一致性，因为组件将共享通用的类型系统、设计模式和命 名约定。 设计 ADO.NET 的目的是为了满足这一新编程模型的以下要求：具有断开式数据 结构；能够与 XML 紧密集成；具有能够组合来自多个不同数据源的数据的通用数据表 示形式；以及具有为与数据库交互而优化的功能，这些要求都是.NET Framework 固有 的内容。 在创建 ADO.NET 时，Microsoft 具有以下设计目标：利用当前的 ActiveX 数据类 型(ADO)知识；支持 N 层编程模型；集成 XML 支持。 (2) 在 ADO.NET 中连接和检索数据库 任何数据库应用程序的一项主要功能是连接数据源并检索数据源中包含的数据。 ADO.NET 的 .NET Framework 数据提供程序充当应用程序和数据源之间的桥梁，使您 可以执行命令以及使用 DataReader 或 DataAdapter 检索数据。 在 ADO.NET 中，通过在连接字符串中提供必要的身份验证信息，使用 Connection 对象连接到特定的数据源。您使用的 Connection 对象取决于数据源的类型。 .NET Framework 提供的每个.NET Framework 数据提供程序包含一个 Connection 对象： OLE DB .NET Framework 数据提供程序包括一个 OleDbConnection 对象，SQL Server .NET Framework 数据提供程序包括一个 SqlConnection 对象、ODBC .NET Framework 数据提供程序包括一个 OdbcConnection 对象，Oracle .NET Framework 数据提供程序包 括一个 OracleConnection 对象。 8 当建立与数据源的连接后，可以使用 Command 对象来执行命令并从数据源中返回 结果。您可以使用 Command 构造函数来创建命令，该构造函数采用在数据源、 Connection 对象和 Transaction 对象中执行的 SQL 语句的可选参数。也可以使用 Connection 的 CreateCommand 方法来创建用于特定连接的命令。您可以使用 CommandText 属性来查询和修改 Command 对象的 SQL 语句。 (3) 使用 SQL Server .NET Framework 数据提供程序 通过 SQL Server .NET Framework 数据提供程序，可以使用自己的内部协议访问 SQL Server 7.0 版或更高版本的数据库。该数据提供程序设计的功能与 OLE DB、ODBC 和 Oracle 的.NET Framework 数据提供程序的功能类似。 需要注意的是，要使用 SQL Server .NET Framework 数据提供程序，应用程序必 须引用 System.Data.SqlClient 命名空间。 2.3 本章小结 本章主要介绍了开发系统所需了解的背景知识，主要包括 Ajax 技术，.NET Framework。它们对下一章系统的整体设计起到了一定的参考作用，只有在充分熟悉了 本章内容的基础上才能轻松地进入下一章的阅读。 9 3 智能数字相册系统的设计 3.1 总的设计目标 本次设计的总体目标是用高效、灵活的 C#语言设计出操作性、实用性好的电子相 册软件，并能够实现图像的导入和显示、数据库索引的建立、根据关键字检索图像、 图像的分类等功能。该系统比一般的数字相册系统而言，更具有一定的智能性，例如： 当用户需要某幅相片时，可以通过简单的人机交互，或者根据用户使用记录，自动推 荐出用户可能需要的图像，使得用户可以获得一款理想的图像管理软件。 3.2 需要解决的重点问题 智能数字相册系统的特殊性使得软件的设计并不容易，主要表现在： (1) 图像数据的存储问题 图片文件不同于文本文件,它以二进制方式存放于电脑中，因此实现图片管理主要 有以下两种方式：第一种是将图片直接放入数据库对应的表中，这种方式的优点是实 现了图库合一，但这种存储方式对数据库的容量和性能要求较高；另一种方式是将图 片以文件方式存放到服务器上，并将与图片相关的信息和路径存入对应的数据表中， 这种方式缩小了表的大小,同时提高数据库操作速度，故通常被基于 B/S 的系统所广泛 采用10。本文以第二种方式为基础，详细描述如何使用 ASP.NET 来构建智能数字相 册系统。 (2) 图像的检索 图像的检索包括基于关键词的检索和基于内容的检索两种方式。 基于关键词的检索是传统的图像检索方式。对图像信息用关键词或文本方式来进 行相应的描述是不精确的，因为不同的人对同一幅图像或同一个人在不同的时间对同 一幅图像会有不同的理解，对不同的图像的描述也很难遵循相同的标准。因此当用户 输入的检索关键词与系统中对图像的描述信息不一致时，就检索不到需要的图像，从 而导致检索的失败，同时随着图像信息的剧增，其查找效率也迅速降低。 基于内容的检索式近年来研究的重点，也提出了基于图像纹理、基于图像直方图、 10 基于图像色彩控件等多种检索方式。但是，基于内容的图像检索系统具有相当的难度， 目前还没有开发出可以针对任意图像的，真正实用的基于内容的图像检索系统，有的 基于内容的图像检索系统只是针对某一类特殊的图像有效。随着技术的进步，基于内 容的图像检索是发展趋势11。开发本系统的目的是管理珍贵的历史资料图片，每幅图 像的背景资料或相关信息也是需要保存和进行图像检索的重要依据，而且需要管理的 图像五花八门，各种类别、格式、质量、大小的图像的存在使得在短时间内开发出基 于内容的图像检索系统几乎是不可能的，所以本系统采用基于关键词的检索方式。 3.3 系统数据结构的设计 数据库结构设计是在完成了描述系统各种数据之间的依赖关系和信息分类的基础 上，将各种信息转换成相应的数据项定义表。数据项定义表的作用主要是定义每个表 的表名、表中各字段的名称、数据类型长度和是否允许空，但在不同的数据库，数据 类型的表示符号和长度有所差别。本系统的数据库建表如下： (1) 图片信息表，用于存放与图片相关的信息，包括图片的编号、图片的上传用户、 图片的分类、图片名称、图片的存放路径、上传时间以及图片的描述信息等。 表 3.1 图片信息表 字段名称数据类型说明 ALBUM_ID自动编号图片编号 username文本上传用户名 ALBUM_CATEGORY文本图片分类 ALBUM_NAME文本图片名称 ALBUM_URL文本图片存储地址 postTime日期上传时间 ALBUM_DESC文本图片描述 (2) 用户信息表，用于存放用户的信息，包括用户名、用户密码、最近一次的登录 时间、允许登录时间、是否锁定、联系邮箱、是否公开以及身份证号码（可选字段）。 表 3.2 用户信息表 字段名称数据类型说明 username文本用户名 userpass文本用户密码 regTime日期最近一次的登录时间 letLoginTime日期允许登录时间 11 isLock比特是否锁定 eMail文本联系邮箱 isOpen比特是否公开 userPost文本身份证号码 3.4 系统功能设计 智能数字相册系统需要实现的功能包括用户的管理，以及图片的管理和使用等。 具体来讲，它包含用户管理中常见的注册、登录、修改用户信息；图片的管理和使用 功能主要包括图片的上传、浏览、搜索、查看图片详细信息等操作。其总体结构如下 图 3.1 所示。 智能数字相册系统 用户 管理 图片 管理 图片 检索 图 3.1 智能数字相册系统功能结构图 3.4.1 图片管理 图片管理实现的关键是将图片上传到服务器，这涉及到原始图片的上传、生成原 始图片的缩略图以及将与图片相关的信息保存到数据库等重要细节。 随着互联网的发展，各网站特别是一些 BBS 站点为丰富资源，通常会提供图像文 件的上传及显示的功能。由于用户提供的文件在格式及大小方面都不一致，尤其是图 像的大小。不合适的图像大小可能会改变网页的排版格式，使网页变得不雅观，而较大 的文件长度又会减慢网页的响应。另外，在 Web 开发中需要对用户上传的图像文件建 立相应的缩略图，这些功能的实现需要对图像文件进行处理，主要是图像文件的格式及 尺寸的调整。虽然在 HTML 标记语言中可以在img标记中加入 width 及 height 属性 来控制图像的显示大小，但 HTML 语言不能对图像大小进行判断，只能将所有的图像 以相对固定的格式来显示，不能灵活的满足多方面的要求。传统方式对于这种情况的 判断处理通常是用 JavaScript 或 VBScript 来实现，ASP.NET 的使用为灵活实现图像的 处理提供了新的途径。ASP.NET 的面向对象编程的开发方式相对于传统的脚本编程方 式比较适合 Web 站点功能模块化的需要12。本节针对在 ASP.NET 环境下实现图像文 12 件上传进行初步的探讨。 在模块的实现过程中，用户首先打开文件夹，选择准备上传的图片文件，系统提 供预览原始图片的功能。然后点击上传按钮，系统调用上传过程并将生成的缩略图保 存到服务器上相应的目录中。缩略图保持原始图片的纵横比并设定最大边长为 100 像 素。图片的名称从 URL 中提取文件名，图片的后缀保持原有后缀不变。同时，系统自 动将与该图片相关的信息保存到数据库中，图片本身则保存在程序指定的文件夹中。 在图片上传成功后，图片的信息(如文件类型、客户端文件地址、文件名、扩展名) 将 会在上传图片页面显示出来。 在 ASP.NET 中可以使用 HTML 控件和标准控件：打开文件按钮( file 类型 input , 属于 HtmlInputFile 类) 和提交按钮（Button 类型）来实现文件的上传功能。 具体的用法如下： 在打开文件按钮中增加了响应事件 Preview(this.value)，用来实现上传图片的预览 功能。 在提交按钮（Button 类型）中增加 runat =server，用以标记为在服务器端运行。 为将上传的文件在服务器上进行保存，可以使用： String fileName = System.IO.Path.GetFileName(postedFile.FileName); postedFile.SaveAs(System.Web.HttpContext.Current.Request.MapPath(“Files/“) + fileName); HtmlInputFile 的成员 PostedFile 属于 HttpPostedFile 类,该成员提供对上传文件的操 作接口，本例使用 HttpPostedFile 的成员函数 SaveAs 对上传文件进行保存，同时将上 传图片的信息写入数据库。 本系统的上传文件页面可以实现多个文件同时上传， 其中 addFile()的函数处理流程如下： 1) 增加打开文件按钮( file 类型 input，属于 HtmlInputFile 类)和提交按钮（Button 类型） var str = 2) 预览图片 onchange=“Preview(this.value)“; document.getElementById(MyFile).insertAdjacentHTML(“beforeEnd“, str); 3) 图片描述部分的内容 document.getElementById(txtAlbumDesc).nodeValue=“; 同时，若在上传过程中需要临时改变上传文件，还可以点击重置按钮，即将页面 13 数据恢复到原始状态。 3.4.2 图片检索 本节将仿照 Google Suggest，使用 Ajax 技术实现动态获取搜索提示的功能。与传 统的搜索相比，使用 Ajax 技术的搜索提示，能及时地给用户提供参考的关键字。对用 户来说，无需提交页面就可以获得提示，节省了大量的时间。 当用户需要查看数据库服务器中的某些特定图片时,可以通过图片检索模块快速定 位到需要查找的图片。本模块提供按图片名称作为关键字的图片查询，系统在图片记 录数据表中进行关键字模糊匹配检索，并返回检索到的所有缩略图，进行分页显示。 考虑到用户在检索图片时更关注图片本身的内容，系统采用可分页的 DataList 控件来 显示查询结果(包括缩略图)，同时使用新页面来显示原始图片及其相关信息，新页面 中采用的是 DetailsView 控件绑定数据实现的。 (1) 基本原理分析 搜索提示的基本原理是：当用户每输入完一个关键字时，便向服务器发送请求， 服务器端根据用户当前输入的关键字，在数据库中搜索相关的关键字信息，并返回给 客户端13。在实现搜索时需要注意以下几点： 1) 当键盘释放时，也就是使触发 onkeyup 事件时，需要向服务器发送请求； 2) 需要关闭文本框浏览器自带的提示，以免影响搜索提示，也就是要将文本框 属性设置为：autocomplete=”off”； 3) 当出现搜索提示后，将选中的搜索提示突出显示，以示区别。这种效果可以通 过改变 CSS 来实现。 14 客户端 服务器端 输入关键字 处理请求 处理返回 数据 发送XMLHTTPRequest请求 返回数据 图 3.2 搜索提示基本原理示意图 (2) 客户端原理分析 在搜索提示的界面文件上，包括一个输入框和一个提交按钮。其中输入框用来输 入关键字。 在以上的方法中可以发现，当输入框触发 onkeyup 事件时会调用 searchSuggest()方 法，该方法取回所需要的数据，客户端获取数据的流程如图 3.3 所示。 触发onkeyup事件 调用searchSuggest()方法向服务 器发送XMLHTTPRequest请求 服务器返回数据后，调用 handleSearchSuggest()方法处理返回数据 15 图 3.3 客户端处理数据流程图 searchSuggest()方法的作用是向服务器发送请求。使用该方法前，要先定义一个 XMLHttpRequest 对象，然后创建该对象。需要注意的是，该方法要根据不同浏览器返 回不同的 XMLHttpRequest 对象。 返回后的数据通过 handleSearchSuggest()方法来处理。该方法首先将返回的数据分 割成数组，然后将数组中的数据组织成 HTML 代码的格式，最后显示到搜索结果的图 层中。整个方法的逻辑处理流程如图 3.4 所示。 将数据以“|”分割成数组， 数组中存放的就是搜索提示 循环数组，将数组中的 数据转化成HTML代码格式 替换搜索提示图层的内容 同时，为每一 条提示添加 suggestOver 和suggestOut 事件 （设置样式） 图 3.4 handleSearchSuggest()方法逻辑处理流程图 suggestOver()和 suggestOut()方法是改变鼠标移动和移出该选项时的 CSS 样式表。 当用户输入“L”时，客户端如下图所示： 图 3.5 输入关键字后的客户端 服务器端返回的字符串如下： 16 Landscape five|Landscape four|Landscape one|Landscape six|Landscape three|Landscape two|landscape14a.jpg| 然后，将上述字符串以“|”将其分割成若干子串，存入数组中，循环该数组，将 数组中的内容显示到前台的 div 层中。 由于服务器端可以实现模糊搜索，于是当用户输入“L”后，点击 Search 按钮， 数据库图片关键字中所有以字母“L”开头的图片将会显示在页面上。 (3) 服务器端原理分析 客户端发送查询关键字的请求后，服务器端使用 doPost()方法处理该请求，注意需 要在服务端页面设置 AutoEventWireup=“false“，否则服务器端会处理两次客户端的请 求。 服务器端接收到该请求后，首先获得用户输入的关键字，然后查询数据库，并将 查询结果保存到 ArrayList 中，最后将 ArrayList 中的数据组织成客户端所需要的格式， 返回给客户端14。doPost()方法处理的逻辑流程如下图所示。 获得请求中的search参数的值 查询数据库，将 查询结果保存在ArrayList中 循环数组中的值， 组织成客户端的数据格式 图 3.6 图像检索服务器端处理逻辑流程图 当点击某一幅图片时或其名字说明时，将进入另一页面，该页面显示图片在数据 库中的详细信息。图片搜索页面运行后的效果如第四章图 4.5，图 4.6 所示。 3.4.3 图片浏览 本节将使用 Ajax 技术实现无刷新即可浏览图片。浏览图片时，自动向服务器端发 送请求，查询该类别下的照片，并显示到客户端。用户也可以根据喜好随时改变相册 的风格。浏览相片的整个过程无需刷新页面。第四章图 4.4 所示为相册浏览页面的示意 图。 （一） 基本原理分析 (1) 界面设计分析 在图 4.4 所示的的页面中，每个选项卡对应相片的一个分类，单击该选项卡时可以 获得该分类的所有图片。当单击某个图片时，图片将放大显示。选项卡是由无序列表 17 元素来实现的，每个选项卡中的图片是由嵌套的元素显示的。 以选项卡的第二个选项为例： Trees 图 3.7 为未单击选项卡时的效果，图 3.8 为单击了 Trees 选项卡时的效果，如图所 示。 图 3.7 单击之前的选项卡 图 3.8 单击 Trees 后的选项卡 每一个选项卡是一个元素，设置该元素的 CSS 可以使之呈现上图中的效果。 当鼠标移动到 Trees 选项时，调用 getPictures(tree)方法。该方法的作用是，创建 一个 XMLHttpRequest 对象，并向服务器发送该请求。该方法的处理流程如下： 1) 首先需要定义全局变量 ajaxObject，保存 XMLHttpRequest 对象； 2) 创建 XMLHttpRequest 请求：ajaxObject = createAja