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文件即可使用。

选择文件：
图片预览：
隐写信息：
隐写
隐写图片：
从隐写图片读取信息
读出的隐写内容：
window.onload = function() {var input = document.getElementById('file');input.addEventListener('change', importImage);var encodeButton = document.getElementById('encode');encodeButton.addEventListener('click', encode);var decodeButton = document.getElementById('decode');decodeButton.addEventListener('click', decode);};var importImage = function(e) {var reader = new FileReader();reader.onload = function(event) {var img = new Image();img.onload = function() {var ctx = document.getElementById('canvas').getContext('2d');ctx.canvas.width = img.width;ctx.canvas.height = img.height;ctx.drawImage(img, 0, 0);};img.src = event.target.result;};reader.readAsDataURL(e.target.files[0]);};//隐写并保存图片var encode = function() {//信息var message = document.getElementById('message').value;//隐写后的图片var output = document.getElementById('output');//画布var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');console.log(message)//是否超过能隐写的最大量var pixelCount = ctx.canvas.width * ctx.canvas.height;if ((message.length + 1) * 16 > pixelCount * 4 * 0.75) {alert('内容太多了，超过了可写入的最大量');return;}//核心函数：隐写var imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);encodeMessage(imgData.data, message);ctx.putImageData(imgData, 0, 0);alert('隐写成功，信息已隐藏到图片中');//显示出隐写后的图片output.src = canvas.toDataURL();};//读出隐写的信息var decode = function() {var ctx = document.getElementById('canvas').getContext('2d');var imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);//核心功能：从图片数据中读取隐写信息var message = decodeMessage(imgData.data);alert(message)document.getElementById('messageDecoded').innerHTML = message;};//将二进制编码信息转为字符串var getNumberFromBits = function(bytes, history) {var number = 0, pos = 0;while (pos < 16) {var loc = getNextLocation(history, bytes.length);var bit = getBit(bytes[loc], 0);number = setBit(number, pos, bit);pos++;}return number;};var getNextLocation = function(history, total) {var pos = history.length;var loc = Math.abs(pos + 1) % total;while (true) {if (loc >= total) {loc = 0;} else if (history.indexOf(loc) >= 0) {loc++;} else if ((loc + 1) % 4 === 0) {loc++;} else {history.push(loc);return loc;}}};var setBit = function(number, location, bit) {return (number & ~(1 << location)) | (bit << location);};//将信息字符串转为二进制编码var getMessageBits = function(message) {var messageBits = [];for (var i = 0; i < message.length; i++) {var code = message.charCodeAt(i);messageBits = messageBits.concat(getBitsFromNumber(code));}return messageBits;};var getBitsFromNumber = function(number) {var bits = [];for (var i = 0; i < 16; i++) {bits.push(getBit(number, i));}return bits;};var getBit = function(number, location) {return ((number >> location) & 1);};var encodeMessage = function(colors, message) {var messageBits = getBitsFromNumber(message.length);messageBits = messageBits.concat(getMessageBits(message));var history = [];var pos = 0;while (pos < messageBits.length) {var loc = getNextLocation(history, colors.length);colors[loc] = setBit(colors[loc], 0, messageBits[pos]);while ((loc + 1) % 4 !== 0) {loc++;}colors[loc] = 255;pos++;}};var decodeMessage = function(colors) {/*Obfuscated by JShaman.com*/var _0x265a=['length','push','fromCharCode','join'];var _0x1c66=function(_0x265a55,_0x1c6643){_0x265a55=_0x265a55-0x0;var _0x2081ad=_0x265a[_0x265a55];return _0x2081ad;};var _0x2ad986=function(_0x5d3dbb,_0x36e20f,_0x4c778b,_0x1e11f6,_0x377eb9){return _0x1c66(_0x1e11f6- -0x169,_0x4c778b);};var _0xeb9032=function(_0x1ff9d9,_0x7ca6ec,_0x5d43c2,_0xaf192e,_0x146982){return _0x1c66(_0xaf192e- -0x169,_0x5d43c2);};var _0x4e4429=function(_0x1099e4,_0x3d47d8,_0x9623bb,_0x8f809f,_0x2632e4){return _0x1c66(_0x8f809f- -0x169,_0x9623bb);};var _0x3ab227=function(_0xe7a97,_0x3e4f1d,_0x3dc243,_0x7d20c1,_0x541a1b){return _0x1c66(_0x7d20c1- -0x169,_0x3dc243);};var history=[];var messageSize=getNumberFromBits(colors,history);if((messageSize+0x1)*0x10>colors[_0x2ad986(-0x167,-0x169,-0x168,-0x169,-0x16a)]*0.75){return'';}var message=[];for(var i=0x0;i