基于HTML5 Canvas技術的圖像編輯平臺

李豐章 張迎希 北京信息科技大學

基于HTML5 Canvas技術的圖像編輯平臺

李豐章 張迎希 北京信息科技大學

以html5 canvas技術，設計了一款圖像編輯平臺。該平臺采MVC設計模式，分離了架構模型、視覺顯示以及交互模塊，便于后期編輯。平臺分為繪制線條，顏色填充，圖像變換，編輯文字，導出圖片等功能。增進了基于web的圖片處理技術的工程技術發展。

html5 canvas 圖像編輯 圖像處理

1 html5與canvas概述

1．1 html5 概述

HTML5是定義web內容HTML標準的最新的版本，是在2014年10月由萬維網w3c聯盟對HTML標準進行的第五次修訂。其目的在于在保持簡單易讀的前提下，增加視頻和音頻支持、更強大的離線存儲、用于繪畫的元素、設備訪問以及更好的性能與集成度。與HTML 4比較下，HTML5增加和修改了一些標簽元素。如多媒體相關的＜video＞,＜audio＞,＜canvas＞元素和與數據相關的＜section＞、＜article＞、＜header＞、＜nav＞、＜menu＞元素等。不僅如此，html5還支持SVG圖像格式，還提供了新的API，例如2D繪圖、離線存儲、拖拽、通訊、瀏覽歷史管理、文件API和位置API等。它允許大型的網站和應用程序。正因為html5是為跨平臺設計的，因此低功耗的設備也能流暢的運行。

1.2 Canvas概述

canvas元素是html5標準中的元素，它作用于動態網頁、腳本渲染的2D圖形和位圖圖像設計。canvas元素主要通過JavaScript等腳本語言來實現，可以實現繪制盒、圓、路徑、字符以及添加圖像等功能。

最初Canvas的概念是由蘋果公司用在Mac OS X Webkit中創建控制板部件上。在Canvas出現之前，如果一個開發人員的工作需要繪圖的API，他只能選擇使用Adobe的Flash和SVG插件，或者選擇只有IE才支持的VML，也許還會逼得他們掌握其他一些稀奇古怪的JavaScript技巧。2005年Gecko和2006年Opera瀏覽器采用了Canvas技術。直到web超文本標準化應用技術工作組，將其納為新一代的web標準化開發技術，才改善了web中繪圖困難的問題。

HTML5 Canvas提供了各種繪圖工具函數，這使得繪圖變得更簡單易用。正因如此，Canvas被納入了HTML5規范。相較于SVG圖像可以在不同分辨率下流暢地縮放，作為一個位圖畫布的canvas所繪制的圖形不可以被隨意擴展。這也使Canvas提供的功能更原始，適合像素處理，動態渲染和大數據量繪制。

2 系統需求和基本框架

隨著市場經濟的發展，人們的需求從單一，實用慢慢發展成為多元化的趨勢。人們對個性鮮明，獨一無二的產品有了更加深刻的需求。多樣化，定制化的理念慢慢深入人心。故為了順應時代潮流，個性化圖像編輯平臺應運而生。

2.1 圖像編輯平臺系統分析

本系統設計目的是開發一個基于html5 canvas技術的圖片編輯平臺。能夠實現繪制清新、流暢的圖片編輯瀏覽，可用于名片，紀念冊，書籍封面等圖片的設計。

2．1．1 用戶需求模型

經過調研分析，分析出用戶需求模型，如圖1所示：

圖1 用戶需求模型圖

2．1．2 系統需求分析

進一步分析出細節需求，為系統實現提供細節信息。需求表格如表1所示：

表1 系統需求分析表

2.2 系統運行環境

本系統基于web，在開發過程中需要搭建服務器環境，具體的搭建流程為：

2．2．1 服務器端環境搭建

該平臺web服務器基于Linux centos構建。后端語言基于PHP管理邏輯代碼。

2．2．2 客戶端環境搭建

主要采用PHPstrom軟件進行開發。

2.3 數據庫設計

本系統采用Mysql作為數據庫系統。其數據表結構如下：

2．3．1 用戶信息數據表

該表中包含用戶ID、用戶昵稱、性別、聯系方式、聯系地址等信息，數據類型為Int和varchar兩類。

2．3．2 圖片編輯表

該表中包含圖片名稱、圖片創建時間、圖片編輯時間、編輯工程文件存放路徑信息，數據類型為Int和varchar兩類。

3 關鍵技術分析

3.1 畫線

Html5 canvas技術是實現基于狀態方法的繪制。所以，我們要先想好繪圖路徑，設置好線段狀態，然后再來開始繪制圖形。具體表示方法為：首先使用moveTo()函數繪制的起點，其次使用lineTo()函數，表示起點和終點之間的直線連接，最后使用stroke()函數來繪制線段。最終達到繪制好一條線段的目的。

多段線條拼接線采用數組記錄多段線條起始點于中間點信息。并且繪制時擁有多種狀態：鼠標按下，開始繪制；鼠標移動時，顯示繪制路徑；鼠標抬起，結束繪制。鼠標移動時，就采用stroke（）函數顯示直線移動路徑。單擊左鍵時，將線段起始，中途折點記錄進數組。檢測雙擊左鍵為結束繪制狀態，用來區分單機左鍵產生的中途線段折點。

繪制曲線采用貝塞爾二次曲線法。貝塞爾曲線需要設置三個點，并且保證第一點，第三點就是弧線的起始，結束點。曲線的弧度由第二點控制。具體原理如示意圖2所示。其構造代碼為：

1context．moveTo(x0,y0) // 初始點

2context．quadraticCurveTo( x1,y1, x2,y2)； //x1,y1 控制點 //x2,y2結尾點

圖二 貝賽爾曲線構造示意圖

3.2 圖像變換

Canvas獲取圖像位置后，采用JavaScript中函數對圖像實現平移，旋轉，縮放等操作。

圖片類基本屬性值如下：

1width ： 600, // 設置畫布的寬

2 height ： 200, // 設置畫布的高

3imgSrc ： '．．/images/001．jpg', // 圖像路徑

4maxScale ： 6．0, // 最大放大倍數

5minScale ： 0．7, // 最小放大倍數

6maxWidth ： 550, // 最大平移寬度

7maxHeight ： 180, // 最大平移高度

8step ： 1．0// 每次放大、縮小 倍數的變化值

平移圖像采用context．translat(x,y)函數。x是水平方向平移的距離，y是垂直方向平移的距離。縮放圖像采用context．scale(x,y)函數。其中x為水平方向縮放的比例，y是垂直方向縮放的比例。旋轉圖像采用context．rotate(rot)函數。該方法是用來設置圖片的旋轉角度，其中rot的計量單位為弧度。若傳入的計量單位是角度的話需要轉換。

公式為：

Math．PI*rot/180

3.3 文字顯示

文字顯示功能，調用函數為ctx．strokeText(string,x,y,[maxlen])。其中x，y是文本的坐標。maxlen是可選參數，設置所寫文字的最大長度。

調整文字參數包括：context．font = [font-style,fontvariant,font-weight,font-size,font-family]。分別設置文字的樣式，大小寫字母字體，文字的筆畫粗細。文字的大小，文字的系列。

context．textAlign = [left,center,right]。分別設置文字的水平布局屬性。使文字居中、居左、居右布局。

context．textBaseline = [top,middle,bottom]。分別設置文字的垂直布局屬性。使文字居上、居中、居下布局。

3.4 圖層

為了管理各個層次頁面與工具組件的層疊關系，引入了圖層概念。采用了一個包含了多個子元素的html DIV元素。其每個子元素表示一個圖層中的內容。最上層層為畫布層，為主要操作界面，來繪制圖形元素如連線，多邊形等。中間層是交互畫布層，用于繪制交互過程中得界面效果，比如框選選中時出現的虛線矩形框。最后是工具欄圖層，當鼠標位于界面右側范圍時，工具欄會自動顯示，用于產生編輯畫布的工具。

3.5 導出圖片

使用toDataURL()函數實現導出本地圖片功能。調用時需要將圖片的mimeType，強制改成steam流類型的。如‘image/octet-stream’，就可以另存為圖片功能。

1var image = myCanvas．toDataURL("images/png")．replace("images/png", "image/octet-stream")；

2window．location．href=image；

4 系統測試

本系統中實現了圖像處理平臺基本功能。其中組件功能需要將SVG代碼融合網頁文件庫，即可使用組件功能。且基本組件，自定義組件，文字插入功能均運行正常。右側工具欄，畫線，多段線條，自由曲線，選擇，上傳，下載等功能運行穩定，滿足用戶使用需求。系統運行效果示意圖如圖3所示。

圖三 系統運行效果圖

5 總結

該平臺在html canvas技術的支持下，建立了基于網頁的圖片在線編輯平臺。并且保留后期擴展接口，為更 豐富的圖像處理算法擴展留下了更大的空間。基本滿足了用戶所希望的快速便捷的個性化定制需求。擁有廣闊的市場應用發展空間。

[1]朱文. 基于HTML5Canvas技術的在線圖像處理方法的研究[D].華南理工大學,2013.

[2]劉芳. 面向大規模定制的產品平臺設計理論研究及其軟件實現[D].河北工業大學,2005.

項目名稱本文由北京信息科技大學計算機學院大學生創新實踐基地建設項目資助，項目號：5111723403。