开发者社区> 吞吞吐吐的> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

1
2
3
4
5
6
7
8
9
<script type="text/javascript" src="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>

  

  • 隐写文本
1
2
3
4
5
//脚本里传入页面的canvas对象和要隐写的文本
var output = document.getElementById('output');
var canvas = document.getElementById('canvas');
mask.hideText(canvas, '要隐写的文本');
output.src = canvas.toDataURL();

  

  • 隐写文件
1
2
3
4
5
6
7
8
9
10
11
//脚本里传入页面的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);
        }
});

  

  • 读出图片里隐写的文本
1
2
var canvas = document.getElementById('canvas');
var message = mask.revealText(canvas);

  

  • 读出图片里隐写的文件
1
2
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)、文件下载: 直接将文件存于图片里,绕过文件格式限制问题。比如很多图床只能传图片,但经过隐写后就可以图片里藏任意文件了,比如大家都喜欢的种子,当然了,要求图床不会再进行图片再次压缩。

 

  声明:以上只是脑洞想法,本人不负由脑洞或者本隐写工具产生的任何责任!

本文转自Kingthy博客园博客,原文链接:http://www.cnblogs.com/kingthy/p/imagemask.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript 图片3D展示空间(3DRoom)
一般的平面效果,通过改变水平和垂直坐标就能实现,再加上深度,就能在视觉上的产生3D(三维)的效果。 程序就是模拟这样一个三维空间,里面的图片会根据三维坐标显示在这个空间。 很久以前就看过一个3DRoom效果,是用复杂的计算实现的。
1089 0
基于H5+css+JavaScript实现动态线性渐变背景
基于H5+css+JavaScript实现动态线性渐变背景
25 0
基于H5+css+JavaScript实现全屏覆盖导航栏
基于H5+css+JavaScript实现全屏覆盖导航栏
43 0
css3结合JavaScript实现翻页幻灯片效果
CSS3+JavaScript实现翻页幻灯片效果
10 0
JavaScript实现简单区块链
用JavaScript来实现一个简单的区块链。通过实现过程,你将理解区块链是什么:区块链就是一个分布式数据库,存储结构是一个不断增长的链表,链表中包含着许多有序的记录。
1078 0
使用JavaScript实现一个俄罗斯方块
清明假期期间,闲的无聊,就做了一个小游戏玩玩,目前游戏逻辑上暂未发现bug,只不过样子稍微丑了一些-.-项目地址:https://github.com/Jiasm/tetris在线Demo:http://blog.
1436 0
JavaScript进阶【五】利用JavaScript实现动画的基本思路
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/79659313 ...
917 0
Javascript实现完美继承
javascipt 实现javascript完美继承要考虑三个方面: 第一步: 获取父构造函数体内的属性 解决方法: 通过 Father.
897 0
javascript oo实现
很久很久以前,我还是个phper,第一次接触javascript觉得好神奇。跟传统的oo类概念差别很大。记得刚毕业面试,如何在javascript里面实现class一直是很热门的面试题,当前面试百度就被问到了,当年作为一个小白只是网上随便搜搜应付了下。
615 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
深度学习论文实现:空间变换网络-第一部分
立即下载
JavaScript 语言在引擎级别的执行过程
立即下载
Redis集群演化的心路历程
立即下载