基于H5的圖像處理技術研究

【摘要】本項目基于筆者開發相關系統的經歷，通過對企業在線圖像處理的需求進行調研分析，利用H5的canvas圖像處理技術攻克了項目難點。項目在實測環境中成功地完成了對圖像的剪裁、旋轉、去污等操作，功能和性能都滿足用戶的需求。

【關鍵詞】H5 canvas 圖像處理

隨著接入互聯網設備的種類日趨增多，軟件產品開發過程中的兼容性愈發重要。如何只對產品進行一次編碼，而能使產品運行在Windows、Android、iOS等不同的系統下，成了各類軟件企業、項目經理和程序員的追求，在這種趨勢下，H5登上了歷史的舞臺。由于HTML在瀏覽器中的天然兼容性，它成為了原型制作、快速迭代開發的標準，甚至是移動端APP、PC桌面軟件的理想開發手段。使用H5處理各種圖像也成為了相關軟件中的重要需求。

本項目承接自蘇州快信通檔案服務有限公司，旨在為公司的檔案存儲、檢索提供自動化的服務。項目的主要任務是處理經過掃描上傳的檔案影像，并歸類檢索。由于掃描過程中的不可預測的因素，上傳的圖像文件可能會出現多余的空白、角度的傾斜或各種污漬，這就需要系統開發一個專門的圖像處理功能來對檔案影像進行加工。為了更好的嵌入系統，必須將圖像處理設計為在線功能，因此H5的canvas技術成為了必然的選擇。

1.1 技術選擇

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

1）Flash。Flash曾經在web圖像處理方面占據了長時間的壟斷地位，但存在著嚴重的兼容性和安全性問題。2016年9月的Chrome 53開始，Chrome瀏覽器將屏蔽在后臺加載的Flash內容，宣布了Flash已被時代所淘汰。

2）SVG。SVG是基于XML的聲明式標記語言。它使用于簡單幾何圖形（例如圖標）的繪制，不能滿足復雜圖像的繪制操作。

可見，canvas成為了完成本項目需求的最佳選擇。

1.2 項目需求

對項目中處理的檔案圖像操作分為四種：

1）剪裁：使用鼠標在圖像上拖動，劃出一個矩形方塊，等待用戶確認以后根據矩形方塊所在的位置進行剪裁，只保留部分圖像（圖1.1）。

2）旋轉：設定角度參數（默認設為順時針轉動），確認之后，將圖像按照角度旋轉（圖1.2）。

3）圖章：首先用鼠標選定一個源位置，再在目標位置上點擊，系統將源位置上的圖像內容覆蓋到目標位置上（類似于Photoshop中的圖章功能）。

4）保存：將canvas的圖片內容編碼，上傳到服務器。

第二章 算法設計

2.1 圖像剪裁算法設計

考慮到用戶體驗，頁面上顯示的圖像尺寸并非原圖尺寸，而是經過一定比例縮放的。用戶在頁面上拖動鼠標，劃出需要剪裁的矩形范圍，此范圍經過比例計算，才能轉換成原圖上的剪裁范圍。

設縮放比例為r，頁面上的剪裁范圍左上角坐標為（x， y），范圍的長和寬分別為w和h，那么在原圖上的剪裁范圍應為：左上角（r * x， r * y），寬r * w、高r * h。

2.2 圖像旋轉算法設計

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

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

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

高至少應為：

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

才能容納圖像。

利用canvas的rotate方法可以旋轉作圖時的坐標，不過旋轉時的原點是對象的左上角而非中心點，所以僅僅作旋轉操作會造成圖像的位置偏移。本項目中使用如下步驟來保證圖像的完整性（圖2.2）：

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

2）進行旋轉操作。

2.3 圖章算法設計

實現“圖章”的步驟與Photoshop的操作基本類似。按住Alt鍵并點擊鼠標，表示選擇圖章源。只點擊鼠標表示用圖章源覆蓋當前位置。在任何時候按Esc鍵可取消圖章操作。

為簡單起見，將圖章設為矩形，寬和高為固定值w、h。

首先獲取鼠標在圖像點擊的位置（x， y），由此獲取圖章的左上角應為（x - w / 2， y - h / 2）。再根據2.1節的算法，推知此圖章源在原圖像上的位置與尺寸：左上角（r * （x - w / 2）， r * （y - h / 2）），寬r * w，高r * h。

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

第三章 系統實現

3.1 圖像裁剪的實現

首先對畫布和繪圖環境做初始化：

已知劃定的矩形左上角坐標、寬度、高度和圖像的縮放比例rate，編寫方法cut實現圖像的剪裁。

3.2 圖像旋轉的實現

按照2.2節的算法計算出旋轉后的畫布尺寸，然后平移、旋轉、反向平移坐標，最后將原畫畫入新坐標。

3.3 圖章功能的實現

定義stp數據結構，存儲圖章的位置和大小：

響應鼠標點擊事件，獲取圖章源的位置。為區分鼠標選取的是圖章源還是目標，規定在選取圖章源的時候必須按住“Alt”鍵。

3.4 圖像上傳的實現

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

1）減少http請求數，提高頁面加載速度。

2）可通過URL直接解碼查看圖片。

其中toDataURL方法中的第二個參數0.8為經驗參數，取值范圍在0-1之間。數值越高表示分辨率越高，編碼過后的內容大小會大大超出原圖，一般取0.8 ～ 0.9之間。

4.總結

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

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

1）在程序中存儲每一步操作所產生的圖像數據。這種方法實現起來較為簡單，但數據存儲量巨大，造成了性能上的損失。

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

參考文獻：

[1]吳飛燕.基于HTML5 Canvas繪圖技術應用[J].電子測試，2018，04（04）：116-118.

[2]張衛國.基于HTML5的2D動畫的設計與實現[D].廣東省：中山大學，2014.

[3]易鵬.基于HTML5 Canvas的交互式圖形工具箱的研究與實現[D].陜西省：西北大學，2017.

[4]王青.基于HTML5_Canvas的3D粒子圖形動畫的設計[J].中國科技信息，2019，05：79-80.

[5]陳芬.計算機圖形圖像處理的關鍵技術研究[J].電腦知識與技術，2018，22：259-260.

作者簡介：陸正（1980-），男，江蘇蘇州人，講師，蘇州工業園區服務外包職業學院信息工程學院教師，研究方向：軟件技術、前端工程化。