本文展现一种用JS给图片加口令的方法，能够将恣意图片转化为html，输入正确的口令才干翻开检查图片。
作用如下：

作用阐明
1.它终究只需一个文件。并非一张图片和一个html，不是在html中引证图片，而是将图片放入了html。
2.翻开时，有必要输入的正确口令，口令过错则不能翻开。
3.口令不能被获取！检查html源码无法找到口令，尽管口令确实是存放在文件中。
直入主题，下面介绍此作用的技能原理和完成方法：
技能原理
1.将图片转化为base64字符串，这样能够直接将字符串写入html，而无需引证外部的图片。
2.翻开时要求输入口令、口令校验都由JS完成。
3.口令躲藏，不能通过检查网页源码获取。
完成方法
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的运用起来更便利一些，中文界面、操作也更契合国人习气。
在进行代码混杂时，一定要运用“字符串加密”功用，由于这是咱们进行混杂的要害需求，只需选了这一项，暗码才会躲藏起来。

有的技能同学很可能有对立定见，以为JS混杂加密后是能够复原的。
关于这个主意，要分状况。
假如是用unescape、escape、eval进行的初级加密，那是能够逆的，能够解密的。
而假如是真实的高强度混杂加密，是不行解的。
这个需要从理原上深度的解说，比方JShaman这种混杂加密，运用的并非是简略的可逆加密。
而是先对JS源代码进行词法剖析、语法剖析，别离出变量、常量、函数、要害字等，生成语法树；然后进行变量变形、常量阵列化、加密，刺进僵尸代码、参加反调试、再平展操控流等等，最终再从头生成代码。
是对代码进行了重建的，不行逆的。

[1] [2]  黑客接单网