网页抓取 加密html(本文将用JavaScript实现两个颇有技术含量的功能：压缩图片、加密图片)

　　网页抓取 加密html(本文将用JavaScript实现两个颇有技术含量的功能：压缩图片、加密图片)

　　本文将使用 JavaScript 实现两个相当技术性的功能：压缩图片、加密图片。

　　开门见山：

　　一、压缩图像

　　压缩原理：

　　将图像读入画布，并使用画布的 toDataURL 方法对图像进行 base64 处理。在此过程中，您可以设置质量值，即图像质量值。取值在0.1 到1 之间，取值越小，压缩率越高。

　　完整代码：

　　压缩图像：

　　运行结果：

　　

　　压缩率

　　如上图所示，压缩后的图片大小为28KB，而原创文件大小则超过400KB：

　　

　　可以看出压缩效果还是很不错的。

　　二、加密图片

　　上面提到的图像压缩是一项非常实用的技术。下一步是本文的重点，展示一个奇怪的技巧：图像加密。

　　我们之所以说压缩和图像加密，是因为图像加密是在前面的压缩技术的基础上完成的。

　　在上面的代码中，toDataURL 生成图像的 base64 编码。

　　

　　Base64 编码必须完整且正确，才能正确显示图片。

　　而且只要对这个编码稍加修改，哪怕只改变一个字符，都会导致图片无法正常显示。

　　然后，在代码中的某个位置添加一个字符，达到破坏正确代码，实现加密的效果：

　　

　　运行效果，输出加密后的base64编码：

　　

　　做一个测试：

　　

　　效果如下，图片无法正常显示。

　　

　　然后，将达到以下效果：

　　网页中用img的src引入了加密的base64字符，此时图片无法显示。然后，就可以输入密码了，当密码正确时，解密base64字符，让图片正常显示。

　　输入密码：

　　密码正确，解密并显示图片：

　　

　　源代码：

　　网页中还有其他几个元素：

　　

　　加密后的base64编码存储在input中，即上面js代码函数生成并加密的内容；

　　img 用于显示解密后的图像；还有一个按钮，单击时会调用解密功能。

　　可能有人发现了，虽然图片编码已经加密，加了密码保护，但是只要查看网页源代码就可以知道密码，完全没有加密的作用。

　　到目前为止，问题确实存在。所以，更进一步：

　　可以看到密码，因为javascript代码是透明的。然后，解密后的js代码必须加密。加密后，密码将不可见。

　　使用 JShaman 对 JS 代码进行混淆和加密：

　　

　　并在 JShaman 的配置中勾选“字符串加密”：

　　

　　加密后的代码根本找不到之前的密码字符：

　　

　　

　　这样就实现了完整的图像加密：将图像加密存储在单独的html中，便于携带、存储和传输。内容已加密，密码已加密。只有知道密码的人才能看到图片。