本文介绍了使用JS为图片添加密码的方法。您可以将任何图片转换为html并输入正确的密码以打开视图。

效果如下：
Jpg2html_demo.gif
效果描述
它最终只有一个文件。不是图片和HTML，而是在html中引用图片，图片放在html中。
打开时必须输入正确的密码。如果密码不正确，则无法打开。
密码无法获取！检查html源代码找不到密码，虽然密码实际存储在文件中。
直接进入主题，下面介绍这种效果的技术原理和实现：
技术原理
将图像转换为base64字符串，以便您可以将字符串直接写入html，而无需引用外部图像。
当要求输入密码时，JS会执行密码验证。
密码是隐藏的，无法通过查看网页的源代码获得。
履行
1.将图像放入网页的方法非常简单。只需将图像转换为base64编码字符即可。转换是使用画布完成的。代码如下：
函数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；
返回dataURL；
}
Var img_path='yxdj250x250.jpg'；//在网页中，您需要提前设置一个带有id图标的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编码。效果如下：
Jpg2html_01.jpg
此时，如果要在网页上显示图像，只需使用img src=“'方法填写上面的src输出。
Jpg2html_02.jpg
2.接下来实现密码功能，代码如下：
Var pass=prompt（'请输入密码'，''）；
如果（pass！='123'）{
History.go（-1）；
警报（'密码错误。'）；
}
其他{
Show_pic（）；
}
从上面的功能逻辑可以看出，如果输入密码：123，则显示图片，反之亦然。
3.密码可以直接查看，显然不是。任何了解计算机知识的人都可以获得密码并失去密码保护效果。
有人可能会说：不要使用名称比较，使用变量比较，隐藏密码字符。但这不是一种有效的方法。知道该技术知道浏览器可以通过断点进行调试。只要你到断点，你可以直接检查密码：
Jpg2html_03.jpg
什么是真正有效的方法？ JS代码混淆了加密！密码也存储在JS代码中。只要代码混淆和加密，密码就会被加密在一起，无法找到密码，也可以防止断点调试。
以下是混淆编码代码的效果：
Jpg2html_04.jpg
Jpg2html_05.jpg
JS代码很混乱，世界上有JScrambler，JShaman在国内，混淆效果几乎相同，JShaman使用起来比较方便，中文界面操作更符合人们的习惯。在进行代码混淆时，请务必使用“字符串加密”功能，因为这是我们混淆的关键要求，只要选择此选项，密码就会被隐藏。
Jpg2html_06.jpg
一些技术专业的学生可能会有异议，并认为JS可以在与加密混淆后恢复。
关于这个想法，有必要划分情况。
如果它是使用unescape，escape，eval的主加密，它可以被反转并且可以被解密。
如果它是真正的高强度混淆加密，它是无法解决的。
这需要从理论上进行更深入的解释，例如JShaman的混淆加密，这不是简单的可逆加密。
相反，执行JS源代码的词法分析和语法分析，并分离变量，常量，函数，关键字等以生成语法树；然后变量变形，常数数组，加密，插入僵尸代码，添加反调试，然后展平控制流等，最后重新生成代码。
代码重建并且是不可逆转的。
Jpg2html_10_1.jpg
还是不相信吗？
好吧，让我们实际检查出来并反转它。
代码混淆第一：
Jpg2html_10.jpg
然后反混淆结果代码。常用的是esprima，escodegen。
这里是nodejs的上下文：
首先安装这两个组件：
Npm安装esprima
Npm安装escodegen
然后准备以下代码：
Jpg2html_11.jpg
然后执行，然后输出抗锯齿结果：
Jpg2html_12.jpg
可以看出，在抗锯齿之后获得的代码与原始代码非常不同。有许多复杂的逻辑关系，字符也令人困惑。代码几乎不可能阅读，更不用说了解原始代码的含义。
当然，从这个解密的代码中，无法找到原始密码“123”。
Jpg2html_13.jpg
混乱和抗锯齿的问题即将结束。如果有人仍然反驳：一点点阅读，只要你花时间，三天，一个月，你就可以随时阅读它。那是号角。
我们回到原文。因为图像的base64编码字符串很长且内容很大，所以当加密混乱时，建议只混淆密钥代码，否则生成的代码可能太大。
Jpg2html_07.jpg
在这一系列操作之后，生成受密码保护的图像。
Jpg2html_08.jpg
掌握了一项非常酷的技巧！
同时，这个技能在很多场合都很实用，相信你会遇到它。

• 上一篇: 蓝盟IT外包，元宇宙：四梁八柱是什么
  下一篇: 在一篇文章中阅读文章是Wi-Fi 6

• 分享到：