基于HTML5的图形图像协同处理技术分析

周　恒，余　丹*

（贵州工程应用技术学院 信息工程学院，贵州 毕节 551700）

基于HTML5的图形图像协同处理技术分析

周恒，余丹*

（贵州工程应用技术学院 信息工程学院，贵州 毕节 551700）

随着网络技术的发展，越来越多的人习惯利用网络进行聊天和办公。而利用HLML5技术，可以为多人进行图形图像的协同处理提供系统平台，从而同时满足人们的聊天和办公需求。因此，基于这种认识，文章在分析HTML5技术特点及功能的基础上，对基于HTML5的图形图像协同处理系统的设计和实现问题展开了探讨，从而为关注该技术的人员提供一些参考。

HTML5技术；图形图像；协同处理

1　HTML5技术特征及功能

HTML5技术其实是一种新的Web标准，在图形绘制和图像处理方面具有一定的优势。从特征上来看，HTML5标准的应用使以往的HTML格式和脚本得到了简化，并且取消了软件插件。利用HTML5技术，可以实现音频与视频支持、通讯、绘图、数据存储和地理定位等多项功能。因为，利用HTML5提供的Canvas标记元素，可以利用浏览器脚本语言进行其自带的函数的调用，从而实现图形绘制和图像像素级操作。相较于传统绘图技术，使用HTML5可与浏览器渲染引擎紧密结合，因此能够简化图形和网页元素的交互过程，继而使大量资源得到节约。此外，HTML5可以使用WebSocket协议进行全双工通信，可以在服务器端进行客户端连接请求的接受，然后将应答信息返回客户端，甚至可以在一方关闭连接的情况下保留连接。

2　基于HTML5的图形图像协同处理技术

2.1 图形图像协同处理原理

利用HTML5技术进行图形图像协同处理，就是利用canvas元素进行绘图和图片像素级的滤镜处理。利用该技术，需要将每个图层看成是一个画布，然后在制定图层上进行图形绘制和图像操作，并且最终进行多个图层的叠加。而系统操作的实现，需要使用浏览器和接受请求的服务器。具体来讲，就是利用C#语言进行服务器的实现。在服务器与浏览器连接的过程中，浏览器将先发送请求。服务器接受握手请求后，浏览器将进行请求的识别和判断，然后在接受客户端请求后将安全密钥返回客户端，并且进行WebSocket连接的创建。在协同操作的过程中，还需要进行对象数据格式的定义，然后将其用于数据的封装、传输和解析。而用户在解析对象时，需要先进行数据操作类型代码的读取，然后进行不同的操作分支。

2.2 图形图像协同处理设计

2.2.1 处理需求分析

在设计图形图像协同处理系统时，需要明确系统面向用户是进行简单图形绘制和图像处理的用户。同时，需要明确系统用户能够与他人合作完成图形处理，并且倾向于使用Web程序进行图像问题的解决。根据这些需求，可以使设计出的系统能够在浏览器上完成图形图像绘制和处理操作，并且能够为多人在线协同处理图像提供支持。同时，系统需要通过导入图片进行图片的本地保存，并且能够为用户检索历史操作图片提供支持［1］。在系统界面设计上，需要确保系统的美观大方，并且具有易操作和多功能的特点。所以在系统界面上，应该含有各种辅助绘画工具，并且能够进行辅助线和背景网格的添加。

2.2.2 系统架构设计

按照系统设计需求，可以将系统架构划分成3层，即数据层、业务逻辑层和应用层。而采取这种3层设计思路，可以满足系统低耦合和高内聚的设计要求，并且能够使系统界面和代码解耦和分离。从系统拓扑结构设计上来看，系统可以对HTML5浏览器访问站点进行支持［2］。针对客户端的搜索图片的请求，服务器可以进行请求的接收和解析，然后利用数据库组件和索引服务组件进行资源的提供。在获取资源后，服务器端将进行数据信息的组织，然后将其返回客户浏览器端。对于协同处理的操作请求，系统将进行后台服务器的连接，然后通过解析和处理用户操作数据实现协同操作。

2.2.3 系统功能设计

从系统功能设计上来看，系统功能可以划分成前端处理功能和后台服务器功能。其中，前端处理功能包含绘制图形、处理图像、多人协作、实时交流、图像数据处理、图片保存、图片搜索和对象数据解析等。而后台服务功能是WebPhotoshop的协同处理功能的数据交换中心，负责进行协同操作过程中的数据处理。从主体功能上来看，后台服务器需要进行图像数据传输、聊天数据传输和服务器状态维护。在进行系统协同操作时，系统会先进行系统日志文件路径的配置，然后进行服务器操作日志的记录［3］。进入到系统服务器主界面后，服务器将进入就绪状态，服务器准备监听的地址将在日志列表显示。有用户登录后，在线用户则会得到刷新，从而使新用户信息在日志列表显示出来。

2.2.4 系统流程设计

操作流程如图1所示，用户在进入系统后，可以在系统主工作区发现系统菜单栏、状态栏、选项栏，主画板、历史记录窗口、工具箱和图层管理窗口。此时，绘图工具将被系统默认为铅笔，用户可以利用其在主画板上画图。同时，也可以利用绘图工具进行笔头大小、颜色和线型等属性的选择。在画图时，用户可以在服务器上进行图片的选择，也可以选择本地图片或直接将图片拖拽到画板中，从而完成图片的在线编辑。之后，用户可以点击在线协作登录按钮，然后利用系统实时交流功能和在线协作处理功能完成图形图像的处理和在线交流。此时，系统默认用户是在群中进行交流，所以用户也可以直接选择用户进行单独交流。

图1 系统操作流程图

2.3 系统功能实现

2.3.1 图形图像处理功能实现

使用canvas元素，系统可以进行图形图像的展示，并且完成网格和图层元素的展示。而利用该元素，系统也能够完成画板的绘制。通过在系统页面进行canvas画布的定义，然后利用JavaScript进行canvas函数的调用，系统就能够为用户提供图形绘制和图像处理功能。为了进行图形绘制效果的实时显示，系统将进行两块画布的定义，然后将上层画布当成是临时画布，并且根据鼠标移动的起始点形成相应的绘制效果［4］。而系统下层画布为展示画布，是用户绘制结束后得到的最终图形。经过图像处理，系统会将图像展示在用户眼前。

2.3.2 协同操作功能的实现

想要实现系统协同操作功能，还需要解决系统的协同通信问题。首先，需要进行日志路径等信息的配置，然后再开启服务器。在指定的地址和端口，服务器将监听客户端发送的连接请求。在输入用户名后，客户端就能够连接服务器。服务器接收客户端请求后，就会进行链路的创建，然后进行信息的接收和转发。而服务器对端口和指定地址的监听，是通过异步方式完成的。在接收用户连接时，服务器将创建一个缓冲区，然后进行客户端信息的存放［5］。通过分析客户端的握手支持类信息，然后完成初步协议判定，服务器则会决定是否进行握手回应。在用户登录成功后，服务器将向所有在线用户返回用户名单，然后更新自己的在线用户列表，从而使最新在线用户得以显示出来。

3　结语

总而言之，利用HTML5实现图形图像协同处理系统的设计，可以为多用户进行图形图像的在线处理和多人实时交流提供服务，从而满足用户的图形图像绘制要求。而随着相关技术的发展，该技术也将得到进一步完善，从而更好地为图形图形处理提供技术支持。因此，相信本文对基于HTML5图形图像协同处理技术展开的研究，可以为相关工作的开展提供指导。

［1］刘婧.HTML5中图形图像处理技术的研究［J］.电子制作，2014（8）：93.

［2］高科.基于HTML5的数据可视化实现方法研究［J］.科技传播，2013（1）：186-187.

［3］李恒，杜晓荣，陈启文，等.基于HTML5平台的铅笔画风格渲染［J］.计算机工程与应用，2012（35）：156-160.

［4］柯肇丰，曾霞霞.基于HTML5+nodeJS+MongoDB构建在线图像编辑器系统［J］.福建电脑，2015（6）：42-44.

［5］杨秀生.基于HTML5 canvas绘图技术研究［J］.中小企业管理与科技（下旬刊），2015（7）：194-195.

Analysis on collaborative processing technology of graphics and image based on HTML5

Zhou Heng， Yu Dan*
（Information Engineering School of Guizhou Univeristy of Engineering Science， Bijie 551700， China）

With the development of network technology， more and more people are accustomed to using Internet to chat and handle offcial business. And making use of HLML5 technology can provide a system platform for many people to carry out collaborative graphic and image processing so as to meet people's chat and offce demand at the same time. Therefore， based on this understanding and the analysis of the technical characteristics and function of HTML5， the design and implementation issues of collaborative processing system of graphics and images based on HTML5 are discussed in this paper， in order to provide some reference for the technical personnel concerned.

HTML5 technology； graphic images； collaborative processing

周恒（1993— ），男，贵州湄潭，本科；研究方向：计算机科学与技术。

余丹（1987— ），女，贵州遵义，助教。