<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>
