周　恒，余　丹*

（貴州工程應(yīng)用技術(shù)學(xué)院 信息工程學(xué)院，貴州 畢節(jié) 551700）

基于HTML5的圖形圖像協(xié)同處理技術(shù)分析

周恒，余丹*

（貴州工程應(yīng)用技術(shù)學(xué)院 信息工程學(xué)院，貴州 畢節(jié) 551700）

隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，越來(lái)越多的人習(xí)慣利用網(wǎng)絡(luò)進(jìn)行聊天和辦公。而利用HLML5技術(shù)，可以為多人進(jìn)行圖形圖像的協(xié)同處理提供系統(tǒng)平臺(tái)，從而同時(shí)滿足人們的聊天和辦公需求。因此，基于這種認(rèn)識(shí)，文章在分析HTML5技術(shù)特點(diǎn)及功能的基礎(chǔ)上，對(duì)基于HTML5的圖形圖像協(xié)同處理系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn)問(wèn)題展開(kāi)了探討，從而為關(guān)注該技術(shù)的人員提供一些參考。

HTML5技術(shù)；圖形圖像；協(xié)同處理

1　HTML5技術(shù)特征及功能

HTML5技術(shù)其實(shí)是一種新的Web標(biāo)準(zhǔn)，在圖形繪制和圖像處理方面具有一定的優(yōu)勢(shì)。從特征上來(lái)看，HTML5標(biāo)準(zhǔn)的應(yīng)用使以往的HTML格式和腳本得到了簡(jiǎn)化，并且取消了軟件插件。利用HTML5技術(shù)，可以實(shí)現(xiàn)音頻與視頻支持、通訊、繪圖、數(shù)據(jù)存儲(chǔ)和地理定位等多項(xiàng)功能。因?yàn)?，利用HTML5提供的Canvas標(biāo)記元素，可以利用瀏覽器腳本語(yǔ)言進(jìn)行其自帶的函數(shù)的調(diào)用，從而實(shí)現(xiàn)圖形繪制和圖像像素級(jí)操作。相較于傳統(tǒng)繪圖技術(shù)，使用HTML5可與瀏覽器渲染引擎緊密結(jié)合，因此能夠簡(jiǎn)化圖形和網(wǎng)頁(yè)元素的交互過(guò)程，繼而使大量資源得到節(jié)約。此外，HTML5可以使用WebSocket協(xié)議進(jìn)行全雙工通信，可以在服務(wù)器端進(jìn)行客戶端連接請(qǐng)求的接受，然后將應(yīng)答信息返回客戶端，甚至可以在一方關(guān)閉連接的情況下保留連接。

2　基于HTML5的圖形圖像協(xié)同處理技術(shù)

2.1 圖形圖像協(xié)同處理原理

利用HTML5技術(shù)進(jìn)行圖形圖像協(xié)同處理，就是利用canvas元素進(jìn)行繪圖和圖片像素級(jí)的濾鏡處理。利用該技術(shù)，需要將每個(gè)圖層看成是一個(gè)畫(huà)布，然后在制定圖層上進(jìn)行圖形繪制和圖像操作，并且最終進(jìn)行多個(gè)圖層的疊加。而系統(tǒng)操作的實(shí)現(xiàn)，需要使用瀏覽器和接受請(qǐng)求的服務(wù)器。具體來(lái)講，就是利用C#語(yǔ)言進(jìn)行服務(wù)器的實(shí)現(xiàn)。在服務(wù)器與瀏覽器連接的過(guò)程中，瀏覽器將先發(fā)送請(qǐng)求。服務(wù)器接受握手請(qǐng)求后，瀏覽器將進(jìn)行請(qǐng)求的識(shí)別和判斷，然后在接受客戶端請(qǐng)求后將安全密鑰返回客戶端，并且進(jìn)行WebSocket連接的創(chuàng)建。在協(xié)同操作的過(guò)程中，還需要進(jìn)行對(duì)象數(shù)據(jù)格式的定義，然后將其用于數(shù)據(jù)的封裝、傳輸和解析。而用戶在解析對(duì)象時(shí)，需要先進(jìn)行數(shù)據(jù)操作類型代碼的讀取，然后進(jìn)行不同的操作分支。

2.2 圖形圖像協(xié)同處理設(shè)計(jì)

2.2.1 處理需求分析

在設(shè)計(jì)圖形圖像協(xié)同處理系統(tǒng)時(shí)，需要明確系統(tǒng)面向用戶是進(jìn)行簡(jiǎn)單圖形繪制和圖像處理的用戶。同時(shí)，需要明確系統(tǒng)用戶能夠與他人合作完成圖形處理，并且傾向于使用Web程序進(jìn)行圖像問(wèn)題的解決。根據(jù)這些需求，可以使設(shè)計(jì)出的系統(tǒng)能夠在瀏覽器上完成圖形圖像繪制和處理操作，并且能夠?yàn)槎嗳嗽诰€協(xié)同處理圖像提供支持。同時(shí)，系統(tǒng)需要通過(guò)導(dǎo)入圖片進(jìn)行圖片的本地保存，并且能夠?yàn)橛脩魴z索歷史操作圖片提供支持［1］。在系統(tǒng)界面設(shè)計(jì)上，需要確保系統(tǒng)的美觀大方，并且具有易操作和多功能的特點(diǎn)。所以在系統(tǒng)界面上，應(yīng)該含有各種輔助繪畫(huà)工具，并且能夠進(jìn)行輔助線和背景網(wǎng)格的添加。

2.2.2 系統(tǒng)架構(gòu)設(shè)計(jì)

按照系統(tǒng)設(shè)計(jì)需求，可以將系統(tǒng)架構(gòu)劃分成3層，即數(shù)據(jù)層、業(yè)務(wù)邏輯層和應(yīng)用層。而采取這種3層設(shè)計(jì)思路，可以滿足系統(tǒng)低耦合和高內(nèi)聚的設(shè)計(jì)要求，并且能夠使系統(tǒng)界面和代碼解耦和分離。從系統(tǒng)拓?fù)浣Y(jié)構(gòu)設(shè)計(jì)上來(lái)看，系統(tǒng)可以對(duì)HTML5瀏覽器訪問(wèn)站點(diǎn)進(jìn)行支持［2］。針對(duì)客戶端的搜索圖片的請(qǐng)求，服務(wù)器可以進(jìn)行請(qǐng)求的接收和解析，然后利用數(shù)據(jù)庫(kù)組件和索引服務(wù)組件進(jìn)行資源的提供。在獲取資源后，服務(wù)器端將進(jìn)行數(shù)據(jù)信息的組織，然后將其返回客戶瀏覽器端。對(duì)于協(xié)同處理的操作請(qǐng)求，系統(tǒng)將進(jìn)行后臺(tái)服務(wù)器的連接，然后通過(guò)解析和處理用戶操作數(shù)據(jù)實(shí)現(xiàn)協(xié)同操作。

2.2.3 系統(tǒng)功能設(shè)計(jì)

從系統(tǒng)功能設(shè)計(jì)上來(lái)看，系統(tǒng)功能可以劃分成前端處理功能和后臺(tái)服務(wù)器功能。其中，前端處理功能包含繪制圖形、處理圖像、多人協(xié)作、實(shí)時(shí)交流、圖像數(shù)據(jù)處理、圖片保存、圖片搜索和對(duì)象數(shù)據(jù)解析等。而后臺(tái)服務(wù)功能是WebPhotoshop的協(xié)同處理功能的數(shù)據(jù)交換中心，負(fù)責(zé)進(jìn)行協(xié)同操作過(guò)程中的數(shù)據(jù)處理。從主體功能上來(lái)看，后臺(tái)服務(wù)器需要進(jìn)行圖像數(shù)據(jù)傳輸、聊天數(shù)據(jù)傳輸和服務(wù)器狀態(tài)維護(hù)。在進(jìn)行系統(tǒng)協(xié)同操作時(shí)，系統(tǒng)會(huì)先進(jìn)行系統(tǒng)日志文件路徑的配置，然后進(jìn)行服務(wù)器操作日志的記錄［3］。進(jìn)入到系統(tǒng)服務(wù)器主界面后，服務(wù)器將進(jìn)入就緒狀態(tài)，服務(wù)器準(zhǔn)備監(jiān)聽(tīng)的地址將在日志列表顯示。有用戶登錄后，在線用戶則會(huì)得到刷新，從而使新用戶信息在日志列表顯示出來(lái)。

2.2.4 系統(tǒng)流程設(shè)計(jì)

操作流程如圖1所示，用戶在進(jìn)入系統(tǒng)后，可以在系統(tǒng)主工作區(qū)發(fā)現(xiàn)系統(tǒng)菜單欄、狀態(tài)欄、選項(xiàng)欄，主畫(huà)板、歷史記錄窗口、工具箱和圖層管理窗口。此時(shí)，繪圖工具將被系統(tǒng)默認(rèn)為鉛筆，用戶可以利用其在主畫(huà)板上畫(huà)圖。同時(shí)，也可以利用繪圖工具進(jìn)行筆頭大小、顏色和線型等屬性的選擇。在畫(huà)圖時(shí)，用戶可以在服務(wù)器上進(jìn)行圖片的選擇，也可以選擇本地圖片或直接將圖片拖拽到畫(huà)板中，從而完成圖片的在線編輯。之后，用戶可以點(diǎn)擊在線協(xié)作登錄按鈕，然后利用系統(tǒng)實(shí)時(shí)交流功能和在線協(xié)作處理功能完成圖形圖像的處理和在線交流。此時(shí)，系統(tǒng)默認(rèn)用戶是在群中進(jìn)行交流，所以用戶也可以直接選擇用戶進(jìn)行單獨(dú)交流。

圖1 系統(tǒng)操作流程圖

2.3 系統(tǒng)功能實(shí)現(xiàn)

2.3.1 圖形圖像處理功能實(shí)現(xiàn)

使用canvas元素，系統(tǒng)可以進(jìn)行圖形圖像的展示，并且完成網(wǎng)格和圖層元素的展示。而利用該元素，系統(tǒng)也能夠完成畫(huà)板的繪制。通過(guò)在系統(tǒng)頁(yè)面進(jìn)行canvas畫(huà)布的定義，然后利用JavaScript進(jìn)行canvas函數(shù)的調(diào)用，系統(tǒng)就能夠?yàn)橛脩籼峁﹫D形繪制和圖像處理功能。為了進(jìn)行圖形繪制效果的實(shí)時(shí)顯示，系統(tǒng)將進(jìn)行兩塊畫(huà)布的定義，然后將上層畫(huà)布當(dāng)成是臨時(shí)畫(huà)布，并且根據(jù)鼠標(biāo)移動(dòng)的起始點(diǎn)形成相應(yīng)的繪制效果［4］。而系統(tǒng)下層畫(huà)布為展示畫(huà)布，是用戶繪制結(jié)束后得到的最終圖形。經(jīng)過(guò)圖像處理，系統(tǒng)會(huì)將圖像展示在用戶眼前。

2.3.2 協(xié)同操作功能的實(shí)現(xiàn)

想要實(shí)現(xiàn)系統(tǒng)協(xié)同操作功能，還需要解決系統(tǒng)的協(xié)同通信問(wèn)題。首先，需要進(jìn)行日志路徑等信息的配置，然后再開(kāi)啟服務(wù)器。在指定的地址和端口，服務(wù)器將監(jiān)聽(tīng)客戶端發(fā)送的連接請(qǐng)求。在輸入用戶名后，客戶端就能夠連接服務(wù)器。服務(wù)器接收客戶端請(qǐng)求后，就會(huì)進(jìn)行鏈路的創(chuàng)建，然后進(jìn)行信息的接收和轉(zhuǎn)發(fā)。而服務(wù)器對(duì)端口和指定地址的監(jiān)聽(tīng)，是通過(guò)異步方式完成的。在接收用戶連接時(shí)，服務(wù)器將創(chuàng)建一個(gè)緩沖區(qū)，然后進(jìn)行客戶端信息的存放［5］。通過(guò)分析客戶端的握手支持類信息，然后完成初步協(xié)議判定，服務(wù)器則會(huì)決定是否進(jìn)行握手回應(yīng)。在用戶登錄成功后，服務(wù)器將向所有在線用戶返回用戶名單，然后更新自己的在線用戶列表，從而使最新在線用戶得以顯示出來(lái)。

3　結(jié)語(yǔ)

總而言之，利用HTML5實(shí)現(xiàn)圖形圖像協(xié)同處理系統(tǒng)的設(shè)計(jì)，可以為多用戶進(jìn)行圖形圖像的在線處理和多人實(shí)時(shí)交流提供服務(wù)，從而滿足用戶的圖形圖像繪制要求。而隨著相關(guān)技術(shù)的發(fā)展，該技術(shù)也將得到進(jìn)一步完善，從而更好地為圖形圖形處理提供技術(shù)支持。因此，相信本文對(duì)基于HTML5圖形圖像協(xié)同處理技術(shù)展開(kāi)的研究，可以為相關(guān)工作的開(kāi)展提供指導(dǎo)。

［1］劉婧.HTML5中圖形圖像處理技術(shù)的研究［J］.電子制作，2014（8）：93.

［2］高科.基于HTML5的數(shù)據(jù)可視化實(shí)現(xiàn)方法研究［J］.科技傳播，2013（1）：186-187.

［3］李恒，杜曉榮，陳啟文，等.基于HTML5平臺(tái)的鉛筆畫(huà)風(fēng)格渲染［J］.計(jì)算機(jī)工程與應(yīng)用，2012（35）：156-160.

［4］柯肇豐，曾霞霞.基于HTML5+nodeJS+MongoDB構(gòu)建在線圖像編輯器系統(tǒng)［J］.福建電腦，2015（6）：42-44.

［5］楊秀生.基于HTML5 canvas繪圖技術(shù)研究［J］.中小企業(yè)管理與科技（下旬刊），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— ），男，貴州湄潭，本科；研究方向：計(jì)算機(jī)科學(xué)與技術(shù)。

余丹（1987— ），女，貴州遵義，助教。