JavaScript奇淫技巧：隐写术

JavaScript奇淫技巧：隐写术

本文将用JavaScript实现“图片隐写术”。

什么是隐写术？

将文本或其它数据写入图片的技术，称为“隐写术”。

比如下面这张图中，便隐藏着秘密信息，虽然看起来只是一张图。

效果与用途

图片隐写术的效果是：可将信息写入图片，并可读取。

可用于：在图片中存放隐秘内容、给图片做不可见的版权标识，等等。

技术原理

图片，是由像素构成；像素都是由RGB（红绿蓝）三原色组成，比如css中用十六进制定义颜色：#FFFFFF。即红绿蓝各为FF。一个FF是转为二进制，是8bit:11111111，如果修改最后一位，是不影响颜色以及图片显示的。正因如此，“隐写术”会将要隐藏的信息，写入到这个8bit的最后一位。

例如：要隐写字符“a”，先转化a为2进制："a".charCodeAt(0).toString(2)

得到值："01100001"，隐写会进行如下操作：

用程序实现时，流程为：

1、读取原图，得到图的像素级bit信息；

2、将要隐写的信息，转为2进制；

3、将二进制的隐写信息，写入到每个像素最后一位；

4、保存，生成新图片。

要读取信息时，获取图片像素最后一位，并转二进制为字符信息。

源码解析

以上介绍了技术原理，接下来，编程实现。先对源码功能做介绍，最后将给出完整的功能源码。

本例程源码，将在一个html文件中实现，有html代码和JavaScript代码两部分组成。

Html部分

html代码有两个组成部分：读取图片并隐写内容、从隐写图片读取信息。

JavaScript部分

初始化时，给图片文件读取、隐写信息按钮、读取信息按钮等页面元素绑定操作函数：

选择图片后，显示在画布中：

将信息隐写到图片中：

核心代码：隐写操作：

隐写时，将信息转为二进制并保存到图片各像素最低位。

前面是隐写部分，接下来，是从隐写图片中读取信息：

隐写时，是将信息转为二进制，此时是逆操作：

以上即是全部功能代码。总计不到200行，实现了完整的隐写和读取。

实际应用时，隐写部分和读取信息部分，应该是独立、分离使用的。

为了防止读取逻辑被他人分析识破，可以对读取隐写的功能代码做保护。

比如对下面这部分JS代码，使用JShaman进行混淆加密：

JS代码“隐写”

在JShaman平台，对代码保护：

生成加密的代码：

再复制回原位置：

这样JS代码将不能被分析，而运行不受影响。

运行效果

完整源码

最后，附上完整源码，保存为html文件即可使用。

选择文件：

图片预览：


隐写信息：

隐写


隐写图片：

从隐写图片读取信息


读出的隐写内容：

w3sft：JavaScript奇淫技巧：20行代码，实现屏幕录像

w3sft：JavaScript奇淫技巧：清理无效的垃圾代码

w3sft：JavaScript奇淫技巧：利用数组加密并压缩代码

w3sft：挑战前端黑科技，数值的七种写法

w3sft：JS奇淫技巧：alert有几种写法？

w3sft：JS奇淫技巧：一行赋值语句，能玩出多少花样？

w3sft：JavaScript奇淫技巧：命令行语法高亮