姚遠　余攀

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

關鍵詞：HTMIA；canvas；混沌圖像加密；Ajax

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

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

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

1HTML5概述

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

1.1HTML5 File對象

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

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

}

1.2Canvas

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

1.3Ajax

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

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

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

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

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

（b）屬性：

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

readyState：服務器狀態(tài)響應

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

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

2混沌加密方案

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

2.1混沌加密算法的設計

本文設計的正李指數(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)計特性，設計過程如下；

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

（1）

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

（2）

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

（3）

3）設計控制矩陣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ù)，不斷重復置亂與迭代。

Step4：將加密后的圖片數(shù)據(jù)展示在畫布上，并轉換成合適的Blob格式進行Ajax傳輸，前面也給出傳輸?shù)姆椒耍旅媸钦故敬a：

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

3具體的實現(xiàn)

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

4結論

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