当前位置:首页>> >>


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

收藏

资源目录
    文档预览:
    编号:20180913212854970    类型:共享资源    大小:9.26MB    格式:RAR    上传时间:2018-09-13
    尺寸:148x200像素    分辨率:72dpi   颜色:RGB    工具:   
    50
    金币
    关 键 词:
    基于 Web 在线 图像 处理 应用
    资源描述:
    本 科 生 毕 业 论 文题 目: 基于 Web 的在线图像处理应用 院 系: 软件学院 专 业: 软件工程(嵌入式软件与系统)学生姓名: 丁浩宸 学 号: 09388176 指导教师: 路永和(副教授) 二〇一三 年 四 月- i - i摘 要随着计算机和 Internet 的快速发展,数字图像广泛应用于日常生活,人们对数字图像加工处理的需求也急速增长,大量本地图像处理软件应运而生。而新近HTML5 标准的发布,为数字图像处理的动态网页实现打开了一扇大门。HTML5 中的Canvas 标签可以让我们使用脚本进行绘图,它提供了一系列完整的属性和方法,可以借此来实现图形绘制、图像处理、实现简单的动画和游戏制作。为满足网民在线快速处理图像的需求,本文运用 MVC 的设计思想,基于JavaScript、 HTML 5 以及 CSS3,设计并实现一个基于 Web 的在线图像处理应用。该应用提供如下功能:色彩调整、锐化平滑、对比度调整、亮度调整、风格化等;编辑时可以前后比较、取消和恢复原始图片;可通过 HTML 编写在线图像处理应用的基础模块;使用 JavaScript 的 jQuery 框架方便实现动态交互;通过拖拽图片或者从文件夹打开的方式上传要处理的图片。论文主要内容包括:项目背景、国内开发现状及开发目标;Canvas 标签的特性、项目用到的关键 API、基础的图像处理原理、个性化特效的实现方法和加速 JavaScript 开发过程的库 jQuery;核心业务的建模过程;项目的架构图和用户用例;图像处理类和用户交互控制类的实现过程;系统运行环境、部署方法;总结并对下一步的工作进行展望。关键词: 图像处理;数字图像;HTML5;Canvas;网页应用- ii - iiAbstractWith the rapid development of computer and Internet, digital image is widely used in daily life. People's demand for digital image processing is also growing rapidly. A large number of local image processing software arises at the historic moment. Recently, the releasing HTML5 has opened the door for digital image processing and building dynamic web page. Canvas tag in the HTML5 allows us to use script to carry on drawing, it provides a complete set of properties and methods that can be used to achieve graphics rendering, image processing and realize the simple animation and game production.To meet the needs of Internet users’ online Image process, this application design uses the MVC design ideas, based on JavaScript, HTML 5 and CSS3. It provides a color adjustment, sharpen fuzzy, contrast, brightness adjustment, stylized, and processing functions, editor at the same time also can compare before and after, cancellation, and restore the original image. It uses HTML to coding module, uses CSS to control the view part, and uses the jQuery which is a convenient JavaScript framework to finish dynamic interaction. Users can drag and drop images or from the folder to open the way to upload the image to be processed. Paper mainly includes: project background, the domestic development present situation and development goals; Canvas tag features, the key of the basic principle of the image processing of the API, and personalized special realization method and speed up the JavaScript library jQuery development process; The core business of the modeling process; Architecture diagram and user use cases of the project; Image processing class and control class of user interaction process; System running environment, deployment method; Summary and outlook for the next step work.Keywords: Image Process; Digital Image; HTML5; Canvas; Web Application- iii - iii目 录第一章 前言 ................................................................................................................................................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 CANVAS API 简介 .......................................................................................................62.1.1. HTML5 Canvas 概述 ........................................................................................62.1.2. 使用 HTML5 Canvas........................................................................................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 用例实现 ...................................................................................................................24- iv - iv4.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参考文献 ...........................................................................................................................................................42- 1 -第一章 前言1.1 项目的背景和意义1.1.1. 数字图像处理概论数字图像处理(Digital Image Processing)是利用数字计算机或则其他数字硬件,对从图像信息转换而得到的电信号进行某些数学运算,以提高图像的实用性[1]。例如从卫星图片中提取目标物的特征参数,三维立体断层图像的重建等。总的来说,数字图像处理包括点运算、几何处理、图像增强、图像复原、图像形态学处理、图像编码、图像重建、模式识别等。目前数字图像处理的应用越来越广泛,已经渗透到工业、医疗保健、航空航天、军事等各个领域,在国民经济中发挥越来越大的作用。1.1.2. Web 应用与 HTML5Web 应用程序(Web Application)是指由浏览器支持的语言(如 HTML, JavaScript 等)编写的在线应用,这些应用需要通过浏览器执行。Web 应用本身的特点包括:立即部署、跨平台、采用逐步下载来检索内容和数据、实时互动的声音和图像,以及可以充分利用被广泛采纳的互联网国际标准。随着技术的发展,Web应用逐渐具备了桌面应用程序的特点:在消息确认和格式编排方面提供互动用户界面;在无刷新页面之下提供快捷的界面响应时间;提供通用的用户界面特性,如“拖放式”操作以及在线和离线操作能力。Web 应用能力的增强,可使应用平台从传统操作系统向浏览器操作系统平滑过渡, “未来重要的不再是占据用户的桌面,而是占据用户的浏览器” [2]。HTML5 就是为了 Web 应用而生的。HTML5 草案的前身名为 Web Applications 1.0,于 2004 年被 WHATWG 提出,于 2007 年被 W3C 接纳,并成立了新的 HTML 工作团队。HTML5 的第一份正式草案已于 2008 年 1 月 22 日公布。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。2012 年 12 月 17 日,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的 HTML5 规范已经正式定稿。- 2 -根据 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 应用平台,甚至可以通过封装的技术发放到 App Store 或 Google Play 上,所以它的跨平台非常强大,也是大多数人对 HTML5 有兴趣的主要原因。在 HTML5 的诸多新特性中,HTML5 Canvas 是其中最吸引人的特性之一。它由JavaScript 脚本进行控制,可以动态的绘制出各种 2D 图形,甚至可以对图像像素进行任意处理。本项目即是基于使用 Canvas 标签,通过 JavaScript 控制处理图片的像素,从而在 Web 平台上无插件的实现图像处理 [3]。1.1.3. 项目的意义随着计算机和 Internet 的快速发展,数字图像广泛应用于日常生活,人们对数字图像加工处理的需求也急速增长,因此出现了许多图形图像处理软件,其中 Photoshop 就是一款深受众人喜爱的图像处理软件,但这些软件都只能在本地机器上使用,无法直接通过互联网处理图像,这给许多网民带来不便.本人认为开发设计一个基于 Web 的图像处理系统十分必要,可以让普通用户轻松地通过浏览器直接对图像进行处理。在 Canvas 加入 HTML5 标准之前,要想实现动态的网页应用,只能借助于第三方的插件,比如 Flash 或 Java,而引入了 Canvas 标记后,就直接打通了通往神奇的动态应用网页的大门,步入 Web 图像处理时代。用户无需安装任何软件或者插件,只需一台电脑,一个支持 HTML5 格式的浏览器,即可轻松在线编辑和修改图片。- 3 -1.2 研究开发现状分析数字图像处理,就是用一系列特定的操作来改变图像的像素,以达到预期的目的 [1]。能够进行图像处理的软件有很多,但大多通用的图像处理软件,一般是用来提高视觉感受的,而实际的图像处理工作主要是针对不同的应用领域,需要不同的图像处理算法,因此用户需要根据自己的专业领域选择适当的算法来处理图像。先分析现阶段本地数字图像处理途径,再分析 Web 平台的数字图像应用。1.2.1. 本地数字图像处理1.2.1.1. MATLABMathWorks 公司推出的 MATLAB 软件是学习数理知识的好帮手。它是基于矩阵运算的程序设计语言的一种,在处理图像方面,MATLAB 有着其他程序设计语言所不能比拟的地方,但是 MATLAB 并不是一个专门针对图像处理领域的软件,所以其优缺点简单归并如下:1)MATLAB 语言不支持编译系统,边解释边执行,所以其语言执行效率低下,但其丰富的内置函数和高速的计算机处理器可以弥补这一方面的缺陷。2)MATLAB 类似“DOS”语言,其本身具有面向对象风格的交互开发环境,但在使用MTALAB 开发图像处理软件时,在界面实现方面并不是很容易, MATLAB 支持与C/C++语言等其他语言的应用程序接口,目前国内外已经展开 MATLAB 与 VC++的集成开发平台方面的研究,并取得一定的成果。3)MATLAB 具有强大的内置图像处理函数和矩阵运算函数,这就使图像处理变得简单,使我们把更多的精力放在算法设计上。4)MATLAB 可以通过 pixval on 命令来动态显示图像的灰度值,这对于某些算法设计很重要 [4]。1.2.1.2. Visual C++作为主流的应用程序开发环境的 VC 提供可视化的集成开发环境、 高效的编译器以及功能强大的应用程序框架 MFC, 利用它可以轻松地开发出高效强大的Windows 应用程序,且其应用程序具有界面友好、代码效率高、执行速度快、维护升级容易等优点,这使得 VC 在应用程序设计领域得到了广泛的应用,然而,作为一种主流的软件开发平台,在数字图像处理 (特别是含有大量矩阵运算及图像处理)的应用程序时, 使用 VC 开发则会非常繁琐,程序十分复杂 [5]。- 4 -1.2.2. Web 平台数字图像处理在互联网快速发展的今天,互联网站点已不仅仅是一些在线的静态页面,用户可以在网上购物、社交、互动游戏等。网页已不再是简单的 HTML 页面,而是由许多来自第三方的动态内容组成的富应用。软件业正稳步向 SAAS(Software-As-A-Service,软件即服务)的方向发展.传统的桌面应用提供的功能,都能通过在线服务(Web 应用程序)提供,易部署、跨平台的特点使得 Web 应用的优势变得越来越明显。作为互联网的入口——浏览器正逐渐扮演着应用平台的角色。Web 应用和“云”技术的发展正在让浏览器“取代”操作系统的进程加速 [6]。1.2.2.1. FlashFlash 作为一个二维动画制作软件,无论在商业、教育还是其它领域都得到广泛应用,尤其是它作为流式媒体所具有的特点,在网络普及的今天,更是如鱼得水。在Internet 上每打开一个网页,其中的动态效果,有半数以上都是 Flash 在起作用。新浪、搜狐等大型门户网站上的商业广告(弹出式窗口动画),其华美、精致的画面和令人眩目的动态效果,几乎全部得益于 Flash。Flash 上手比较容易,但是较多用于二维动画的制作,真正将其用于图像处理中的却不多。Flash 在图像处理中的应用主要体现在几个方面:绘制美观的矢量图形、颜色丰富与实际接近(即可填充渐进色)、字迹清晰、最后可以生成 BMP、JPEG 等格式的图形 [7]。 “美图秀秀网页版”就是使用了Flash 插件实现的在线图像处理。1.2.2.2. 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,用户可以将它简单快捷的引用到- 5 -Web 网页中,做出与 PhotoShop 一样的优美效果。还可以用 AlloyImage 来开发一个Web 在线图像处理软件 [9]。1.3 项目的目标和范围本项目是在 Web 平台上,使用 jQuery 方便 JavaScript 开发,与 HTML5 结合实现数字图像处理操作,并以这种处理技术为基础构建一个交互应用。用户打开应用后,从本地上传图像,根据喜好选择应用提供的操作对图像进行处理,得到处理过的图像。本项目为用户提供了多样功能。 (如表 1-1)表 1-1 应用主要功能主要功能 选项HSI 饱和度、色调、强度亮度/对比度 亮度、对比度RGB 红通道、绿通道、蓝通道滤镜效果 锐化、平滑个性化 怀旧、黑白照、曝光过度、底片、浮雕1.4 论文结构简介全文分为七章。第一章是前言,主要介绍项目背景,国内开发现状及开发目标。第二章是技术与原理,主要介绍 Canvas 标签的特性,项目用到的关键 API,基础的图像处理原理,个性化特效的实现方法和加速 JavaScript 开发过程的库jQuery。第三章是需求建模,介绍项目的核心业务的建模过程。第四章是架构设计,展示项目的架构图和用户用例。第五章是模块设计,介绍本项目的两个大类:图像处理类和用户交互控制类。第六章是部署与应用,说明系统运行环境,部署方法,系统特色及使用方法。
    展开阅读全文
    1
      金牌文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    0条评论

    还可以输入200字符

    暂无评论,赶快抢占沙发吧。

    关于本文
    本文标题:基于Web的在线图像处理应用.rar
    链接地址:http://www.gold-doc.com/p-139159.html
    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服客服 - 联系我们
    copyright@ 2014-2018 金牌文库网站版权所有
    经营许可证编号:浙ICP备15046084号-3
    收起
    展开