本文展示了一种用JS给图片添加密码的方法，可以将任意图片转换为html，输入正确的密码即可打开查看图片。效果如下：效果描述最终只有一个文件。不是一张图片和一个html，不是在html中引用图片，而是将图片放到html中。打开时必须输入正确的密码，密码错误则无法打开。密码获取不到！查看html源码无法找到密码，虽然密码确实存在文件中。进入正题，下面介绍这个效果的技术原理和实现方法：技术原理将图片转为base64字符串，这样就可以不用引用外部图片，直接将字符串写入html。打开时需要输入密码，密码验证由JS实现。密码是隐藏的，无法通过查看网页源代码获取。实现方法1.将图片放入网页的方法很简单，就是将图片转为base64编码的字符，使用canvas进行转换，代码如下：functiongetImageBase64(img,ext){//创建一个canvasDOM元素并设置其宽高与图片相同varcanvas=document.createElement("canvas");canvas.width=img.width;canvas.height=img.height;varctx=canvas.getContext("2d");//使用画布绘制ctx.drawImage(img,0,0,img.width,img.height);vardataURL=canvas.toDataURL("image/"+ext);//返回的是一串Base64编码的画布=null;returndataURL;}varimg_path="yxdj250x250.jpg";//网页需要预先设置一个id为icon的img元素varuser_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编码了。效果如下：这时候如果要在网页上显示图片，只需要使用imgsrc=""方法，把上面的代码输出填入src即可。2、接下来实现密码功能，代码如下：varpass=prompt('请输入密码','');if(pass!="123"){history.go(-1);alert(“密码错误。");}else{show_pic();}从上面的功能逻辑我们可以看出，如果输入密码：123，就会显示图片，否则无法打开。3.可以直接查看密码，这显然是不可能的，那是随便一点点计算机知识的人都可以得到密码，密码保护的作用就没有了，可能有人会说：别用名字文字比较，用变量比较，并隐藏密码字符。但不是一个有效的方法。了解一些技术大家都知道，浏览器可以断点调试。只要来到断点处，就可以直接查看密码：什么是真正有效的方法？JS代码混淆加密！密码也存储在JS代码中，只要对代码进行混淆加密，密码也会一起加密，这样就没办法找到密码了，也可以防止断点调试。下面后面是代码效果er混淆加密：JS代码混淆，世界上有JScrambler，国内有JShaman，混淆效果差不多，JShaman用起来更方便，中文界面和操作更符合中国人的习惯.在进行代码混淆时，一定要使用“字符串加密”功能，因为这是我们进行混淆的关键要求，只要选中这个选项，密码就会被隐藏。可能有技术同学会有异议，认为JS混淆加密可以还原。关于这个想法，要看情况。如果是用unescape、escape或eval进行初级加密，则它是可逆的，可以解密。如果是真正的高强度混淆加密，是无解的。这需要对原理进行深入的解释。比如JShaman的混淆加密就没有采用简单的可逆加密。首先对JS源码进行词法分析和语法分析，分离出变量、常量、函数、关键字等，生成语法树；然后进行变量变换，常量数组化，加密，插入僵尸代码，添加反调试，然后扁平化控制流等，最后重新生成代码。代码被重构且不可逆。还是不相信？好吧，让我们实际检查一下并反转一次。先代码混淆：再检查结果代码去混淆了。常用的有esprima和escodegen。这里在nodejs环境下使用：首先安装这两个组件：npminstallesprimanpminstallescodegen然后准备如下代码：然后执行，此时会输出反混淆结果：可见，反混淆后，会得到代码与原始代码有很大不同。有很多很多复杂的逻辑关系，人物也扑朔迷离。代码几乎看不懂，更别说理解原代码的意思了。从解密后的代码中，当然无法找到原来的密码“123”。混淆和反混淆的问题暂时结束。如果还有人反驳：一点点看，只要你愿意花时间，三天或者一个月，总能慢慢看。那属于牛角。让我们回到正文。由于图片的base64编码字符串比较长，内容较多，所以在混淆加密的时候，建议只混淆关键代码，否则生成的代码可能会过大。经过这一系列的操作，一张有密码保护的图片就生成了。你掌握了一项很酷的技能！同时，这个技能在很多场合都有实际用途，相信你会遇到的。
