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图片隐写术,感觉可以用它来干点有想法的事情的更多相关文章

  1. Javascript实现的图片隐写术

    javascript图片隐写术,感觉可以用它来干点有想法的事情   1.什么是图片隐写术? 权威的wiki说法是“隐写术是一门关于信息隐藏的技巧与科学,所谓信息隐藏指的是不让除预期的接收者之外的任何人 ...

  2. javascript图片切换

    JavaScript 图片滑动切换效果 作者:cloudgamer 时间: 2009-09-25 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 ...

  3. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  4. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  5. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  6. javascript - 图片的幻灯片效果

    javascript 代码: <script type="text/javascript"> function select_play() { var select_p ...

  7. Javascript图片预加载详解 分类: JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  8. 刚看完了一本关于javascript的书感觉受益匪浅,原来不懂的东西这么多,想问问怎么成为大神?求教!!!!!!

    刚看完了一本关于javascript的书感觉受益匪浅,原来不懂的东西这么多,想问问怎么成为大神?求教!!!!!!

  9. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

随机推荐

  1. eclipse远程调试Linux环境下的web项目

    前提: 远程服务器上的代码和本地的代码同步 第一步 : 配置远程服务器下的startup.sh文件 在第一行添加 : declare -x CATALINA_OPTS="-server -X ...

  2. PhiloGL学习(3)——程序员的法宝—键盘、鼠标

    前言 上一篇文章中介绍了如何让对象动起来,本文介绍如何让场景响应我们的鼠标和键盘以控制场景的缩放及对象的转动和移动等. 一. 原理分析 有了上一篇文章的基础,我们已经知道了如何让场景和对象动起来.本文 ...

  3. Call From master/192.168.128.135 to master:8485 failed on connection exception: java.net.ConnectException: Connection refused

    hadoop集群搭建了ha,初次启动正常,最近几天启动时偶尔发现,namenode1节点启动后一段时间(大约10几秒-半分钟左右),namenode1上namenode进程停掉,查看日志: -- :: ...

  4. component及刚体rigidbody用法

    关于getcomponent函数,rigidbody(2d)的嵌套关系及用法 1.getcomponent函数 在unity中脚本可以看成是可定义的组件,我们经常要访问同一对象或不同对象中的脚本,可以 ...

  5. SE6新特性之集合Set、Map、WeakSet和WeakMap详解

    SE5的时候我们经常用数组或者类数组对象来操作数据,而对于一些使用惯了java之类语言的集合的开发人员来说,总有少了点什么的感觉,SE6提供Set和Map这两个集合.不仅从根本上为一些问题提供了解决方 ...

  6. Vue.js—快速入门

    Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...

  7. Leetcode题解(22)

    66. Plus One 题目 这题很简单,直接代码: class Solution { public: vector<int> plusOne(vector<int> &am ...

  8. 0_Simple__fp16ScalarProduct

    使用cuda内置无符号整数结构(__half2)及其汇编函数,计算两个向量的内积. 源代码: #include <cstdio> #include <cstdlib> #inc ...

  9. 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式 [转载]

    前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...

  10. HTML学习笔记 w3sCss盒子模型应用案例(div布局) 第十一节 (原创) 参考使用表

    * { margin: 0px; padding: 0px; } .top { width: 100%; height: 50px; background-color: antiquewhite; } ...