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

本文展示一种用JS给图片加口令的要领，可以将恣意图片转化为html，输入正确的口令才气打开查察图片。

结果如下：

结果声名

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

直入主题，下面先容此结果的技能道理和实现要领：

技能道理

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

实现要领

1. 将图片放入网页的要领很是简朴，只要将图片转为base64编码字符即可，转换行使canvas举办，代码如下：

function getImageBase64(img, ext) {   
 //建设canvas DOM元素，并配置其宽高和图片一样   
 var canvas = document.createElement("canvas");   
 canvas.width = img.width;   
 canvas.height = img.height;   
 var ctx = canvas.getContext("2d");   
 //行使画布绘图   
 ctx.drawImage(img, 0, 0, img.width, img.height);   
 var dataURL = canvas.toDataURL("image/" + ext);     
 
 //返回的是一串Base64编码  
 canvas = null;  
 return dataURL;   
}  
var img_path ="yxdj250x250.jpg";  
//网页中需提前设定一个id为icon的img元素  
var user_icon = document.getElementById('icon');   
fileExt="";  
//获取base64编码  
user_icon.src = img_path;   
user_icon.onload = function () {   
 //base64编码   
 base64 = getImageBase64(user_icon, fileExt);   
 console.log(base64);  
} 

操纵要领：筹备一张图片，上面的代码中行使的是：yxdj250x250.jpg，现实操纵时换为本身要转化的图片。

将以上js代码放入html中，打开运行，然后从赏识器的调试器材中可以看到输出了图片对应的base64编码，结果如下：

这时，假如要在网页中表现图片，只要行使img src=”"要领，将上面输出的编码填入src即可。

2. 接下来实现口令成果，代码如下：

var pass = prompt('请输进口令','');  
if (pass != "123"){  
 history.go(-1);  
 alert("口令错误。");  
}  
else{  
 show_pic();  
} 

从以上的成果逻辑可以看出，假如输进口令：123，则表现图片，反之不能打开。

3. 口令能被直接查察到，显然是不可的。那样任意谁懂点电脑常识都可以获取口令，就失去了口令掩护的结果。

或者有人会说：不要行使名文较量，行使变量较量、把口令字符潜匿起来。但也不是个有用的步伐。懂点技能的都知道赏识器可以断点调试的，只要来到断点处，就可以直接查察暗码：

真正有用的步伐是什么呢?JS代码夹杂加密!口令也是存储在JS代码中的，只要将代码夹杂加密，，口令也会一路被加密，就没步伐找到暗码了，并且还可以防断点调试。

下面是夹杂加密后的代码结果：

JS代码夹杂，国际上有JScrambler，海内有JShaman，夹杂结果差不多，JShaman的行使起来更利便一些，中文界面、操纵也更切合国人风俗。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!