1. 首页
  2. 百科
  3. 前端后端

JavaScript奇淫技巧：隐写术

栀子花开 • • 前端后端

JavaScript奇淫技巧：隐写术

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

什么是隐写术？

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

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

JavaScript奇淫技巧：隐写术

效果与用途

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

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

技术原理

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

JavaScript奇淫技巧：隐写术

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

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

JavaScript奇淫技巧：隐写术

用程序实现时，流程为：

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

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

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

4、保存，生成新图片。

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

源码解析

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

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

Html部分

JavaScript奇淫技巧：隐写术

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

JavaScript部分

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

JavaScript奇淫技巧：隐写术

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

JavaScript奇淫技巧：隐写术

将信息隐写到图片中：

JavaScript奇淫技巧：隐写术

核心代码：隐写操作：

JavaScript奇淫技巧：隐写术

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

JavaScript奇淫技巧：隐写术

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

JavaScript奇淫技巧：隐写术

JavaScript奇淫技巧：隐写术

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

JavaScript奇淫技巧：隐写术

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

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

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

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

JavaScript奇淫技巧：隐写术

JS代码“隐写”

在JShaman平台，对代码保护：

JavaScript奇淫技巧：隐写术

生成加密的代码：

JavaScript奇淫技巧：隐写术

再复制回原位置：

JavaScript奇淫技巧：隐写术

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

运行效果

JavaScript奇淫技巧：隐写术

完整源码

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

文章版权声明

 1 原创文章作者：栀子花开，如若转载，请注明出处： https://www.52hwl.com/37929.html

 2 温馨提示：软件侵权请联系469472785#qq.com（三天内删除相关链接）资源失效请留言反馈

 3 下载提示：如遇蓝奏云无法访问，请修改lanzous(把s修改成x)

 4 免责声明：本站为个人博客，所有软件信息均来自网络 修改版软件，加群广告提示为修改者自留，非本站信息，注意鉴别

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

栀子花开的头像

栀子花开注册用户

38 文章
2 评论
0 粉丝
这个人很懒，什么都没有留下～
上一篇 2023年7月15日 上午9:35
下一篇 2023年7月15日 上午9:35
磁力链接 广告招租 广告招租 广告招租 广告招租 广告招租

相关推荐