李豐章 張迎希 北京信息科技大學(xué)

基于HTML5 Canvas技術(shù)的圖像編輯平臺

李豐章 張迎希 北京信息科技大學(xué)

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

html5 canvas 圖像編輯 圖像處理

1 html5與canvas概述

1．1 html5 概述

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

1.2 Canvas概述

canvas元素是html5標(biāo)準(zhǔn)中的元素，它作用于動態(tài)網(wǎng)頁、腳本渲染的2D圖形和位圖圖像設(shè)計。canvas元素主要通過JavaScript等腳本語言來實現(xiàn)，可以實現(xiàn)繪制盒、圓、路徑、字符以及添加圖像等功能。

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

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

2 系統(tǒng)需求和基本框架

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

2.1 圖像編輯平臺系統(tǒng)分析

本系統(tǒng)設(shè)計目的是開發(fā)一個基于html5 canvas技術(shù)的圖片編輯平臺。能夠?qū)崿F(xiàn)繪制清新、流暢的圖片編輯瀏覽，可用于名片，紀(jì)念冊，書籍封面等圖片的設(shè)計。

2．1．1 用戶需求模型

經(jīng)過調(diào)研分析，分析出用戶需求模型，如圖1所示：

圖1 用戶需求模型圖

2．1．2 系統(tǒng)需求分析

進(jìn)一步分析出細(xì)節(jié)需求，為系統(tǒng)實現(xiàn)提供細(xì)節(jié)信息。需求表格如表1所示：

表1 系統(tǒng)需求分析表

2.2 系統(tǒng)運行環(huán)境

本系統(tǒng)基于web，在開發(fā)過程中需要搭建服務(wù)器環(huán)境，具體的搭建流程為：

2．2．1 服務(wù)器端環(huán)境搭建

該平臺web服務(wù)器基于Linux centos構(gòu)建。后端語言基于PHP管理邏輯代碼。

2．2．2 客戶端環(huán)境搭建

主要采用PHPstrom軟件進(jìn)行開發(fā)。

2.3 數(shù)據(jù)庫設(shè)計

本系統(tǒng)采用Mysql作為數(shù)據(jù)庫系統(tǒng)。其數(shù)據(jù)表結(jié)構(gòu)如下：

2．3．1 用戶信息數(shù)據(jù)表

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

2．3．2 圖片編輯表

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

3 關(guān)鍵技術(shù)分析

3.1 畫線

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

多段線條拼接線采用數(shù)組記錄多段線條起始點于中間點信息。并且繪制時擁有多種狀態(tài)：鼠標(biāo)按下，開始繪制；鼠標(biāo)移動時，顯示繪制路徑；鼠標(biāo)抬起，結(jié)束繪制。鼠標(biāo)移動時，就采用stroke（）函數(shù)顯示直線移動路徑。單擊左鍵時，將線段起始，中途折點記錄進(jìn)數(shù)組。檢測雙擊左鍵為結(jié)束繪制狀態(tài)，用來區(qū)分單機(jī)左鍵產(chǎn)生的中途線段折點。

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

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

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

圖二 貝賽爾曲線構(gòu)造示意圖

3.2 圖像變換

Canvas獲取圖像位置后，采用JavaScript中函數(shù)對圖像實現(xiàn)平移，旋轉(zhuǎn)，縮放等操作。

圖片類基本屬性值如下：

1width ： 600, // 設(shè)置畫布的寬

2 height ： 200, // 設(shè)置畫布的高

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

4maxScale ： 6．0, // 最大放大倍數(shù)

5minScale ： 0．7, // 最小放大倍數(shù)

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

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

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

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

公式為：

Math．PI*rot/180

3.3 文字顯示

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

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

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

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

3.4 圖層

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

3.5 導(dǎo)出圖片

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

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

2window．location．href=image；

4 系統(tǒng)測試

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

圖三 系統(tǒng)運行效果圖

5 總結(jié)

該平臺在html canvas技術(shù)的支持下，建立了基于網(wǎng)頁的圖片在線編輯平臺。并且保留后期擴(kuò)展接口，為更 豐富的圖像處理算法擴(kuò)展留下了更大的空間?；緷M足了用戶所希望的快速便捷的個性化定制需求。擁有廣闊的市場應(yīng)用發(fā)展空間。

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

[2]劉芳. 面向大規(guī)模定制的產(chǎn)品平臺設(shè)計理論研究及其軟件實現(xiàn)[D].河北工業(yè)大學(xué),2005.

項目名稱本文由北京信息科技大學(xué)計算機(jī)學(xué)院大學(xué)生創(chuàng)新實踐基地建設(shè)項目資助，項目號：5111723403。