0
点赞
收藏
分享

微信扫一扫

JavaScript奇淫技巧:隐写术

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

什么是隐写术?

简单的来说,比如下面这张图中,隐藏着秘密信息。通过特殊的技术手段可以读取到其信息。

JavaScript奇淫技巧:隐写术_javascript

效果与用途:

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

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

技术原理:

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

JavaScript奇淫技巧:隐写术_html_02

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

得到值:"01100001",隐写会进行如下操作:

JavaScript奇淫技巧:隐写术_隐写_03

用程序实现时,流程为:

1、读取原图,得到图的像素级bit信息;

2、将要隐写的信息,转为2进制;

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

4、保存,生成新图片。

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

源码解析:

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

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

Html部分:

JavaScript奇淫技巧:隐写术_html_04

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

JavaScript部分:

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

JavaScript奇淫技巧:隐写术_html_05

选择图片后,显示在画布中:

JavaScript奇淫技巧:隐写术_javascript_06

将信息隐写到图片中:

JavaScript奇淫技巧:隐写术_javascript_07

核心代码:隐写操作:

JavaScript奇淫技巧:隐写术_html_08

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

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

JavaScript奇淫技巧:隐写术_javascript_09JavaScript奇淫技巧:隐写术_隐写_10

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

JavaScript奇淫技巧:隐写术_javascript_11

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

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

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

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

JavaScript奇淫技巧:隐写术_隐写_12

JShaman平台,对代码保护:

JavaScript奇淫技巧:隐写术_html_13

生成加密的代码:

JavaScript奇淫技巧:隐写术_html_14

再复制回原位置:

JavaScript奇淫技巧:隐写术_html_15

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

运行效果:

JavaScript奇淫技巧:隐写术_隐写_16

完整源码:

最后,附上完整源码,保存为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);

};

//选择文件后,将图片显示在canvas中

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>

举报

相关推荐

0 条评论