前言:

一个小学妹要我帮他做毕设,本着以人为本的原则我就答应了;

这小学妹是信息安全专业的,原以为是分析一些攻防策略,结果拿到开题报告傻眼了,做的是图像加密解密实现;分别是Arnold变换实现加密和基于logistics映射实现加密

(好像就是混沌加密吧,原谅我还没弄明白,下一篇会着重研究logistics映射)

传送门: 基于logistics映射的混沌图像加密

凭着大学时期用Matlab搞过图像重建,心里还是有点底子的~

接了,开搞!!

---

Arnold变换

Arnold变换可以看作是拉伸，压缩，折叠及拼接的过程。通过这一过程将离散化的数字图像矩阵中的点重新排列。

此变换称为二维Arnold变换，简称Arnold变换。该变换通过把原图像中的坐标为(x，y)像素点置换到位置实现加密。将数字图像视为一个矩阵，则经过Arnold变换后的图像变得混乱不堪。

(百度找的)

so~我的理解是这个变换的原理就是获取一副图中所有的像素点的rgba值然后形成一个矩阵,也就是二维数组,然后通过Arnold变换的公式打乱这些像素点在数组中的顺序,再生成一副新的图片,那么一次变换就结束了~

看起来不太难,接下来用代码实现一下

ps: 代码选择用js 和 html 中的canvas实现,据我观测,小学妹对js还是有一定基础的

代码具体实现步骤

1.创建html

html部分

2.获取元素

获取需要的对应的标签

3.获取图片

既然是处理图片肯定要先上传图片咯

通过input file 获取到上传的图片

获取图片

因为做图像加密只需要一张图片,所以就把canvas设置成和上传的图片一样大小就可以了

这里需要用到FileReader

获取了图片宽高咯

上面 ReadImage是自己实现的一个函数

!!!这里发现了一个问题,据我对Arnold变换的学习字后我发现,这算法是需要矩阵是一个N*N形式的矩阵,所以需要图片是一个正方形的图片,这怎么搞~~

回去翻了翻小学妹的开题报告,又发现了一个叫做图片增补算法的东西,好吧~我不会,但是我能弄出来一个正方形的图片,先用着吧~~

4.创建canvas函数

canvas构造函数

那么实例化这个函数就可以再view中添加一个canvas了

5.生成canvas

在之前获取到图片宽高的位置实例化canvas并把图画到canvas上去

这样页面上就出现了一个已经传上去的图咯

当当当~

上传好的图片

此时已经完成了百分之三十咯~~~~~

6.给按钮加上事件

创建一个按钮的构造函数用来控制按钮状态和绑定事件

按钮的构造函数

接下来就需要在点击事件中开始一系列操作了

7.获取canvas上的颜色数据

在Can上增加一个获取所有颜色数据的方法

获取所有颜色的方法

并在点击事件中调用

调用函数

查看一下控制台

控制台输出

颜色获取到了,就到了最核心的一部分了,算法实现

8.Arnold算法实现

矩阵运算公式

转换成代码怎么写嘞

代码实现

具体函数长这个样子

Arnold具体实现

为了以防万一,还是加了个拦截

9.调用算法转换坐标

转换坐标

在控制台输出了转换之后的坐标,但是肉眼无法观测数据转换是否正确

画出来看看吧~

10.重新绘制canvas

在Can中增加方法,接收一个数组,按数组rgba画出新的图像

重新绘制方法

在点击事件中调用

调用

然后测试一下~~

好了,图片已经变成这个鬼样子了

Arnold变换后的图片

至此,图片加密一次已经成功了

结:

Arnold变换数组周期性变换,所以在变换有限次数后就会得到原图像

这是变换第二次

第二次

这是变换第四次

第四次

---

去找学妹交差咯~ 下一篇更新logistics映射(混沌加密)