Javascript实现的图片隐写术

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

 
 
此文来源于 : https://www.cnblogs.com/kingthy/p/imagemask.html#3855945
 

转载于:https://www.cnblogs.com/JonaLin/p/11155690.html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用以下步骤实现JavaScript图片放大功能: 1. 在HTML文件中创建一个<img>标签,并设置图片的src属性为要显示的图片。 2. 在CSS文件中设置该<img>标签的宽度和高度,以及鼠标悬停时的光标样式。 3. 在JavaScript文件中编写相应的函数,用于实现图片的放大效果。这个函数需要做以下几件事情: - 创建一个<div>标签,用于显示放大后的图片。 - 在鼠标移动时,获取鼠标的坐标,并根据坐标计算出放大图片的位置。 - 设置放大图片的src属性为要放大的图片的src属性,以及放大图片的宽度和高度。 - 将放大图片添加到<div>标签中,并设置<div>标签的位置和样式。 4. 在<img>标签上添加鼠标移动事件,调用上述函数实现图片放大效果。 以下是一个简单的实现代码示例,供参考: HTML: ``` <img src="image.jpg" width="200" height="200" id="myImg"> ``` CSS: ``` #myImg { cursor: pointer; } ``` JavaScript: ``` function zoomIn(event) { const imgSrc = event.target.src; const posX = event.pageX; const posY = event.pageY; const zoomImg = document.createElement('img'); zoomImg.src = imgSrc; zoomImg.width = 400; zoomImg.height = 400; const zoomDiv = document.createElement('div'); zoomDiv.appendChild(zoomImg); zoomDiv.style.position = 'absolute'; zoomDiv.style.top = posY + 'px'; zoomDiv.style.left = posX + 'px'; zoomDiv.style.border = '1px solid black'; zoomDiv.style.padding = '10px'; zoomDiv.style.backgroundColor = 'white'; document.body.appendChild(zoomDiv); } const myImg = document.getElementById('myImg'); myImg.addEventListener('mousemove', zoomIn); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值