基于HTML5的图像混沌加密研究与实现

姚远　余攀

摘要；该文介绍了在网站开发中的最新版本HTML5基础之上，实现数字图像的混沌加密及其在网络传输的实现方法，对三维Lorenz混沌系统作离散化处理，用javascript语言和canva8技术实现三维Lorenz混沌迭代序列，分别对本地选择的数字图像的红、绿、蓝三基色信号进行混沌加密，并对使用Ajax传输到服务器端的加密图像进行混沌解密，提出了一种混沌应用到Canvas对图像处理的发展方向

关键词：HTMIA；canvas；混沌图像加密；Ajax

中图分类号：TN905；TN908 文献标识码：A 文章编号：1009-3044（2017）07-0066-03

隨着信息技术的发展，网络技术的不断提高，上网已成为人们生活不可缺少的一部分，人们对网页的图形和图像的处理的要求及加密技术也越来越高，图像具有像素间相关性高、冗余度大等特点，而利用网络来传递数据有着不可替代的优越性，与此同时，利用网络来传输数字图像数据，在传送过程中常会受到病毒攻击，信息窃取等人为攻击，选择合适的数字图像加密技术以及当下最新计算机网络技术，对提高图像的信息安全性有着至关的重要作用。

作为非线性系统之一的混沌系统，其特有的比如对初始条件的敏感性、不收敛性，非周期性、类噪声性等特性使得他具有天然的隐蔽性和长期的不可预测性，很适合应用于密码学领域。本文提供了通过HTML5表单选择本地图片数据，并通过canvas绘图技术与javascdpt的结合对图片进行数据处理，最终通过Ajax进行传输到后台进行解密保存，实现网页上在线加密传输。

1HTML5概述

HTML5不仅仅是一次简单的技术升级，更代表了未来web开发的方向，最早有来自Apple、Mozilla、Google、Opera等浏览器厂商的人组成，2004年成立。并开发HTML和web应用API，同时为各浏览器厂商及其其他有意向组织提供开放式合作，并与2012年HTML5规范编写完成。同以前的html相比，Html5并不是颠覆性的革新，保持一切新特性平滑过渡，并增加了许多的新功能，例如绘图，实时和跨源通讯，后台处理，HTML表单，视音频支持，绘图等等，html5会使HTML这个一度单纯的标记语言成为强力的开发工具，将彻底改变现有的web应用模式，最终完成将Web带入一个成熟应用平台的使命。

1.1HTML5 File对象

在HTML5中，Javascript得以获得更多的权限来处理文件，被允许获得文件的“文件名”，“大小”等等信息，并允许通过一些不同的方式，获得文件的内容，但这不意味着浏览器可以任意的访问用户的内容，只能被动的方式获得文件，切确的而言，可以通过file input和用户的拖放操作获取到文件，这些信息都被放在了File对象里面，在这里给出两种方式获得file对象的方法：

1）通过input获得file对象的方法

}

1.2Canvas

HTML5的canvas API，能方便地在web页面上进行图片的处理，而无须借助任何第三方插件的情况下，借助Javascript脚本在web页面进行绘图，例如直线、矩形、弧形、曲线等，可以绘制图片以及文字，同时能够获取图片的像素，对像素进行各种数学运算，实现对图像进行各种效果处理，用Canvas绘制的图像，交互性更加灵活，并且相比较其他web的图形图像处理技术，HTML5的canvas具有更方便、快捷的优势，是未来web上处理图形图像的趋势所在，主要的绘图函数介绍如表；

1.3Ajax

Ajax的特点是局部刷新页面、它并不是新技术，而是之前技术的整合，包括的技术有：javascript、XML、CSS、XMLHttpRequest，并且是异步发送请求以后，不等结果，由回调函数处理，它的核心原理主要是XMLHttpRequest对象，通过该对象向服务器发送请求，所有现代的浏览器都支持，使用方法如以下几个步骤；

（1）创建XMLHttpRequest对象

（2）使用XMLHttpRequest对象的属性与方法：

（a）方法：open（"GET/POST"，URL，true/false）；用来向服务器建立连接

send（data）：发送请求

（b）属性：

onreadystatechange：设置状态改变时的回调函数，回调函数用来获取服务器数据。

readyState：服务器状态响应

responseText：服务器返回的数据（文本格式）

responseXML：服务器返回的数据（XML格式）

2混沌加密方案

在一个高效而又便于实现的保密通信系统中，如何进行加解密是非常重要的环节，这里介绍一下图片数据加密过程，如下图所示：

2.1混沌加密算法的设计

本文设计的正李指数无简并离散时间系统，能满足正李指数的个数等于系统的维数，并且不存在零指数和负指数，正李指数的个数达到了最大，与此同时，通过调节系统的参数，使得正李指数尽可能大，与已有的混沌系统相比，正李指数无简并混沌系统具有更好的随机统计特性，设计过程如下；

1）制定标称系统的一般形式为

（1）

2）对矩阵C作相似变换，为了实施有效控制

（2）

式中P为非奇异矩阵。于是原来系统改为

（3）

3）设计控制矩阵B和反控制器g（σx（k），ε），对（2.3）式进行混沌反控制，得到的受控系统全局有界，系统表达式如下；

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

4）根据前面的表达式，进行极点配置，使得正李氏指数的个数达到最大置，最终得到正李指数无简并3D混沌系统的迭代方程

（5）

2.2加密方案的实现

对图像混沌加密过程如下；

Step1：打开数字图像文件，在瀏览器窗口中，通过Fge对象通过两种方式获取到图片数据，前面已给出获取的方法，并将获取的图片数据信息装载进一个数组容器里。

Step2：创建画布，宽高又选择的图片大小决定，并将选择的图片数据先进行显示，用来做对比，使用canvas的绘图函数getIrnageDataO获取图片数据并获取其中每一帧数据，这里代码如下：

Step3：先将图像置乱处理，再根据三维离散时间系统的方程迭代产生的混沌序列与置乱后的图像数据R，G，B进行按位运算，从而形成总的迭代序列，再将得到的序列去驱动状态方程，将图像信息隐藏到混沌序列里，不断改变每一帧图像数据，不断重复置乱与迭代。

Step4：将加密后的图片数据展示在画布上，并转换成合适的Blob格式进行Ajax传输，前面也给出传输的方法了，下面是展示代码：

Step5：服务器端得到的加密图像，解密过程是加密的逆过程，本文后台使用的是PHP语言解密，这里出于安全性不再叙述。

3具体的实现

本文中使用的是Dreamweaver+Wamp搭建了本地服务器来模拟正常的网站后台。从网上下载好Wamp后进行安装配置，并登录主页测试可使用，在Dreamwear中新建站点，并使用wamp中的www文件作为服务器的地址，使用一款los系统的手机和android手机分别登录搭建好的网站，以测试是否可正常使用，分别创建文件index.html，index.js，index.css，doAction.php。index.html是测试展示页面，主要负责将选择的图片和加密后的图片进行展示，index.cs8主要是控制展示的位置以及页面的整体布局，index.js主要是逻辑控制，获取到图片信息进行加密和传输，doAction.PHP主要是接收到浏览器端传输的加密图片，进行解密保存。下面给出测试的效果图：

4结论

HTML5作为时下流行的技术，是网页未来发展的趋势，作为HTML5核心的canvas技术，今后必然会活跃于舞台之上，成为web开发界一个重中之重的内容。本文探讨了Callvas作为图像处理软件的载体的可行性分析，并且结合在加密领域流行的混沌加密算法，再结合Ajax，实现了选择本地图片数据加密，并进行传输到服务器端解密保存的功能，论文也探讨了在浏览器这种有限的资源环境中，使用复杂的图像处理算法来实现客户端或者Flash才具备的处理能力，也为混沌加密算法应用提供了一个发展的方向。