前言:
一个小学妹要我帮他做毕设,本着以人为本的原则我就答应了;
这小学妹是信息安全专业的,原以为是分析一些攻防策略,结果拿到开题报告傻眼了,做的是图像加密解密实现;分别是Arnold变换实现加密和基于logistics映射实现加密
(好像就是混沌加密吧,原谅我还没弄明白,下一篇会着重研究logistics映射)
传送门: 基于logistics映射的混沌图像加密
凭着大学时期用Matlab搞过图像重建,心里还是有点底子的~
接了,开搞!!
Arnold变换
Arnold变换可以看作是拉伸，压缩，折叠及拼接的过程。通过这一过程将离散化的数字图像矩阵中的点重新排列。
此变换称为二维Arnold变换，简称Arnold变换。该变换通过把原图像中的坐标为(x，y)像素点置换到位置实现加密。将数字图像视为一个矩阵，则经过Arnold变换后的图像变得混乱不堪。
(百度找的)
so~我的理解是这个变换的原理就是获取一副图中所有的像素点的rgba值然后形成一个矩阵,也就是二维数组,然后通过Arnold变换的公式打乱这些像素点在数组中的顺序,再生成一副新的图片,那么一次变换就结束了~
看起来不太难,接下来用代码实现一下
ps: 代码选择用js 和 html 中的canvas实现,据我观测,小学妹对js还是有一定基础的
代码具体实现步骤
1.创建html
2.获取元素
获取需要的对应的标签
3.获取图片
既然是处理图片肯定要先上传图片咯
通过input file 获取到上传的图片
因为做图像加密只需要一张图片,所以就把canvas设置成和上传的图片一样大小就可以了
这里需要用到FileReader
上面 ReadImage是自己实现的一个函数
!!!这里发现了一个问题,据我对Arnold变换的学习字后我发现,这算法是需要矩阵是一个N*N形式的矩阵,所以需要图片是一个正方形的图片,这怎么搞~~
回去翻了翻小学妹的开题报告,又发现了一个叫做图片增补算法的东西,好吧~我不会,但是我能弄出来一个正方形的图片,先用着吧~~
4.创建canvas函数
那么实例化这个函数就可以再view中添加一个canvas了
5.生成canvas
在之前获取到图片宽高的位置实例化canvas并把图画到canvas上去
这样页面上就出现了一个已经传上去的图咯
当当当~
此时已经完成了百分之三十咯~~~~~
6.给按钮加上事件
创建一个按钮的构造函数用来控制按钮状态和绑定事件
接下来就需要在点击事件中开始一系列操作了
7.获取canvas上的颜色数据
在Can上增加一个获取所有颜色数据的方法
并在点击事件中调用
查看一下控制台
颜色获取到了,就到了最核心的一部分了,算法实现
8.Arnold算法实现
转换成代码怎么写嘞
具体函数长这个样子
为了以防万一,还是加了个拦截
9.调用算法转换坐标
在控制台输出了转换之后的坐标,但是肉眼无法观测数据转换是否正确
画出来看看吧~
10.重新绘制canvas
在Can中增加方法,接收一个数组,按数组rgba画出新的图像
在点击事件中调用
然后测试一下~~
好了,图片已经变成这个鬼样子了
至此,图片加密一次已经成功了
结:
Arnold变换数组周期性变换,所以在变换有限次数后就会得到原图像
这是变换第二次
这是变换第四次
去找学妹交差咯~ 下一篇更新logistics映射(混沌加密)
