Javascript实现的图片隐写术

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

javascript图片隐写术，感觉可以用它来干点有想法的事情

1、什么是图片隐写术？

权威的wiki说法是“隐写术是一门关于信息隐藏的技巧与科学，所谓信息隐藏指的是不让除预期的接收者之外的任何人知晓信息的传递事件或者信息的内容。”，图片隐写术简而言之就是利用图片来隐藏某些数据，让人一眼看去以为是很普通很正常的图片，但其实里面隐藏着某些“机密”数据。

据传911事件里，KB份子就是通过黄色图片来传递信息而躲过了FBI的监控。还有大众点评也是通过图片隐写术来保护自身合法权益。所以图片隐写术是一个双刃剑，就看你用它做什么了。

比如下面这张图片：

看起来是一张很漂亮的风景照片，但其实它里面却藏着一张美女图（注：美女图片来源于淘宝某店），如下：

是不是很惊艳？看得你热血沸腾鼻血都往外冲呢？这就是图片隐写术的历害之处，“机密”隐藏于无形之中！

2、图片隐写术是怎么做到的？

图片隐写有多种方式，我这里介绍的是采用图片的最低有效位（LSB）进行隐写。其原理就是图片的像素点都是由三原色（RGB）构成（如下图），由这三原色可以组成各种颜色，如CSS里的颜色定义#FFFFFF，即是三原色的16进制值写法，每个颜色各占用8bit。而LSB隐写就是修改像素中每个颜色值的最低位值，而这些修改，人眼一般是分辨不出来的，从而达到数据隐藏的目的。

譬如我们想把’A’隐藏进来的话，如下图，就可以把A转成16进制的0x61再转成二进制的01100001，再修改为红色通道的最低位为这些二进制串。

（注：以上图片和示例来源于Wooyun）

3、Javascript实现的图片隐写术

代码项目见GitHub： https://github.com/kingthy/imagemask

在线演示 https://ipfs.io/ipfs/QmUG1TKotQYsp6bSw6pX4crFWfhJRNTnJre7buEaYYBV72
使用示例

<script type="text/javascript" src="data:imagemask.js"></script>

<script type="text/javascript">

var mask = new ImageMask({

debug: false, //是否开启调试模式

charSize: 16, //字符的字节位数，默认为16，即字符最大值为0xFFFF

mixCount: 2,    //隐写数据要混合到图片颜色值里的最低位数，值范围在1-5，默认为2，如果大于3，则图片会失真很严重

lengthSize: 24 //数据长度值的占用字节位数，默认为24，也即数据长度最大值为16777215

});

</script>

隐写文本

//脚本里传入页面的canvas对象和要隐写的文本

var output = document.getElementById('output');

var canvas = document.getElementById('canvas');

mask.hideText(canvas, '要隐写的文本');

output.src = canvas.toDataURL();

隐写文件

//脚本里传入页面的canvas对象和要隐写的文件

var output = document.getElementById('output');

var canvas = document.getElementById('canvas');

var file = document.getElementById('file');

mask.hideFile(canvas, file.files[0], , function(result){

if(result.success){

output.src = canvas.toDataURL();

}else{

alert(result.message);

}

});

读出图片里隐写的文本

1 2	`var` `canvas = document.getElementById('canvas');` `var` `message = mask.revealText(canvas);`

读出图片里隐写的文件

1 2	`var` `canvas = document.getElementById('canvas');` `var` `file = mask.revealFile(canvas);` `//file.name = 文件名称， file.data = 文件数据`