设为首页 - 加入收藏 温岭网 (http://www.themebuff.com)- 致力于打造温岭最大的资讯信息平台!
热搜: 平台 中国 苹果 签约
当前位置: 主页 > 建站 > 正文

凯旋门娱乐手机版

发布时间:2019-04-08 17:56 所属栏目:[建站] 来源:w2sfoot
导读:本文展示一种用JS给图片加口令的方法,可以将任意图片转化为html,输入正确的口令才能打开查看图片。 效果如下: 效果说明 它最终只有一个文件。并非一张图片和一个html,不是在html中引用图片,而是将图片放入了html。 打开时,必须输入的正确口令,口令

奇思妙想之用JS给图片加口令

本文展示一种用JS给图片加口令的方法,可以将任意图片转化为html,输入正确的口令才能打开查看图片。

效果如下:

效果说明

  • 它最终只有一个文件。并非一张图片和一个html,不是在html中引用图片,而是将图片放入了html。
  • 打开时,必须输入的正确口令,口令错误则不能打开。
  • 口令不能被获取!查看html源码无法找到口令,虽然口令确实是存放在文件中。

直入主题,下面介绍此效果的技术原理和实现方法:

技术原理

  • 将图片转化为base64字符串,这样可以直接将字符串写入html,而无需引用外部的图片。
  • 打开时要求输入口令、口令校验都由JS实现。
  • 口令隐藏,不能通过查看网页源码获取。

实现方法

1. 将图片放入网页的方法非常简单,只要将图片转为base64编码字符即可,转换使用canvas进行,代码如下:

  1. function getImageBase64(img, ext) {   
  2.  //创建canvas DOM元素,并设置其宽高和图片一样   
  3.  var canvas = document.createElement("canvas");   
  4.  canvas.width = img.width;   
  5.  canvas.height = img.height;   
  6.  var ctx = canvas.getContext("2d");   
  7.  //使用画布画图   
  8.  ctx.drawImage(img, 0, 0, img.width, img.height);   
  9.  var dataURL = canvas.toDataURL("image/" + ext);     
  10.  
  11.  //返回的是一串Base64编码  
  12.  canvas = null;  
  13.  return dataURL;   
  14. }  
  15. var img_path ="yxdj250x250.jpg";  
  16. //网页中需提前设定一个id为icon的img元素  
  17. var user_icon = document.getElementById('icon');   
  18. fileExt="";  
  19. //获取base64编码  
  20. user_icon.src = img_path;   
  21. user_icon.onload = function () {   
  22.  //base64编码   
  23.  base64 = getImageBase64(user_icon, fileExt);   
  24.  console.log(base64);  

操作方法:准备一张图片,上面的代码中使用的是:yxdj250x250.jpg,实际操作时换为自己要转化的图片。

将以上js代码放入html中,打开运行,然后从浏览器的调试工具中可以看到输出了图片对应的base64编码,效果如下:

jpg2html_01.jpg

这时,如果要在网页中显示图片,只要使用img src=”"方法,将上面输出的编码填入src即可。

2. 接下来实现口令功能,代码如下:

  1. var pass = prompt('请输入口令','');  
  2. if (pass != "123"){  
  3.  history.go(-1);  
  4.  alert("口令错误。");  
  5. }  
  6. else{  
  7.  show_pic();  

从以上的功能逻辑可以看出,如果输入口令:123,则显示图片,反之不能打开。

3. 口令能被直接查看到,显然是不行的。那样随便谁懂点电脑知识都可以获取口令,就失去了口令保护的效果。

或许有人会说:不要使用名文比较,使用变量比较、把口令字符隐藏起来。但也不是个有效的办法。懂点技术的都知道浏览器可以断点调试的,只要来到断点处,就可以直接查看密码:

真正有效的办法是什么呢?JS代码混淆加密!口令也是存储在JS代码中的,只要将代码混淆加密,,口令也会一起被加密,就没办法找到密码了,而且还可以防断点调试。

下面是混淆加密后的代码效果:

jpg2html_04.jpg

jpg2html_05.jpg

JS代码混淆,国际上有JScrambler,国内有JShaman,混淆效果差不多,JShaman的使用起来更方便一些,中文界面、操作也更符合国人习惯。

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章