JavaScript奇淫技巧：隐写术
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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文件即可使用。
<html>
<body>
选择文件：<input type=file id=file /><br>
图片预览：<canvas id=canvas style="width: 600px;"></canvas><br>
<!--要隐写的信息-->
隐写信息：<textarea id=message></textarea><br>
<button id=encode class=submit>隐写</button><br>
<!--隐写后的图片-->
隐写图片：<img id=output style="width: 600px;"/><br>
<button id=decode>从隐写图片读取信息</button><br>
<!--解密出的信息-->
读出的隐写内容：<div id=messageDecoded></div><br>
<script>
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<messageSize;i++)var code=getNumberFromBits(colors,history);message[_0x2ad986(-0x168,-0x169,-0x16a,-0x168,-0x169)](String[_0x4e4429(-0x168,-0x168,-0x167,-0x167,-0x167)](code));return message[_0x4e4429(-0x166,-0x165,-0x166,-0x166,-0x166)]();
;
</script>
</body>
</html>
以上是关于JavaScript奇淫技巧：隐写术的主要内容，如果未能解决你的问题，请参考以下文章