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