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

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

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

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

以html5 canvas技術(shù)，設(shè)計(jì)了一款圖像編輯平臺(tái)。該平臺(tái)采MVC設(shè)計(jì)模式，分離了架構(gòu)模型、視覺顯示以及交互模塊，便于后期編輯。平臺(tái)分為繪制線條，顏色填充，圖像變換，編輯文字，導(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)盟對(duì)HTML標(biāo)準(zhǔn)進(jìn)行的第五次修訂。其目的在于在保持簡(jiǎn)單易讀的前提下，增加視頻和音頻支持、更強(qiáng)大的離線存儲(chǔ)、用于繪畫的元素、設(shè)備訪問以及更好的性能與集成度。與HTML 4比較下，HTML5增加和修改了一些標(biāo)簽元素。如多媒體相關(guān)的＜video＞,＜audio＞,＜canvas＞元素和與數(shù)據(jù)相關(guān)的＜section＞、＜article＞、＜header＞、＜nav＞、＜menu＞元素等。不僅如此，html5還支持SVG圖像格式，還提供了新的API，例如2D繪圖、離線存儲(chǔ)、拖拽、通訊、瀏覽歷史管理、文件API和位置API等。它允許大型的網(wǎng)站和應(yīng)用程序。正因?yàn)閔tml5是為跨平臺(tái)設(shè)計(jì)的，因此低功耗的設(shè)備也能流暢的運(yùn)行。

1.2 Canvas概述

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

最初Canvas的概念是由蘋果公司用在Mac OS X Webkit中創(chuàng)建控制板部件上。在Canvas出現(xiàn)之前，如果一個(gè)開發(fā)人員的工作需要繪圖的API，他只能選擇使用Adobe的Flash和SVG插件，或者選擇只有IE才支持的VML，也許還會(huì)逼得他們掌握其他一些稀奇古怪的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ù)，這使得繪圖變得更簡(jiǎn)單易用。正因如此，Canvas被納入了HTML5規(guī)范。相較于SVG圖像可以在不同分辨率下流暢地縮放，作為一個(gè)位圖畫布的canvas所繪制的圖形不可以被隨意擴(kuò)展。這也使Canvas提供的功能更原始，適合像素處理，動(dòng)態(tài)渲染和大數(shù)據(jù)量繪制。

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

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

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

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

2．1．1 用戶需求模型

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

圖1 用戶需求模型圖

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

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

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

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

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

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

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

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

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

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

本系統(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í)間、圖片編輯時(shí)間、編輯工程文件存放路徑信息，數(shù)據(jù)類型為Int和varchar兩類。

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

3.1 畫線

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

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

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

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

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

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

3.2 圖像變換

Canvas獲取圖像位置后，采用JavaScript中函數(shù)對(duì)圖像實(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的計(jì)量單位為弧度。若傳入的計(jì)量單位是角度的話需要轉(zhuǎn)換。

公式為：

Math．PI*rot/180

3.3 文字顯示

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

調(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 圖層

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

3.5 導(dǎo)出圖片

使用toDataURL()函數(shù)實(shí)現(xiàn)導(dǎo)出本地圖片功能。調(diào)用時(shí)需要將圖片的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)測(cè)試

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

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

5 總結(jié)

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

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

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

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