基于Web的在线图像处理应用

PAGE8PAGEiv-PAGEiv-ADDINCNKISM.UserStyle题目：基于Web的在线图像处理应用摘要随着计算机和Internet的快速发展，数字图像广泛应用于日常生活，人们对数字图像加工处理的需求也急速增长，大量本地图像处理软件应运而生。而新近HTML5标准的发布，为数字图像处理的动态网页实现打开了一扇大门。HTML5中的Canvas标签可以让我们使用脚本进行绘图，它提供了一系列完整的属性和方法，可以借此来实现图形绘制、图像处理、实现简单的动画和游戏制作。为满足网民在线快速处理图像的需求，本文运用MVC的设计思想，基于JavaScript、HTML5以及CSS3，设计并实现一个基于Web的在线图像处理应用。该应用提供如下功能：色彩调整、锐化平滑、对比度调整、亮度调整、风格化等；编辑时可以前后比较、取消和恢复原始图片；可通过HTML编写在线图像处理应用的基础模块；使用JavaScript的jQuery框架方便实现动态交互；通过拖拽图片或者从文件夹打开的方式上传要处理的图片。论文主要内容包括：项目背景、国内开发现状及开发目标；Canvas标签的特性、项目用到的关键API、基础的图像处理原理、个性化特效的实现方法和加速JavaScript开发过程的库jQuery；核心业务的建模过程；项目的架构图和用户用例；图像处理类和用户交互控制类的实现过程；系统运行环境、部署方法；总结并对下一步的工作进行展望。关键词： 图像处理；数字图像；HTML5；Canvas；网页应用

AbstractWiththerapiddevelopmentofcomputerandInternet,digitalimageiswidelyusedindailylife.People'sdemandfordigitalimageprocessingisalsogrowingrapidly.Alargenumberoflocalimageprocessingsoftwarearisesatthehistoricmoment.Recently,thereleasingHTML5hasopenedthedoorfordigitalimageprocessingandbuildingdynamicwebpage.CanvastagintheHTML5allowsustousescripttocarryondrawing,itprovidesacompletesetofpropertiesandmethodsthatcanbeusedtoachievegraphicsrendering,imageprocessingandrealizethesimpleanimationandgameproduction.TomeettheneedsofInternetusers’onlineImageprocess,thisapplicationdesignusestheMVCdesignideas,basedonJavaScript,HTML5andCSS3.Itprovidesacoloradjustment,sharpenfuzzy,contrast,brightnessadjustment,stylized,andprocessingfunctions,editoratthesametimealsocancomparebeforeandafter,cancellation,andrestoretheoriginalimage.ItusesHTMLtocodingmodule,usesCSStocontroltheviewpart,andusesthejQuerywhichisaconvenientJavaScriptframeworktofinishdynamicinteraction.Userscandraganddropimagesorfromthefoldertoopenthewaytouploadtheimagetobeprocessed.Papermainlyincludes:projectbackground,thedomesticdevelopmentpresentsituationanddevelopmentgoals;Canvastagfeatures,thekeyofthebasicprincipleoftheimageprocessingoftheAPI,andpersonalizedspecialrealizationmethodandspeeduptheJavaScriptlibraryjQuerydevelopmentprocess;Thecorebusinessofthemodelingprocess;Architecturediagramanduserusecasesoftheproject;Imageprocessingclassandcontrolclassofuserinteractionprocess;Systemrunningenvironment,deploymentmethod;Summaryandoutlookforthenextstepwork.Keywords: ImageProcess;DigitalImage;HTML5;Canvas;WebApplicationPAGE8目录第一章 前言 11.1 项目的背景和意义 11.1.1. 数字图像处理概论 11.1.2. Web应用与HTML5 11.1.3. 项目的意义 21.2 研究开发现状分析 21.2.1. 本地数字图像处理 31.2.2. Web平台的数字图像处理 31.3 项目的目标和范围 51.4 论文结构简介 5第二章 技术与原理 62.1 CanvasAPI简介 62.1.1. HTML5Canvas概述 62.1.2. 使用HTML5Canvas 72.2 数字图像处理技术简介 102.2.1. 图像基础知识 102.2.2. RGB 102.2.3. HSI 112.2.4. 亮度对比度 122.3 jQuery简介 132.3.1 jQuery是什么 132.3.2 为什么使用jQuery 132.3.3 使用jQuery 14第三章 需求建模 153.1 功能分析 153.2 用例分析 153.3 用例图 203.4 功能逻辑图 21第四章 架构设计 224.1 整体架构及原理 224.2 UI设计 234.3 用例实现 244.3.1 导入图像 244.3.2 修改图像RGB属性 264.3.3 风格化图像 274.3.4 保存图像 28第五章 模块设计 305.1 模块介绍 305.2 UI模块 305.3 应用控制模块 315.4 图像处理模块 335.4.1. 锐化 335.4.2. 平滑 345.4.3. 怀旧 355.4.1. 黑白照 355.4.2. 曝光过度 355.4.3. 底片 355.4.4. 浮雕 36第六章 部署与应用 376.1 项目部署 376.2 项目应用 38第七章 结论 39致谢 41参考文献 42PAGE42-前言项目的背景和意义数字图像处理概论数字图像处理（DigitalImageProcessing）是利用数字计算机或则其他数字硬件，对从图像信息转换而得到的电信号进行某些数学运算，以提高图像的实用性[1]。例如从卫星图片中提取目标物的特征参数，三维立体断层图像的重建等。总的来说，数字图像处理包括点运算、几何处理、图像增强、图像复原、图像形态学处理、图像编码、图像重建、模式识别等。目前数字图像处理的应用越来越广泛，已经渗透到工业、医疗保健、航空航天、军事等各个领域，在国民经济中发挥越来越大的作用。Web应用与HTML5Web应用程序(WebApplication)是指由浏览器支持的语言（如HTML,JavaScript等）编写的在线应用，这些应用需要通过浏览器执行。Web应用本身的特点包括：立即部署、跨平台、采用逐步下载来检索内容和数据、实时互动的声音和图像，以及可以充分利用被广泛采纳的互联网国际标准。随着技术的发展，Web应用逐渐具备了桌面应用程序的特点：在消息确认和格式编排方面提供互动用户界面；在无刷新页面之下提供快捷的界面响应时间；提供通用的用户界面特性，如“拖放式”操作以及在线和离线操作能力。Web应用能力的增强，可使应用平台从传统操作系统向浏览器操作系统平滑过渡，“未来重要的不再是占据用户的桌面，而是占据用户的浏览器”[2]。HTML5就是为了Web应用而生的。HTML5草案的前身名为WebApplications1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。HTML5的第一份正式草案已于2008年1月22日公布。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持。2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”支持Html5的浏览器包括Firefox（火狐浏览器）、IE9及其更高版本、Chrome（谷歌浏览器）、Safari、Opera等；国内的有“傲游”浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。HTML5本身是由W3C推荐出来的，它的开发是通过谷歌、苹果，诺基亚、中国移动等几百家公司一起酝酿的技术，这个技术最大的好处在于它是一个公开的技术。换句话说，每一个公开的标准都可以根据W3C的资料库找寻根源。另一方面，W3C通过的HTML5标准也就意味着每一个浏览器或每一个平台都会去实现。用HTML5的优点主要在于这个技术可以进行跨平台的使用，比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到AppStore或GooglePlay上，所以它的跨平台非常强大，也是大多数人对HTML5有兴趣的主要原因。在HTML5的诸多新特性中，HTML5Canvas是其中最吸引人的特性之一。它由JavaScript脚本进行控制，可以动态的绘制出各种2D图形，甚至可以对图像像素进行任意处理。本项目即是基于使用Canvas标签，通过JavaScript控制处理图片的像素，从而在Web平台上无插件的实现图像处理[3]。项目的意义随着计算机和Internet的快速发展，数字图像广泛应用于日常生活，人们对数字图像加工处理的需求也急速增长，因此出现了许多图形图像处理软件，其中Photoshop就是一款深受众人喜爱的图像处理软件，但这些软件都只能在本地机器上使用，无法直接通过互联网处理图像，这给许多网民带来不便.本人认为开发设计一个基于Web的图像处理系统十分必要，可以让普通用户轻松地通过浏览器直接对图像进行处理。在Canvas加入HTML5标准之前，要想实现动态的网页应用，只能借助于第三方的插件，比如Flash或Java，而引入了Canvas标记后，就直接打通了通往神奇的动态应用网页的大门，步入Web图像处理时代。用户无需安装任何软件或者插件，只需一台电脑，一个支持HTML5格式的浏览器，即可轻松在线编辑和修改图片。研究开发现状分析数字图像处理，就是用一系列特定的操作来改变图像的像素，以达到预期的目的[1]。能够进行图像处理的软件有很多，但大多通用的图像处理软件，一般是用来提高视觉感受的，而实际的图像处理工作主要是针对不同的应用领域，需要不同的图像处理算法，因此用户需要根据自己的专业领域选择适当的算法来处理图像。先分析现阶段本地数字图像处理途径，再分析Web平台的数字图像应用。本地数字图像处理MATLABMathWorks公司推出的MATLAB软件是学习数理知识的好帮手。它是基于矩阵运算的程序设计语言的一种，在处理图像方面，MATLAB有着其他程序设计语言所不能比拟的地方，但是MATLAB并不是一个专门针对图像处理领域的软件，所以其优缺点简单归并如下：1）MATLAB语言不支持编译系统，边解释边执行，所以其语言执行效率低下，但其丰富的内置函数和高速的计算机处理器可以弥补这一方面的缺陷。2)MATLAB类似“DOS”语言，其本身具有面向对象风格的交互开发环境，但在使用MTALAB开发图像处理软件时，在界面实现方面并不是很容易，MATLAB支持与C/C++语言等其他语言的应用程序接口，目前国内外已经展开MATLAB与VC++的集成开发平台方面的研究，并取得一定的成果。3)MATLAB具有强大的内置图像处理函数和矩阵运算函数，这就使图像处理变得简单，使我们把更多的精力放在算法设计上。4)MATLAB可以通过pixvalon命令来动态显示图像的灰度值，这对于某些算法设计很重要[4]。VisualC++作为主流的应用程序开发环境的VC提供可视化的集成开发环境、高效的编译器以及功能强大的应用程序框架MFC,利用它可以轻松地开发出高效强大的Windows应用程序，且其应用程序具有界面友好、代码效率高、执行速度快、维护升级容易等优点，这使得VC在应用程序设计领域得到了广泛的应用,然而,作为一种主流的软件开发平台,在数字图像处理（特别是含有大量矩阵运算及图像处理）的应用程序时,使用VC开发则会非常繁琐，程序十分复杂[5]。Web平台数字图像处理在互联网快速发展的今天，互联网站点已不仅仅是一些在线的静态页面，用户可以在网上购物、社交、互动游戏等。网页已不再是简单的HTML页面，而是由许多来自第三方的动态内容组成的富应用。软件业正稳步向SAAS（Software-As-A-Service,软件即服务）的方向发展．传统的桌面应用提供的功能，都能通过在线服务（Web应用程序）提供，易部署、跨平台的特点使得Web应用的优势变得越来越明显。作为互联网的入口——浏览器正逐渐扮演着应用平台的角色。Web应用和“云”技术的发展正在让浏览器“取代”操作系统的进程加速[6]。FlashFlash作为一个二维动画制作软件,无论在商业、教育还是其它领域都得到广泛应用,尤其是它作为流式媒体所具有的特点,在网络普及的今天,更是如鱼得水。在Internet上每打开一个网页,其中的动态效果,有半数以上都是Flash在起作用。新浪、搜狐等大型门户网站上的商业广告(弹出式窗口动画),其华美、精致的画面和令人眩目的动态效果,几乎全部得益于Flash。Flash上手比较容易,但是较多用于二维动画的制作,真正将其用于图像处理中的却不多。Flash在图像处理中的应用主要体现在几个方面:绘制美观的矢量图形、颜色丰富与实际接近(即可填充渐进色)、字迹清晰、最后可以生成BMP、JPEG等格式的图形[7]。“美图秀秀网页版”就是使用了Flash插件实现的在线图像处理。HTML5作为一个新兴技术HTML5已经成为移动应用的核心技术推动力，HTML5有可能成为所有程序的基础，未来足以构建HTML5生态系统，抗衡Native生态系统。就像乔布斯曾经预言的一样，“虽然现阶段Native应用给了用户更好的体验，但Web才是未来。”[8]而基于HTML5的Web应用是有资本同传统应用叫板的，这主要是因为HTML5具备十分强大的优势，跨平台、快开发。2013年3月30日，腾讯Web前端AlloyTeam推出了与本人的思路相似的开源项目：一个基于HTML5技术的专业级图像处理引擎--AlloyImage(简称AI)，以及一个在线Web图像处理平台--AlloyPhoto(简称AP)。AlloyImage是一个使用JavaScript语言开发的，基于Web的在线图像处理引擎，除了核心底层图像处理引擎，还同时集成了一些方便快捷的图像处理API，用户可以将它简单快捷的引用到Web网页中，做出与PhotoShop一样的优美效果。还可以用AlloyImage来开发一个Web在线图像处理软件[9]。项目的目标和范围本项目是在Web平台上，使用jQuery方便JavaScript开发，与HTML5结合实现数字图像处理操作，并以这种处理技术为基础构建一个交互应用。用户打开应用后，从本地上传图像，根据喜好选择应用提供的操作对图像进行处理，得到处理过的图像。本项目为用户提供了多样功能。（如表1-1）表1-1应用主要功能主要功能选项HSI饱和度、色调、强度亮度/对比度亮度、对比度RGB红通道、绿通道、蓝通道滤镜效果锐化、平滑个性化怀旧、黑白照、曝光过度、底片、浮雕论文结构简介全文分为七章。第一章是前言，主要介绍项目背景，国内开发现状及开发目标。第二章是技术与原理，主要介绍Canvas标签的特性，项目用到的关键API，基础的图像处理原理，个性化特效的实现方法和加速JavaScript开发过程的库jQuery。第三章是需求建模，介绍项目的核心业务的建模过程。第四章是架构设计，展示项目的架构图和用户用例。第五章是模块设计，介绍本项目的两个大类：图像处理类和用户交互控制类。第六章是部署与应用，说明系统运行环境，部署方法，系统特色及使用方法。第七章是结论，对本文和基于Web的在线图像处理应用进行总结，对下一步的工作进行展望。

技术与原理CanvasAPI简介HTML5Canvas概述历史Canvas的概念最初是由苹果公司提出的，用于在MacOSXWebKit中创建控制板部件（dashboardwidget）。在Canvas出现之前，开发人员若要在浏览器上使用绘图API，只能使用Adobe的Flash和SVG(ScalableVectorGraphics，可伸缩矢量图形)插件，或者很自由IE才可支持的VML（VectorMarkupLanguage，矢量标记语言），以及其他一些稀奇古怪的JavaScript技巧。HTML5Canvas能够提供一套二维绘图API，对浏览器来说此功能非常有用，因此Canvas被纳入了HTML5规范。起初，苹果公司曾暗示可能会为WHATWG(WebHypertextApplicationTechnologyWorkingGroup，Web超文本应用技术工作组)草案中的Canvas规范申请知识产权。不过，苹果公司最终还是按照W3C的免版税专利权许可条款公开了其专利[3]。简介在网页上使用Canvas元素时，他会创造一块矩形区域。默认情况下该矩形区域宽为300像素，高为150像素也可以自定义具体的大小或者设置Canvas元素的其他特性。在页面中加入了Canvas元素后，我们便可以通过JavaScript来自由地控制它。可以在其中添加图片、线条及文字。使用Canvas变成首先要获得其上下文（context），接着在上下文中执行动作，最后将这些动作应用到上下文中。如图2-1所示，Canvas中的坐标是从左上角开始的，x轴沿着水平方向按像素向右延伸，y轴沿垂直方向向下延伸。左上角坐标为x=0，y=0的点称作原点[10]。图2-1canvas中的x、y坐标浏览器支持情况HTML5Canvas规范已经非常成熟，不会有特别大的改动。如表2-1所示，现在所有浏览器厂商都提供了对HTML5Canvas的支持，而且它已被大多数用户所掌握[3]。表2-1浏览器对HTML5Canvas的支持浏览器支持情况Chrome从1.0版本开始支持Firefox从1.5版本开始支持InternetExplorer从IE9开始支持Opera从9.0版本开始支持Safari从1.3版本开始支持使用HTML5Canvas关键操作在画布中访问像素的方法是getImageData。这个方法有四个参数：要访问的像素区域原点坐标（x,y）、像素区域的宽度和高度。它可以用代码表示为：context.getImageData(x,y,width,height);调用该方法会返回一个2D渲染上下文ImageData对象。这个ImageData对象包含3个属性；width表示所访问像素区域的宽度，height表示像素区域的高度，data是一个包含所访问区域中全部像素信息的CanvasPixelArray。CanvasPixelArray是一个JavaScript一维数组。每个像素用4个整数值表示，范围从0至255，分别表示红(r)、绿(g)、蓝(b)和阿尔法值(α)。所以数组的前四项是第一个像素的颜色值，接下来4项是第二个像素的颜色值，以此类推[10]。CanvasAPIHTML5CanvasAPI为修改Web应用外观提供了强大的功能，它还可以通过自由组合图像，渐变和复杂路径等方式来创建你能想到的几乎所有效果。如图2-2~2-5所示为CanvasAPI手册。图2-2CanvasAPI中文手册（1）图2-3CanvasAPI中文手册（2）图2-4CanvasAPI中文手册（3）Canvas的安全机制节讨论了直接操纵像素数据的方法，虽然大多数开发者都会合法使用像素数据操作，但还是会有人出于邪恶目的利用这种从Canvas直接获取并且修改数据的能力。出于这个原因，origin-cleancanvas的概念应运而生，如果canvas中的图片并非来自包含它的页面所在的域，页面中的脚本将不能取得其中的数据。在开发中要注意这个限制条件，使用安全的渲染方式[3]。数字图像处理技术简介图像基础知识图像是对客观对象的一种相似性的、生动性的描述或写真。或者说图像是客观对象的一种表示，它包含了被描述对象的有关信息。它是人们最主要的信息来源。据统计，一个人获取的信息大约有75%来自视觉[1]。图像根据其形式或产生方法来分类。从人眼的视觉特点上可将图像分为可见图像和不可见图像。其中可见图像的一个子集为图片，它包括照片、用线条画的图和画；另一个子集为光图像，即用透镜、光栅和全息技术产生的图像。不可见的图像包括不可见光成像和不可见量，如温度、压力及人口密度等的分布图[1]。按波段多少图像可分为低波段、多波段和超波段图像。低波段图像上每点只有一个亮度值；多波段图像上每点不只一个特性。例如红、绿、蓝三波段光谱图像或彩色图像上的每个点具有红、绿、蓝三种亮度值，这三个值表示在不同光波段上的强度，人眼看来就是不同的颜色。超波段图像上每个点具有几十或几百个特性[1]。按图像空间坐标和明暗程度的连续性可分为模拟图像和数字图像。模拟图像指空间坐标和明暗程度都是连续变化的、计算机无法直接处理的图像。数字图像是一种空间坐标和灰度均不连续的、用离散的数字（一般用整数）表示的图像。这样的图像才能被计算机处理。RGB自然界中的绝大多数的颜色都可看作是由红、绿、蓝三种颜色组合而成；自然界中的绝大多数的颜色都可以分解成红、绿、蓝这三种颜色。这即是色度学中的三基色原理。RGB模型是实际中最通用的面向硬件的彩色模型。在RGB模型中，每种颜色出现在红绿蓝的原色光谱分量中，这个模型基于笛卡尔坐标系统，所考虑的彩色子空间是图2-5所示的立方体[1]。图25RGB彩色立方体示意图HSIHSI（hue-saturation-intensity）彩色模型比较适合于人用色调（H）、饱和度（S）和亮度（I）描述被观察物体颜色的解释，对于开发基于彩色描述的图像处理方法是一个理想的工具。如图2-6为基于圆形彩色平面的HIS彩色模型[1]。图26基于圆形彩色平面的HSI彩色模型RGB彩色模型到HSI彩色模型的转换公式：亮度对比度图像亮度本质上图像中每个像素的亮度，每个像素的亮度本质上RGB值的大小，RGB值为0是像素点为黑色，RGB都为255时像素点最亮，为白色。对比度则是不同像素点之间的差值，差值越大，对比度越明显。从直方图分析的观点来看，对比度越好的图片，直方图曲线会越明显，分布也越显得均匀[1]。亮度处理公式：V：调整后的颜色值，V'：原颜色值，C：亮度调整系数（-1<=C<=1）。对比度处理公式：V：调整后的颜色值，V'：原颜色值，C：对比度调整系数（-1<=C<=1），M：图像的RGB像素均值，为加快处理速度一般取127。jQuery简介jQuery是什么jQuery是一个兼容多浏览器的JavaScript库，核心理念是writeless,domore(写的更少,做的更多)。它实际上是对JavaScript中最复杂和最耗时的任务的一个简单封装，如遍历DOM（DocumentObjectModel，文档对象模型）、事件处理和动画。jQuery在2006年1月由美国人JohnResig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，现在由DaveMethvin率领团队进行开发。如今，jQuery已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery[11]。为什么使用jQueryjQuery实现脚本与页面的分离。jQuery让最少的代码做最多的事情。使用它的高级selector，开发者只需编写几行代码就能实现令人惊奇的效果。开发者无需过于担忧浏览器差异，它不仅完全支持Ajax，而且拥有许多提高开发者编程效率的其它抽象概念。jQuery把JavaScript带到了一个更高的层次。在大型JavaScript框架中，jQuery对性能的理解最好。尽管不同版本拥有众多新功能，其最精简版本只有18KB大小，这个数字已经很难再减少。jQuery的每一个版本都有重大性能提高。业内对jQuery的支持已经非常广泛。谷歌不但自己使用它，还提供给用户使用。另外戴尔、新闻聚合网站Digg、WordPress、Mozilla和许多其它厂商也在使用它。微软甚至将它整合到VisualStudio中。如此多的重量级厂商支持该框架，用户大可以对其未来放心，大胆的对其投入时间。基于jQuery开发的插件目前已经有大约数千个。开发者可使用插件来进行表单确认、图表种类、字段提示、动画、进度条等任务。jQuery社区已经成长为一个生态系统。这一点进一步证明了上一条理由，它是一个安全的选择。而且，jQuery正在主动与“竞争对手”合作，例如Prototype。它们似乎在推进JavaScript的整体发展，而不仅仅是在图谋一己之私[12]。使用jQueryjQuery库是一个单独的JavaScript文件，可以保存到本地或者服务器直接引用，也可以从多个公共服务器中选择引用。有MediaTemple、Google、Microsoft等多家公司给jQuery提供CDN服务，比较常用的引用地址如图2-9。图2-9jQuery链接方法目前的版本是1.9.0（截止2013年1月）[11]需求建模功能分析本应用为用户提供了一个对图像进行一些基本处理的平台。用户打开应用后，通过上传本地图片进入编辑界面。在编辑界面，用户使用应用提供的处理方式对图像进行操作，获得处理后图片，用户可以取消处理操作、比较处理效果和保存处理后的图像。本应用为用户提供的功能如表1-1。用例分析用例是文本形式的情节描述，广泛应用于需求的发现和记录工作中[13]。本应用的用例如表3-1至表3-11。表3-SEQ表3-\*ARABIC1用例01用例编号(Number)01用例名称(Name)导入图像信息级别（Level）用户目标执行者(Actors)用户前置条件(Pre-Condition)应用已打开，进入初始界面后置条件(Post-Condition)图像导入，进入图像编辑界面用例场景

(Use-CaseScenario)用户打开应用；用户从本地将图片拖入应用；系统进行合法性检测；图像导入应用，进入图像编辑界面。扩展事件（Extensions）2a.用户也可以选择“打开文件夹”，从文件夹中选择图像。3a.如果检测传入文件不是合法图像格式：1.弹出警告；2.退回场景2。表3-SEQ表3-\*ARABIC2用例02用例编号(Number)02用例名称(Name)处理图片HSI属性级别（Level）用户目标执行者(Actors)用户前置条件(Pre-Condition)用户已加载完图片，进入编辑界面后置条件(Post-Condition)图片依据用户的操作进行处理用例场景

(Use-CaseScenario)用户点击HIS工具；显示HSI子选项；用户调整滑动条按钮的位置相应的调整饱和度、色调、强度数值；显示图像处理后效果；用户点击应用按钮，图片被处理，滑动条按钮恢复原位。扩展事件（Extensions）1a.若用户存在未应用或未取消的处理操作，弹出警告；5a.用户点击取消按钮，图片恢复原状，滑杆按钮恢复原位表3-3用例03用例编号(Number)03用例名称(Name)处理图片亮度/对比度级别（Level）用户目标执行者(Actors)用户前置条件(Pre-Condition)用户已加载完图片，进入编辑界面后置条件(Post-Condition)图片依据用户的操作进行处理用例场景

(Use-CaseScenario)用户点击亮度/对比度工具；显示亮度/对比度子选项；用户调整滑动条按钮的位置相应的调整饱亮度、对比度数值；显示图像处理后效果；用户点击应用按钮，图片被处理，滑动条按钮恢复原位。扩展事件（Extensions）1a.若用户存在未应用或未取消的处理操作，弹出警告；5a.用户点击取消按钮，图片恢复原状，滑杆按钮恢复原位表3-4用例04用例编号(Number)04用例名称(Name)处理图片RGB属性级别（Level）用户目标执行者(Actors)用户前置条件(Pre-Condition)用户已加载完图片，进入编辑界面后置条件(Post-Condition)图片依据用户的操作进行处理用例场景

(Use-CaseScenario)用户点击RGB工具；显示RGB子选项；用户调整滑动条按钮的位置相应的调整红绿蓝通道数值；显示图像处理后效果；用户点击应用按钮，图片被处理，滑动条按钮恢复原位。扩展事件（Extensions）1a.若用户存在未应用或未取消的处理操作，弹出警告；5a.用户点击取消按钮，图片恢复原状，滑杆按钮恢复原位表3-5用例05用例编号(Number)05用例名称(Name)锐化/模糊图片级别（Level）用户目标执行者(Actors)用户前置条件(Pre-Condition)用户已加载完图片，进入编辑界面后置条件(Post-Condition)图片依据用户的操作进行处理用例场景

(Use-CaseScenario)用户点击滤镜工具；显示滤镜子选项；用户调整滑动条按钮的位置相应的调整锐化、模糊数值；显示图像处理后效果；用户点击应用按钮，图片被处理，滑动条按钮恢复原位。扩展事件（Extensions）1a.若用户存在未应用或未取消的处理操作，弹出警告；5a.用户点击取消按钮，图片恢复原状，滑杆按钮恢复原位表3-6用例06用例编号(Number)06用例名称(Name)风格化图片级别（Level）用户目标执行者(Actors)用户前置条件(Pre-Condition)用户已加载完图片，进入编辑界面后置条件(Post-Condition)图片依据用户的操作进行处理用例场景

(Use-CaseScenario)用户点击风格化工具；显示风格化选项；用户选择为怀旧、黑白照、曝光过度、底片、浮雕等效果；显示图像处理后效果。扩展事件（Extensions）1a.若用户存在未应用或未取消的处理操作，弹出警告；表3-7用例07用例编号(Number)07用例名称(Name)撤销处理操作级别（Level）用户目标执行者(Actors)用户前置条件(Pre-Condition)用户已加载完图片，进入编辑界面后置条件(Post-Condition)图片恢复一次操作前状态用例场景

(Use-CaseScenario)用户点击撤销按钮；图片取消前一次处理操作。扩展事件（Extensions）1a.如果没有处理操作，保持原图；表3-8用例08用例编号(Number)08用例名称(Name)对比图像级别（Level）用户目标执行者(Actors)用户前置条件(Pre-Condition)用户已加载完图像，进入编辑界面后置条件(Post-Condition)图片依据用户的操作进行处理用例场景

(Use-CaseScenario)用户点击对比按钮；图片左半边显示为处理后的图像的左半边，右半边显示为原图的左半边。扩展事件（Extensions）2a.用户点击撤销按钮，图片恢复为原图表3-9用例09用例编号(Number)09用例名称(Name)重置图像级别（Level）用户目标执行者(Actors)用户前置条件(Pre-Condition)用户已加载完图像，进入编辑界面后置条件(Post-Condition)显示原始图像用例场景

(Use-CaseScenario)用户点击重置按钮；处理区图像恢复为原始图像。扩展事件（Extensions）无表3-10用例10用例编号(Number)10用例名称(Name)保存图像级别（Level）用户目标执行者(Actors)用户前置条件(Pre-Condition)用户已加载完图像，进入编辑界面后置条件(Post-Condition)在新标签页显示待保存图像用例场景

(Use-CaseScenario)用户点击保存按钮；弹出新标签页，新标签页显示处理后的图像。扩展事件（Extensions）无表3-11用例11用例编号(Number)11用例名称(Name)载入新图像级别（Level）用户目标执行者(Actors)用户前置条件(Pre-Condition)用户已加载完图像，进入编辑界面后置条件(Post-Condition)返回初始界面用例场景

(Use-CaseScenario)用户点击载入新图像按钮；返回初始界面。扩展事件（Extensions）无用例图用例图是表现一组用例、参与者以及他们之间关系的图[13]。用例图如图3-1。图3-1本项目用例图功能逻辑图功能逻辑图如图3-2所示。图3-2应用功能逻辑图架构设计整体架构及原理本应用采取MVC架构。M,即Model。用JSclass来表示，主要是应用界面操作与业务功能逻辑。V，即View。这就是HTML与CSS，用来渲染页面，提供DOM结构。C，即Controller。这里的控制器并非真正的控制器，也没有核心的控制功能。更多是一个Action，提供接收数据、转发请求。每一个页面都对应一个Action，有时的一个功能模块也适合一个单独的Action。一个页面可以只有一个Action，也可以包含多个功能的Action进来。这样基于页面的所有请求与转发都来自一个Action统一入口。应用整体架构图如图4-1所示。图4-1整体架构图UI设计本应用采用“甜味马蒂尼”配色，如图4-2。这种搭配由纯度适中的色彩组成，虽然色彩丰富，但是因为纯度的先知，并不会造成突兀的视觉冲击。图4-2“甜味马蒂尼”配色图应用的初始界面如图4-3所示。初始界面为用户提供了两种导入图像方式。1.将图片拽入上方的大矩形内2.打开文件夹寻找图像。图4-3应用初始界面编辑界面如图4-4所示。左侧为图像处理面板，下方为操作控制面板。图中的图像为用户上传处理的图像。图4-4应用编辑界面用例实现用顺序图详细描述用例的实现，选择了具有代表性的“导入图像”、“修改图像RGB属性”、“风格化图像”、“保存图像”。导入图像顺序图如图4-5所示：图4-5传入图像顺序图用户界面如图4-6、4-7所示：图4-6拖拽图像图4-7打开文件夹传入图像修改图像RGB属性顺序图如图4-8所示：图4-8修改图像RGB属性顺序图用户界面如图4-9所示图4-9修改RGB属性风格化图像选择“浮雕效果”风格化为例，顺序图如图4-10所示：图4-10浮雕效果顺序图用户界面如图4-11所示:图4-11浮雕效果保存图像顺序图如图4-12所示：图4-12保存图像顺序图用户界面如图4-13所示，结果如图4-14所示：图4-13保存图像图4-14新窗口保存图像

模块设计模块介绍本应用可分为以下三个模块。UI模块：呈现应用界面、实现用户的动态交互，应用控制模块：监听图像处理按钮事件，向图像处理模块传递参数，并调用图像处理模块完成图像处理图像处理模块：提供图像处理函数和接口。UI模块Html文件描述本应用的内容结构，如图5-1所示。Section元素用于对网站或应用程序中页面上的内容进行分块[14]。第一个section为项目的眉头，告诉用户本项目名称。第二个section是拖拽框，只在初始界面显示，用于检测用户是否将文件拖拽到框内，如有文件拖拽到框内，首先会提示用户放下文件，然后读出文件的位置，检测是否为图像文件，如果不是则提出警告，如果是图像文件则隐藏属于第一页的结构，显示第五个section。第三个section是“打开文件夹”按钮，只在初始界面显示，与input配合，创建文件上载控件，该控件带有一个文本框和一个浏览按钮。用户可以浏览文件夹来上传图像。第四个section是显示info信息，只在初始界面显示。第五个section是图像编辑区域，只在编辑界面显示。编辑区域结构如图5-2所示。ID为left的section是图像处理面板，内部为面板大标题和处理选项。ID为box的section是图像储存区域。ID为footer的section位于页脚，有操作控制面板和第二页的版权申明。图5-1应用总体内容结构图5-2图像编辑界面内容结构应用控制模块应用控制模块为大量的按钮添加监听事件。客户端JavaScript程序采用了异步事件驱动编程模型。在这种程序设计风格下，当文档、浏览器、元素或一直相关的对象发生某些有趣的事情时，Web浏览器就会产生事件[15]。如图5-3所示。事件出发后用_handle类的对象处理事件。图5-3图像编辑界面内容结构“_handle”类与图像处理模块联系，存储用户的处理操作顺序，实现操作控制。类图如图5-4所示。pix调用图像处理模块的Pixastic类，完成图像的处理。doc记录图像的ID。init_img记录最初的图像信息，用于reset操作。特性hist数组记录用户的处理操作，histStates记录当前的处理操作状态。特性last帮助实现undo操作，记录上一次操作。布尔属性hasChanged防止用户进行修改后忘记应用或取消。apply和cancel操作负责用户处理完图像后应用或取消修改后将hasChanged设为false。changing控制hasChanged属性。hsl、sharpen、pixelate、blur、bc、color、solarize、sepia、edges、invert、desaturate通过调用pix的图像处理函数处理图像。reset操作通过读取init_img获取最初的图像从而重置图像。undo操作撤销一次操作，读取last数组的顶端操作，反向操作实现撤销操作，删除数组的顶端操作。compare操作左一半保留现在图像的左一半，右一半用init_img的左一半实现对比。stop_compare取消对比操作。getImgData获取初始图像值，作为参数传给pix。init初始化类。图5-4_handle类图像处理模块Pixastic类提供了图像处理的基础操作。锐化锐化处理也叫边缘加强，主要目的是突出图像中的细节或者增强被模糊了的细节。锐化处理方法有：拉普拉斯算子、梯度法。梯度法是图像锐化方法最常用的微分方法。图像f(x,y)在点（x，y）处的梯度可以定义为：梯度反应了相邻灰度的变化率。拉普拉斯算法是将拉普拉斯矩阵中的项与相应点的RGB值之积再乘以相应的系数的和作为当前点的RGB值。一个二元图像函数f(x,y)的拉普拉斯变换定义为：公式（5.3）是（5.2）的一种离散形式[1]。对角线也可以加入到离散拉普拉斯变换的定义中。本项目使用的拉普拉斯算子如图5-5所示，Strength是锐化强度（0<=Strength<=1）。01+3*Strength01+3*Strength151+3*Strength01+3*Strength0图5-5本项目锐化使用的拉普拉斯算子平滑与灰度图像的平滑相比，彩色图像的平滑处理相对比较复杂，除了处理的对象是向量外，还要注意图像所用的彩色空间，因为随着所用彩色空间的不同，所处理的向量表示的含义也不同。位于点(x,y)处的颜色向量为，由灰度图像的平滑公式可以得到彩色图像的平滑公式为：该平滑公式还可写为：怀旧怀旧算法如下：先将每个像素点的RGB值分离出来，然后再按照上面的三个算式分别重新计算出RGB值然后作为当前点的RGB值。黑白照黑白照特效就是彩色图像去掉颜色变为灰度图，从HSI模型看，黑白照是图像的I(Integer强度)分量。算法如下：曝光过度该特效生成正片和负片混合的效果，主要模拟照相技术中增强光纤强度来产生曝光过度的效果。实现算法：对RGB值高于127的像素点用它的反色替代它，低于127的像素点保持原样。底片算法原理：将当前像素点的RGB值分别与255之差后的值作为当前点的RGB值。浮雕实现图像浮雕效果的一般原理是，将图像上每个像素点与其对角线的像素点形成差值，使相似颜色值淡化，不同颜色值突出，从而产生纵深感，达到浮雕的效果。具体的做法是将处于对角线的2个像素值做差，再加上一个背景常数（一般为127）而成。这种算法的特点是简单快捷，缺点是不能调节图像浮雕效果的角度和深度。本项目把对角线的元素也增加进来，使用了如图5-6所示的掩模。-1-1-1-18-1-1-1-1图5-6本项目浮雕效果使用的掩模

部署与应用项目部署本项目选择GitHub作为项目托管平台。在GitHub上，用户通过创建特殊名称的Git版本库或在Git库中建立特别的分支实现对主页的维护。GitHub为每一个用户分配了一个二级域名<user-id>.[16]。创建个人主页过程如下：先在托管空间创建了名为jokerT的版本库。在本地克隆新建立的版本库。$gitclonegit@:jokerTing/jokerT.git$cdjokerT/在版本库根目录中创建文件index.html作为首页。$printf"<h1>jokerTingHomePage</h1>Itworks.\n">index.html建立提交。$gitaddindex.html$gitcommit-m"Homepagetestversion."推送到GitHub，完成远程版本库创建。$gitpushoriginmaster用户还可以为每个项目设置主页，项目主页也通过此二级域名进行访问。为项目启用项目主页需要在项目版本库中创建一个名为ghs的分支，并向其中添加静态网页。可以通过网址http://<user-id>./<project-name>访问到[16]。步骤如下：用git

symbolic-ref命令将当前工作分支由master切换到一个尚不存在的分支ghs。$gitsymbolic-refHEADrefs/heads/ghs删除暂存区文件，即相当于清空暂存区。$rm.git/index创建项目首页index.html。$printf"helloworld.\n">index.html添加文件index.html到暂存区。$gitaddindex.html执行提交。提交完毕分支ghs完成创建。$gitcommit-m"branchgh