javascript图片隐写术,感觉可以用它来干点有想法的事情
1、什么是图片隐写术?
权威的wiki说法是“隐写术是一门关于信息隐藏的技巧与科学,所谓信息隐藏指的是不让除预期的接收者之外的任何人知晓信息的传递事件或者信息的内容。”,图片隐写术简而言之就是利用图片来隐藏某些数据,让人一眼看去以为是很普通很正常的图片,但其实里面隐藏着某些“机密”数据。
据传911事件里,KB份子就是通过黄色图片来传递信息而躲过了FBI的监控。还有大众点评也是通过图片隐写术来保护自身合法权益。所以图片隐写术是一个双刃剑,就看你用它做什么了。
比如下面这张图片:

看起来是一张很漂亮的风景照片,但其实它里面却藏着一张美女图(注:美女图片来源于淘宝某店),如下:

是不是很惊艳?看得你热血沸腾鼻血都往外冲呢?这就是图片隐写术的历害之处,“机密”隐藏于无形之中!
2、图片隐写术是怎么做到的?
图片隐写有多种方式,我这里介绍的是采用图片的最低有效位(LSB)进行隐写。其原理就是图片的像素点都是由三原色(RGB)构成(如下图),由这三原色可以组成各种颜色,如CSS里的颜色定义#FFFFFF,即是三原色的16进制值写法,每个颜色各占用8bit。而LSB隐写就是修改像素中每个颜色值的最低位值,而这些修改,人眼一般是分辨不出来的,从而达到数据隐藏的目的。

譬如我们想把’A’隐藏进来的话,如下图,就可以把A转成16进制的0x61再转成二进制的01100001,再修改为红色通道的最低位为这些二进制串。

(注:以上图片和示例来源于Wooyun)
3、Javascript实现的图片隐写术
代码项目见GitHub: https://github.com/kingthy/imagemask
<script type="text/javascript" src="data:imagemask.js"></script>
<script type="text/javascript">
var mask = new ImageMask({
debug: false, //是否开启调试模式
charSize: 16, //字符的字节位数,默认为16,即字符最大值为0xFFFF
mixCount: 2, //隐写数据要混合到图片颜色值里的最低位数,值范围在1-5,默认为2,如果大于3,则图片会失真很严重
lengthSize: 24 //数据长度值的占用字节位数,默认为24,也即数据长度最大值为16777215
});
</script>
- 隐写文本
//脚本里传入页面的canvas对象和要隐写的文本
var output = document.getElementById('output');
var canvas = document.getElementById('canvas');
mask.hideText(canvas, '要隐写的文本');
output.src = canvas.toDataURL();
- 隐写文件
//脚本里传入页面的canvas对象和要隐写的文件
var output = document.getElementById('output');
var canvas = document.getElementById('canvas');
var file = document.getElementById('file');
mask.hideFile(canvas, file.files[0], , function(result){
if(result.success){
output.src = canvas.toDataURL();
}else{
alert(result.message);
}
});
- 读出图片里隐写的文本
var canvas = document.getElementById('canvas');
var message = mask.revealText(canvas);
- 读出图片里隐写的文件
var canvas = document.getElementById('canvas');
var file = mask.revealFile(canvas); //file.name = 文件名称, file.data = 文件数据
4、示例图片
- 原图

- 隐写一章3千多字的小说内容后的图片效果

(隐写什么小说内容,各位有兴趣的将图片保存下来,然后在演示页面里读出来即可知道。)
以上两张(包括上面有美女的那张)图片效果几乎是一样的,人眼是看不出来有任何变化。
5、附加说明
1)、LSB方式的隐写图片只能存储为PNG或者BMP图片格式,并且不允许再采用有损压缩(比如JPEG),否则会丢失隐写的数据!
2)、图片里可以隐写任何数据,并且可以存储的数据多少由图片的大小(长宽)来决定。也许一张图片就能存储下一部圣经的所有文字。
6、脑洞时间
工具是有了,我们可以用来做些什么呢?发挥你的想象吧:)
1)、防采集:将文本内容隐写到图片里,这样就能防直接的采集(比如小说网站、内容原创网站) ,当然了,只能防君子了。
2)、版权水印:将版权水印(文字或者图片)或者其它身份识别标记(如公司里防泄密)隐写到图片里,如果对方直接盗用,则可以起到鉴别作用(如大众点评网案例)。当然了,如要防“攻击”(压缩,变形,涂改等)则需要更高深的隐写方式。有兴趣的可阅读啊里月饼事件引发的知乎讨论贴里的牛人回复。
传递门:https://www.zhihu.com/question/50735753/answer/122717091
3)、防监控:将文本或图片隐写到图片里,可以防机器(某墙?)监控(比如整网站都是好孩子图片或风景图,但其实都是坏孩子图片或者XX小说、XX内容)
4)、文件下载: 直接将文件存于图片里,绕过文件格式限制问题。比如很多图床只能传图片,但经过隐写后就可以图片里藏任意文件了,比如大家都喜欢的种子,当然了,要求图床不会再进行图片再次压缩。
声明:以上只是脑洞想法,本人不负由脑洞或者本隐写工具产生的任何责任!
javascript图片隐写术,感觉可以用它来干点有想法的事情的更多相关文章
- Javascript实现的图片隐写术
javascript图片隐写术,感觉可以用它来干点有想法的事情 1.什么是图片隐写术? 权威的wiki说法是“隐写术是一门关于信息隐藏的技巧与科学,所谓信息隐藏指的是不让除预期的接收者之外的任何人 ...
- javascript图片切换
JavaScript 图片滑动切换效果 作者:cloudgamer 时间: 2009-09-25 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- javascript图片懒加载与预加载的分析
javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...
- javascript - 图片的幻灯片效果
javascript 代码: <script type="text/javascript"> function select_play() { var select_p ...
- Javascript图片预加载详解 分类: JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 刚看完了一本关于javascript的书感觉受益匪浅,原来不懂的东西这么多,想问问怎么成为大神?求教!!!!!!
刚看完了一本关于javascript的书感觉受益匪浅,原来不懂的东西这么多,想问问怎么成为大神?求教!!!!!!
- javascript图片放大镜效果展示
javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...
随机推荐
- Linq标准查询操作符
Linq的出现让代码简洁了不少.之前在项目中基本都在使用它,但是没有完整的整理过,今天借这个周末,将其进行整理,方便后期对其的使用.Linq的操作可以分为聚合,连接,转换,元素操作符,相等操作,生成 ...
- Python练习----购物车
要求: 1.启动程序后,输入用户名密码后,如果是第一次登录,让用户输入工资,然后打印商品列表 2.允许用户根据商品编号购买商品 3.用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒 4.可随时 ...
- LINUX 笔记-Shell 脚本控制语句
1.if 语句 if condition1;then command1 elif condition2;then command2 else command3 fi 2.case 语句 case va ...
- 【ASP.NET MVC 学习笔记】- 05 依赖注入工具Ninject
本文参考:http://www.cnblogs.com/willick/p/3223042.html 1.Ninject是一款轻量级的DI工具,可通过VS的插件NuGet将其引用到项目中. 2.使用N ...
- Java多线程编程核心技术
Java多线程编程核心技术 这本书有利于对Java多线程API的理解,但不容易从中总结规律. JDK文档 1. Thread类 部分源码: public class Thread implements ...
- tomcat启动报错Several ports (8080, 8009) required by Tomcat v6.0
tomcat启动报错 如下图: 问题:8080.8009端口已经被占用. 解决办法: 1.在命令提示符下,输入netstat -aon | findstr 8080 2.继续输入taskkill -F ...
- JavaScript深入之call和apply的模拟实现
call 一句话介绍 call: call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法. 举个例子: var foo = { value: 1 }; func ...
- C语言(记录)——内存相关_2:内存的编址与管理
本文是基于嵌入式的C语言 --------------------------------------------------------------------------------------- ...
- .12-Vue源码之patch(2)
快完事咯! 简单看了下patch函数,虽然不长,但是实际上很长很长,慢慢来吧, 首先来个总览: // line-5250 // oldVnode => 原生DOM节点 // vnode => ...
- 用js判断是否为手机浏览,如果是手机浏览就跳转到手机站
<script type="text/javascript"> function browserRedirect() { var sUserAgent= navigat ...