基于H5的圖像處理技術(shù)研究

【摘要】本項(xiàng)目基于筆者開發(fā)相關(guān)系統(tǒng)的經(jīng)歷，通過(guò)對(duì)企業(yè)在線圖像處理的需求進(jìn)行調(diào)研分析，利用H5的canvas圖像處理技術(shù)攻克了項(xiàng)目難點(diǎn)。項(xiàng)目在實(shí)測(cè)環(huán)境中成功地完成了對(duì)圖像的剪裁、旋轉(zhuǎn)、去污等操作，功能和性能都滿足用戶的需求。

【關(guān)鍵詞】H5 canvas 圖像處理

隨著接入互聯(lián)網(wǎng)設(shè)備的種類日趨增多，軟件產(chǎn)品開發(fā)過(guò)程中的兼容性愈發(fā)重要。如何只對(duì)產(chǎn)品進(jìn)行一次編碼，而能使產(chǎn)品運(yùn)行在Windows、Android、iOS等不同的系統(tǒng)下，成了各類軟件企業(yè)、項(xiàng)目經(jīng)理和程序員的追求，在這種趨勢(shì)下，H5登上了歷史的舞臺(tái)。由于HTML在瀏覽器中的天然兼容性，它成為了原型制作、快速迭代開發(fā)的標(biāo)準(zhǔn)，甚至是移動(dòng)端APP、PC桌面軟件的理想開發(fā)手段。使用H5處理各種圖像也成為了相關(guān)軟件中的重要需求。

本項(xiàng)目承接自蘇州快信通檔案服務(wù)有限公司，旨在為公司的檔案存儲(chǔ)、檢索提供自動(dòng)化的服務(wù)。項(xiàng)目的主要任務(wù)是處理經(jīng)過(guò)掃描上傳的檔案影像，并歸類檢索。由于掃描過(guò)程中的不可預(yù)測(cè)的因素，上傳的圖像文件可能會(huì)出現(xiàn)多余的空白、角度的傾斜或各種污漬，這就需要系統(tǒng)開發(fā)一個(gè)專門的圖像處理功能來(lái)對(duì)檔案影像進(jìn)行加工。為了更好的嵌入系統(tǒng)，必須將圖像處理設(shè)計(jì)為在線功能，因此H5的canvas技術(shù)成為了必然的選擇。

1.1 技術(shù)選擇

在線處理圖像有三種技術(shù)可供選擇：

1）Flash。Flash曾經(jīng)在web圖像處理方面占據(jù)了長(zhǎng)時(shí)間的壟斷地位，但存在著嚴(yán)重的兼容性和安全性問(wèn)題。2016年9月的Chrome 53開始，Chrome瀏覽器將屏蔽在后臺(tái)加載的Flash內(nèi)容，宣布了Flash已被時(shí)代所淘汰。

2）SVG。SVG是基于XML的聲明式標(biāo)記語(yǔ)言。它使用于簡(jiǎn)單幾何圖形（例如圖標(biāo)）的繪制，不能滿足復(fù)雜圖像的繪制操作。

可見，canvas成為了完成本項(xiàng)目需求的最佳選擇。

1.2 項(xiàng)目需求

對(duì)項(xiàng)目中處理的檔案圖像操作分為四種：

1）剪裁：使用鼠標(biāo)在圖像上拖動(dòng)，劃出一個(gè)矩形方塊，等待用戶確認(rèn)以后根據(jù)矩形方塊所在的位置進(jìn)行剪裁，只保留部分圖像（圖1.1）。

2）旋轉(zhuǎn)：設(shè)定角度參數(shù)（默認(rèn)設(shè)為順時(shí)針轉(zhuǎn)動(dòng)），確認(rèn)之后，將圖像按照角度旋轉(zhuǎn)（圖1.2）。

3）圖章：首先用鼠標(biāo)選定一個(gè)源位置，再在目標(biāo)位置上點(diǎn)擊，系統(tǒng)將源位置上的圖像內(nèi)容覆蓋到目標(biāo)位置上（類似于Photoshop中的圖章功能）。

4）保存：將canvas的圖片內(nèi)容編碼，上傳到服務(wù)器。

第二章 算法設(shè)計(jì)

2.1 圖像剪裁算法設(shè)計(jì)

考慮到用戶體驗(yàn)，頁(yè)面上顯示的圖像尺寸并非原圖尺寸，而是經(jīng)過(guò)一定比例縮放的。用戶在頁(yè)面上拖動(dòng)鼠標(biāo)，劃出需要剪裁的矩形范圍，此范圍經(jīng)過(guò)比例計(jì)算，才能轉(zhuǎn)換成原圖上的剪裁范圍。

設(shè)縮放比例為r，頁(yè)面上的剪裁范圍左上角坐標(biāo)為（x， y），范圍的長(zhǎng)和寬分別為w和h，那么在原圖上的剪裁范圍應(yīng)為：左上角（r * x， r * y），寬r * w、高r * h。

2.2 圖像旋轉(zhuǎn)算法設(shè)計(jì)

首先，圖像與畫布的尺寸是重合的，因此圖像在旋轉(zhuǎn)之后會(huì)超出畫布范圍，造成部分不完整，因此畫布的大小也必須重新設(shè)置。

在已知旋轉(zhuǎn)角度的前提下，容易算出圖像旋轉(zhuǎn)后所占矩形的尺寸，以此作為畫布的尺寸（圖2.2）。設(shè)圖像的寬和高分別為w、h，旋轉(zhuǎn)角度為θ（順時(shí)針），那么旋轉(zhuǎn)后畫布的寬至少應(yīng)為：

h * sin（θ） + w * cos（θ）

高至少應(yīng)為：

h * cos（θ） + w * sin（θ）

才能容納圖像。

利用canvas的rotate方法可以旋轉(zhuǎn)作圖時(shí)的坐標(biāo)，不過(guò)旋轉(zhuǎn)時(shí)的原點(diǎn)是對(duì)象的左上角而非中心點(diǎn)，所以僅僅作旋轉(zhuǎn)操作會(huì)造成圖像的位置偏移。本項(xiàng)目中使用如下步驟來(lái)保證圖像的完整性（圖2.2）：

1）將坐標(biāo)平移，使圖像左上角移至正確位置。

2）進(jìn)行旋轉(zhuǎn)操作。

2.3 圖章算法設(shè)計(jì)

實(shí)現(xiàn)“圖章”的步驟與Photoshop的操作基本類似。按住Alt鍵并點(diǎn)擊鼠標(biāo)，表示選擇圖章源。只點(diǎn)擊鼠標(biāo)表示用圖章源覆蓋當(dāng)前位置。在任何時(shí)候按Esc鍵可取消圖章操作。

為簡(jiǎn)單起見，將圖章設(shè)為矩形，寬和高為固定值w、h。

首先獲取鼠標(biāo)在圖像點(diǎn)擊的位置（x， y），由此獲取圖章的左上角應(yīng)為（x - w / 2， y - h / 2）。再根據(jù)2.1節(jié)的算法，推知此圖章源在原圖像上的位置與尺寸：左上角（r * （x - w / 2）， r * （y - h / 2）），寬r * w，高r * h。

將此矩形從原圖像截取出來(lái)，粘貼覆蓋到目標(biāo)處。目標(biāo)的中心位置同樣由鼠標(biāo)指定，假設(shè)為（x， y），那么目標(biāo)矩形的位置應(yīng)為（r * （x - w / 2）， r * （y - h / 2））。

第三章 系統(tǒng)實(shí)現(xiàn)

3.1 圖像裁剪的實(shí)現(xiàn)

首先對(duì)畫布和繪圖環(huán)境做初始化：

已知?jiǎng)澏ǖ木匦巫笊辖亲鴺?biāo)、寬度、高度和圖像的縮放比例rate，編寫方法cut實(shí)現(xiàn)圖像的剪裁。

3.2 圖像旋轉(zhuǎn)的實(shí)現(xiàn)

按照2.2節(jié)的算法計(jì)算出旋轉(zhuǎn)后的畫布尺寸，然后平移、旋轉(zhuǎn)、反向平移坐標(biāo)，最后將原畫畫入新坐標(biāo)。

3.3 圖章功能的實(shí)現(xiàn)

定義stp數(shù)據(jù)結(jié)構(gòu)，存儲(chǔ)圖章的位置和大小：

響應(yīng)鼠標(biāo)點(diǎn)擊事件，獲取圖章源的位置。為區(qū)分鼠標(biāo)選取的是圖章源還是目標(biāo)，規(guī)定在選取圖章源的時(shí)候必須按住“Alt”鍵。

3.4 圖像上傳的實(shí)現(xiàn)

canvas自帶方法可將畫布內(nèi)容編碼為展示圖片的data URI，并可設(shè)置圖像質(zhì)量。在js代碼中構(gòu)造表單，將data URI加入表單內(nèi)容，提交表單即可完成上傳。在編碼過(guò)程中使用Base64編碼，其優(yōu)勢(shì)在于：

1）減少http請(qǐng)求數(shù)，提高頁(yè)面加載速度。

2）可通過(guò)URL直接解碼查看圖片。

其中toDataURL方法中的第二個(gè)參數(shù)0.8為經(jīng)驗(yàn)參數(shù)，取值范圍在0-1之間。數(shù)值越高表示分辨率越高，編碼過(guò)后的內(nèi)容大小會(huì)大大超出原圖，一般取0.8 ～ 0.9之間。

4.總結(jié)

該項(xiàng)目在開發(fā)過(guò)程中使用H5作為圖像處理的基礎(chǔ)技術(shù)，因此能夠在不依賴第三方插件（例如flash、silverlight）的情況下獨(dú)立運(yùn)行，完美滿足用戶的需求。為改善用戶體驗(yàn)，頁(yè)面上還使用了大量的快捷鍵、遮罩層幫助用戶快速、精確地完成操作，這些附加性的功能不在本文中累述。

為防止用戶誤操作，程序中還為用戶保留得了每一步操作的狀態(tài)，以便用戶隨時(shí)回退。完成這一需求有兩種途徑：

1）在程序中存儲(chǔ)每一步操作所產(chǎn)生的圖像數(shù)據(jù)。這種方法實(shí)現(xiàn)起來(lái)較為簡(jiǎn)單，但數(shù)據(jù)存儲(chǔ)量巨大，造成了性能上的損失。

2）為每一種操作定義一個(gè)“逆操作”，遇到回退時(shí)執(zhí)行逆操作即可。此方法能帶來(lái)性能上的提高，但實(shí)現(xiàn)方法較為繁瑣。鑒于項(xiàng)目周期較短，筆者未能將想法付諸實(shí)踐，期望在版本更新過(guò)程中逐步添加。

參考文獻(xiàn)：

[1]吳飛燕.基于HTML5 Canvas繪圖技術(shù)應(yīng)用[J].電子測(cè)試，2018，04（04）：116-118.

[2]張衛(wèi)國(guó).基于HTML5的2D動(dòng)畫的設(shè)計(jì)與實(shí)現(xiàn)[D].廣東省：中山大學(xué)，2014.

[3]易鵬.基于HTML5 Canvas的交互式圖形工具箱的研究與實(shí)現(xiàn)[D].陜西省：西北大學(xué)，2017.

[4]王青.基于HTML5_Canvas的3D粒子圖形動(dòng)畫的設(shè)計(jì)[J].中國(guó)科技信息，2019，05：79-80.

[5]陳芬.計(jì)算機(jī)圖形圖像處理的關(guān)鍵技術(shù)研究[J].電腦知識(shí)與技術(shù)，2018，22：259-260.

作者簡(jiǎn)介：陸正（1980-），男，江蘇蘇州人，講師，蘇州工業(yè)園區(qū)服務(wù)外包職業(yè)學(xué)院信息工程學(xué)院教師，研究方向：軟件技術(shù)、前端工程化。