圖形圖像新技術(shù)論文(2)
圖形圖像新技術(shù)論文
圖形圖像新技術(shù)論文篇二
HTML5圖形圖像處理技術(shù)研究
摘 要：圖形圖像處理平臺大部分是傳統(tǒng)的C/S架構(gòu)的桌面應(yīng)用程序，維護(hù)困難，共享性差，而B/S架構(gòu)的Web程序具有易維護(hù)、易共享的優(yōu)點(diǎn)。本文研究了基于HTML5的Web圖形圖像處理技術(shù)，用HTML5實(shí)現(xiàn)了一個(gè)Web圖形圖像處理程序，并通過理論分析和實(shí)驗(yàn)得出：HTML5在Web圖形圖像處理上具有優(yōu)勢，存在基于HTML5實(shí)現(xiàn)Web處理圖形圖像的可能性。
關(guān)鍵詞：HTML5;Web;Canvas;圖形圖像處理
中圖分類號：TP317
傳統(tǒng)C/S架構(gòu)的桌面圖形圖像處理程序，雖然處理速度較快，但由于界面和算法邏輯都集中在客戶端，造成軟件維護(hù)困難和共享性差。而采用B/S架構(gòu)的Web程序，將客戶端放在瀏覽器上，算法邏輯和服務(wù)器集中在后臺，前臺界面和后臺邏輯分離帶來了易維護(hù)、易共享、易于拓展、實(shí)時(shí)性的優(yōu)點(diǎn)[1] [2]。因此，與Web緊密結(jié)合的圖形圖像處理技術(shù)具有極大前景。
HTML5技術(shù)，作為最新的Web標(biāo)準(zhǔn)，帶來了強(qiáng)大的用于交互、多媒體和本地化等方面的標(biāo)簽以及應(yīng)用編程接口。Canvas是HTML5一個(gè)非常實(shí)用的處理圖形圖像的元素，豐富的圖形繪制以及圖像處理方法，為Web圖形圖像處理帶來了便捷。
本文基于HTML5實(shí)現(xiàn)了一個(gè)Web圖形圖像處理程序，并探討了HTML5在圖形圖像處理上的優(yōu)勢，結(jié)合云計(jì)算、Web Service等技術(shù)，闡述了HTML5在Web圖形圖像處理的發(fā)展趨勢。
1 HTML5技術(shù)簡介
HTML5不僅僅是一次簡單的技術(shù)升級，更代表了未來Web開發(fā)的方向。HTML5主要特征有：簡化了以前的HTML格式和腳本;取消了插件。HTML5新的功能應(yīng)用主要有：繪圖、通訊、后臺處理、無插件的音頻和視頻支持、地理定位、本地?cái)?shù)據(jù)存儲等[3]。
HTML5提供了Canvas標(biāo)記元素來實(shí)現(xiàn)繪圖功能。該元素可以使用瀏覽器腳本語言(通常是JavaScript)調(diào)用Canvas自帶的函數(shù)進(jìn)行圖形繪制，和對圖像的像素級操作。相較于傳統(tǒng)的在服務(wù)器端先畫好圖片，再把圖片發(fā)到瀏覽器中，或用第三方插件顯示的方式，它與瀏覽器渲染引擎結(jié)合緊密，節(jié)約了資源，并極大地簡化了圖形和網(wǎng)頁中其他元素的交互過程[4]。
2 HTML5繪圖板的實(shí)現(xiàn)
繪圖板采用HTML5+CSS+JavaScript實(shí)現(xiàn)，主要功能是繪制圖形和處理圖像。實(shí)現(xiàn)了常見的鉛筆等繪圖工具，同時(shí)可以調(diào)整線條顏色、大小等屬性。能夠?qū)D片進(jìn)行模糊、浮雕、反色、黑白處理。
設(shè)計(jì)中定義了兩塊畫布，一塊為臨時(shí)畫布，在鼠標(biāo)移動過程中，是在臨時(shí)畫布上繪制鼠標(biāo)當(dāng)前形成的圖形，另一塊為展示畫布，鼠標(biāo)抬起時(shí)，在展示畫布上繪制鼠標(biāo)最終的圖形。
對圖形的繪制調(diào)用Canvas自帶的函數(shù)，例如stroke()、lineTo()、fillRect()等，實(shí)現(xiàn)鉛筆、直線、填充矩形等各種效果。橢圓的繪制，是分為上半橢圓和下半橢圓兩部分繪制的，上下半橢圓都看作是一條三次貝塞爾曲線。對圖像的處理使用Canvas對圖像像素級的處理能力，首先獲取圖像的像素，再使用經(jīng)典的圖像處理算法，例如高斯模糊、加權(quán)平均值反色等算法，實(shí)現(xiàn)對圖像的處理。
3 性能比較與分析
3.1 處理效率比較
為檢測HTML5對圖形圖像處理的可行性和有效性，筆者將基于HTML5的繪圖板(簡稱為BSIPM)和C/S架構(gòu)的使用C#編寫的桌面圖形圖像處理程序(簡稱為CSIPM)進(jìn)行了實(shí)驗(yàn)比較，分析了處理效率。
實(shí)驗(yàn)中的BSIPM和CSIPM采用相同的算法，比較了對jpg、png、bmp三種格式的圖片進(jìn)行模糊、浮雕、反色、黑白四種處理的響應(yīng)時(shí)間。每種處理進(jìn)行了30次，取平均時(shí)間，單位為毫秒。進(jìn)行實(shí)驗(yàn)的電腦配置為：CPU主頻為 2.1GHz，內(nèi)存為2G，操作系統(tǒng)為Windows 7。
實(shí)驗(yàn)結(jié)果如下：
實(shí)驗(yàn)結(jié)果顯示，對于三種格式的圖片處理，基于HTML5的圖像處理方式(BSIPM)比C/S模式桌面應(yīng)用程序的圖像處理方式(CSIPM)的響應(yīng)時(shí)間平均縮短了約60%。由此可見，HTML5對圖像的處理效率優(yōu)于傳統(tǒng)C/S模式，借助HTML5技術(shù)，可以替代傳統(tǒng)C/S模式桌面應(yīng)用程序的圖像處理能力。
3.2 技術(shù)優(yōu)勢比較
目前比較流行的Web圖形圖像處理技術(shù)是基于第三方插件Flash技術(shù)。但由于Flash版本的問題或者插件被禁用等原因，其使用具有一定的局限性，并且Flash 程序通常很大，導(dǎo)致在網(wǎng)絡(luò)上的傳輸速度慢，對電腦的性能要求相對較高，影響了編輯的速度。同時(shí)，在已經(jīng)設(shè)計(jì)好的頁面中，要想把插件顯示的內(nèi)容與頁面上其他元素集成也比較困難。插件使用的渲染模型與普通Web頁面所使用的不一樣，當(dāng)其他可視化元素與插件重疊時(shí)，會特別麻煩[3]。Flash處理圖形圖像在具體實(shí)現(xiàn)上也比較復(fù)雜。
利用HTML5強(qiáng)大的對腳本和布局之間的原生交互功能，可以直接用CSS和JavaScript的方式控制頁面布局和操作圖形圖像，不需要借助外來插件，也不需要使用復(fù)雜的編程技巧，在圖形圖像處理上十分方便。
4 總結(jié)
通過比較分析，HTML5對圖形圖像的處理具有極大優(yōu)勢。借助Web的諸多優(yōu)點(diǎn)，同時(shí)結(jié)合各種先進(jìn)的Web技術(shù)，存在基于HTML5實(shí)現(xiàn)Web處理圖形圖像的可能性。
未來，基于HTML5的圖形圖像處理可以與云技術(shù)相結(jié)合。云技術(shù)強(qiáng)大的計(jì)算和存儲，以及能夠進(jìn)行有效且動態(tài)的資源劃分和分配能力，為圖像處理技術(shù)的發(fā)展，提供了更大的發(fā)展空間。同時(shí)，也可以與計(jì)算機(jī)支持協(xié)同工作技術(shù)(CSCW)、Web Service結(jié)合，開發(fā)多人在線協(xié)同繪圖程序，以合作完成大型的復(fù)雜繪圖工作。HTML5在Web圖形圖像處理上具有極大的發(fā)展前景。
參考文獻(xiàn)：
[1]侯淑英.B/S模式和C/S模式優(yōu)勢比較[J].沈陽教育學(xué)院學(xué)報(bào)，2007，9(2).
[2]王磊，黃興友.可共享的跨平臺的網(wǎng)絡(luò)數(shù)字圖像處理技術(shù)[J].電腦知識與技術(shù)(學(xué)術(shù)交流)，2007，2(8).
[3]Peter Lubbers，Brian Albers，F(xiàn)rank Salim.HTML5高級程序設(shè)計(jì)[M].北京：人民郵電出版社，2011，1.
[4]劉華星，楊庚.HTML5下一代Web開發(fā)標(biāo)準(zhǔn)研究[J].計(jì)算機(jī)技術(shù)與發(fā)展，2011，21(8).
作者簡介：余飛(1989-)，男，湖北黃岡市人，碩士，主要研究方向：Web開發(fā)。
作者單位：長江大學(xué)研究生學(xué)院，湖北荊州 434023
看了“圖形圖像新技術(shù)論文”的人還看：
1.計(jì)算機(jī)圖形圖像技術(shù)探究論文(2)