姚遠　余攀

摘要；該文介紹了在網(wǎng)站開發(fā)中的最新版本HTML5基礎(chǔ)之上，實現(xiàn)數(shù)字圖像的混沌加密及其在網(wǎng)絡(luò)傳輸?shù)膶崿F(xiàn)方法，對三維Lorenz混沌系統(tǒng)作離散化處理，用javascript語言和canva8技術(shù)實現(xiàn)三維Lorenz混沌迭代序列，分別對本地選擇的數(shù)字圖像的紅、綠、藍三基色信號進行混沌加密，并對使用Ajax傳輸?shù)椒?wù)器端的加密圖像進行混沌解密，提出了一種混沌應(yīng)用到Canvas對圖像處理的發(fā)展方向

關(guān)鍵詞：HTMIA；canvas；混沌圖像加密；Ajax

中圖分類號：TN905；TN908 文獻標(biāo)識碼：A 文章編號：1009-3044（2017）07-0066-03

隨著信息技術(shù)的發(fā)展，網(wǎng)絡(luò)技術(shù)的不斷提高，上網(wǎng)已成為人們生活不可缺少的一部分，人們對網(wǎng)頁的圖形和圖像的處理的要求及加密技術(shù)也越來越高，圖像具有像素間相關(guān)性高、冗余度大等特點，而利用網(wǎng)絡(luò)來傳遞數(shù)據(jù)有著不可替代的優(yōu)越性，與此同時，利用網(wǎng)絡(luò)來傳輸數(shù)字圖像數(shù)據(jù)，在傳送過程中常會受到病毒攻擊，信息竊取等人為攻擊，選擇合適的數(shù)字圖像加密技術(shù)以及當(dāng)下最新計算機網(wǎng)絡(luò)技術(shù)，對提高圖像的信息安全性有著至關(guān)的重要作用。

作為非線性系統(tǒng)之一的混沌系統(tǒng)，其特有的比如對初始條件的敏感性、不收斂性，非周期性、類噪聲性等特性使得他具有天然的隱蔽性和長期的不可預(yù)測性，很適合應(yīng)用于密碼學(xué)領(lǐng)域。本文提供了通過HTML5表單選擇本地圖片數(shù)據(jù)，并通過canvas繪圖技術(shù)與javascdpt的結(jié)合對圖片進行數(shù)據(jù)處理，最終通過Ajax進行傳輸?shù)胶笈_進行解密保存，實現(xiàn)網(wǎng)頁上在線加密傳輸。

1HTML5概述

HTML5不僅僅是一次簡單的技術(shù)升級，更代表了未來web開發(fā)的方向，最早有來自Apple、Mozilla、Google、Opera等瀏覽器廠商的人組成，2004年成立。并開發(fā)HTML和web應(yīng)用API，同時為各瀏覽器廠商及其其他有意向組織提供開放式合作，并與2012年HTML5規(guī)范編寫完成。同以前的html相比，Html5并不是顛覆性的革新，保持一切新特性平滑過渡，并增加了許多的新功能，例如繪圖，實時和跨源通訊，后臺處理，HTML表單，視音頻支持，繪圖等等，html5會使HTML這個一度單純的標(biāo)記語言成為強力的開發(fā)工具，將徹底改變現(xiàn)有的web應(yīng)用模式，最終完成將Web帶入一個成熟應(yīng)用平臺的使命。

1.1HTML5 File對象

在HTML5中，Javascript得以獲得更多的權(quán)限來處理文件，被允許獲得文件的“文件名”，“大小”等等信息，并允許通過一些不同的方式，獲得文件的內(nèi)容，但這不意味著瀏覽器可以任意的訪問用戶的內(nèi)容，只能被動的方式獲得文件，切確的而言，可以通過file input和用戶的拖放操作獲取到文件，這些信息都被放在了File對象里面，在這里給出兩種方式獲得file對象的方法：

1）通過input獲得file對象的方法

}

1.2Canvas

HTML5的canvas API，能方便地在web頁面上進行圖片的處理，而無須借助任何第三方插件的情況下，借助Javascript腳本在web頁面進行繪圖，例如直線、矩形、弧形、曲線等，可以繪制圖片以及文字，同時能夠獲取圖片的像素，對像素進行各種數(shù)學(xué)運算，實現(xiàn)對圖像進行各種效果處理，用Canvas繪制的圖像，交互性更加靈活，并且相比較其他web的圖形圖像處理技術(shù)，HTML5的canvas具有更方便、快捷的優(yōu)勢，是未來web上處理圖形圖像的趨勢所在，主要的繪圖函數(shù)介紹如表；

1.3Ajax

Ajax的特點是局部刷新頁面、它并不是新技術(shù)，而是之前技術(shù)的整合，包括的技術(shù)有：javascript、XML、CSS、XMLHttpRequest，并且是異步發(fā)送請求以后，不等結(jié)果，由回調(diào)函數(shù)處理，它的核心原理主要是XMLHttpRequest對象，通過該對象向服務(wù)器發(fā)送請求，所有現(xiàn)代的瀏覽器都支持，使用方法如以下幾個步驟；

（1）創(chuàng)建XMLHttpRequest對象

（2）使用XMLHttpRequest對象的屬性與方法：

（a）方法：open（"GET/POST"，URL，true/false）；用來向服務(wù)器建立連接

send（data）：發(fā)送請求

（b）屬性：

onreadystatechange：設(shè)置狀態(tài)改變時的回調(diào)函數(shù)，回調(diào)函數(shù)用來獲取服務(wù)器數(shù)據(jù)。

readyState：服務(wù)器狀態(tài)響應(yīng)

responseText：服務(wù)器返回的數(shù)據(jù)（文本格式）

responseXML：服務(wù)器返回的數(shù)據(jù)（XML格式）

2混沌加密方案

在一個高效而又便于實現(xiàn)的保密通信系統(tǒng)中，如何進行加解密是非常重要的環(huán)節(jié)，這里介紹一下圖片數(shù)據(jù)加密過程，如下圖所示：

2.1混沌加密算法的設(shè)計

本文設(shè)計的正李指數(shù)無簡并離散時間系統(tǒng)，能滿足正李指數(shù)的個數(shù)等于系統(tǒng)的維數(shù)，并且不存在零指數(shù)和負指數(shù)，正李指數(shù)的個數(shù)達到了最大，與此同時，通過調(diào)節(jié)系統(tǒng)的參數(shù)，使得正李指數(shù)盡可能大，與已有的混沌系統(tǒng)相比，正李指數(shù)無簡并混沌系統(tǒng)具有更好的隨機統(tǒng)計特性，設(shè)計過程如下；

1）制定標(biāo)稱系統(tǒng)的一般形式為

（1）

2）對矩陣C作相似變換，為了實施有效控制

（2）

式中P為非奇異矩陣。于是原來系統(tǒng)改為

（3）

3）設(shè)計控制矩陣B和反控制器g（σx（k），ε），對（2.3）式進行混沌反控制，得到的受控系統(tǒng)全局有界，系統(tǒng)表達式如下；

x（k+1）=Ax（k）+Bg（σx（k），ε） （4）

4）根據(jù)前面的表達式，進行極點配置，使得正李氏指數(shù)的個數(shù)達到最大置，最終得到正李指數(shù)無簡并3D混沌系統(tǒng)的迭代方程

（5）

2.2加密方案的實現(xiàn)

對圖像混沌加密過程如下；

Step1：打開數(shù)字圖像文件，在瀏覽器窗口中，通過Fge對象通過兩種方式獲取到圖片數(shù)據(jù)，前面已給出獲取的方法，并將獲取的圖片數(shù)據(jù)信息裝載進一個數(shù)組容器里。

Step2：創(chuàng)建畫布，寬高又選擇的圖片大小決定，并將選擇的圖片數(shù)據(jù)先進行顯示，用來做對比，使用canvas的繪圖函數(shù)getIrnageDataO獲取圖片數(shù)據(jù)并獲取其中每一幀數(shù)據(jù)，這里代碼如下：

Step3：先將圖像置亂處理，再根據(jù)三維離散時間系統(tǒng)的方程迭代產(chǎn)生的混沌序列與置亂后的圖像數(shù)據(jù)R，G，B進行按位運算，從而形成總的迭代序列，再將得到的序列去驅(qū)動狀態(tài)方程，將圖像信息隱藏到混沌序列里，不斷改變每一幀圖像數(shù)據(jù)，不斷重復(fù)置亂與迭代。

Step4：將加密后的圖片數(shù)據(jù)展示在畫布上，并轉(zhuǎn)換成合適的Blob格式進行Ajax傳輸，前面也給出傳輸?shù)姆椒?，下面是展示代碼：

Step5：服務(wù)器端得到的加密圖像，解密過程是加密的逆過程，本文后臺使用的是PHP語言解密，這里出于安全性不再敘述。

3具體的實現(xiàn)

本文中使用的是Dreamweaver+Wamp搭建了本地服務(wù)器來模擬正常的網(wǎng)站后臺。從網(wǎng)上下載好Wamp后進行安裝配置，并登錄主頁測試可使用，在Dreamwear中新建站點，并使用wamp中的www文件作為服務(wù)器的地址，使用一款los系統(tǒng)的手機和android手機分別登錄搭建好的網(wǎng)站，以測試是否可正常使用，分別創(chuàng)建文件index.html，index.js，index.css，doAction.php。index.html是測試展示頁面，主要負責(zé)將選擇的圖片和加密后的圖片進行展示，index.cs8主要是控制展示的位置以及頁面的整體布局，index.js主要是邏輯控制，獲取到圖片信息進行加密和傳輸，doAction.PHP主要是接收到瀏覽器端傳輸?shù)募用軋D片，進行解密保存。下面給出測試的效果圖：

4結(jié)論

HTML5作為時下流行的技術(shù)，是網(wǎng)頁未來發(fā)展的趨勢，作為HTML5核心的canvas技術(shù)，今后必然會活躍于舞臺之上，成為web開發(fā)界一個重中之重的內(nèi)容。本文探討了Callvas作為圖像處理軟件的載體的可行性分析，并且結(jié)合在加密領(lǐng)域流行的混沌加密算法，再結(jié)合Ajax，實現(xiàn)了選擇本地圖片數(shù)據(jù)加密，并進行傳輸?shù)椒?wù)器端解密保存的功能，論文也探討了在瀏覽器這種有限的資源環(huán)境中，使用復(fù)雜的圖像處理算法來實現(xiàn)客戶端或者Flash才具備的處理能力，也為混沌加密算法應(yīng)用提供了一個發(fā)展的方向。