本文介绍利用JavaScript和Canvas实现图片压缩与加密的方法。通过Canvas的toDataURL方法设定quality参数进行压缩，并对生成的Base64编码进行字符篡改以实现加密效果。结合口令验证与JShaman代码混淆技术，实现图片内容的保密存储与受控显示。
一、压缩图片
压缩原理：
首先将图片数据加载到Canvas元素中，随后调用Canvas的toDataURL方法将其转换为Base64编码字符串。在此转换过程中，可以指定quality参数以控制图片质量，该参数的取值范围为0.1至1之间。数值越小，图片的压缩程度越高，文件体积越小。
完整代码：
<body>
<script src="jquery-3.5.1.min.js"></script>
<input id="file" type="file" capture="microphone" accept="image/*">
压缩后的图片：<span id="sz"></span>
<img id="pic" >
<script>
$("#file").change(function(){undefined
var m_this = this;
cutImageBase64(m_this,null,900,0.7);
})
function cutImageBase64(m_this,id,wid,quality) {undefined
var file = m_this.files[0];
var URL = window.URL || window.webkitURL;
var blob = URL.createObjectURL(file);
var base64;
var img = new Image();
img.src = blob;
img.onload = function() {undefined
var that = this;
//生成比例
var w = that.width,
h = that.height,
scale = w / h;
w = wid || w;
h = w / scale;
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
$(canvas).attr({undefined
width: w,
height: h
});
ctx.drawImage(that, 0, 0, w, h);
// 生成base64
base64 = canvas.toDataURL('image/jpeg', quality || 0.9);
document.getElementById("pic").src=base64;
document.getElementById("sz").innerHTML = parseInt(base64.length/2014,0) + "kb";
};
}
</script>
</body>
运行效果：
压缩率
从上图对比可见，压缩后的图片大小约为28KB，而原始图片文件大小超过400KB。
由此可见，这种压缩方式的效果显著。
二、加密图片
前文所述的图片压缩是一项实用技术，本文的重点在于展示一种特殊的图片加密技巧。
之所以在讲解压缩后紧接着介绍图片加密，是因为图片加密的实现依赖于前述的压缩技术基础。
在前面的代码示例中，toDataURL方法生成的是图片的Base64编码字符串。
Base64编码必须保持完整且格式正确，图片才能被浏览器正常解析和显示。
如果对该编码字符串进行微小修改，哪怕只是改动其中一个字符，都会导致Base64解码失败，从而使图片无法正常显示。
基于此原理，程序可以在编码字符串的特定位置插入额外字符，从而破坏编码的正确性，实现简单的加密效果：
运行效果如下，输出经过处理的加密Base64编码：
进行实际测试：
效果显示，图片无法再正常加载显示。
接下来，我们将实现一个完整的交互流程：
在网页中，通过img标签的src属性引入加密后的Base64字符串，此时图片处于不可见状态。用户需要输入密码，当密码验证正确时，程序对Base64字符串进行解密，使图片恢复正常显示。
输入密码：
密码验证正确后，执行解密逻辑并显示图片：
源码：
<script>
function jm(){undefined
var pass = prompt('请输入口令','');
if (pass != "1"+"2"+"3"){undefined
alert("口令错误。");
}
else{undefined
var base64_2 = document.getElementById("txt").value.toString();
//解密
var base64_3 = base64_2.substring(0,26) + base64_2.substring(27,base64_2.length);
document.getElementById("pic").src=base64_3;
document.getElementById("bt").style.display = "none";
}
}
</script>
网页中还包含其他几个关键元素：
input元素用于存储加密后的Base64编码，即由前述JavaScript代码生成并经过加密处理的内容；
img元素用于展示解密后的图片；此外还有一个按钮，点击时触发调用解密函数。
可能有人已经发现：虽然图片编码经过了加密处理，并且增加了口令保护机制，但如果用户查看网页源代码，仍然可以直接看到明文口令，这实际上并未起到真正的加密保护作用。
针对上述问题，我们需要进一步改进：
由于口令可见是因为JavaScript代码在前端透明运行，因此需要对执行解密的JavaScript代码本身进行加密处理，使得口令在源码中不可见。
使用JShaman工具对JavaScript代码进行混淆加密：
在JShaman的配置界面中，勾选“字符串加密”选项：
加密后的代码中，原有的明文口令字符将完全消失，无法直接查找：
至此，我们实现了完整的图片加密方案：将图片以加密形式存储于单独的HTML文件中，便于携带、存储和传递。内容经过加密，口令也通过代码混淆进行了保护，只有掌握正确口令的用户才能查看图片。
总结
本文到此结束，希望能为读者提供帮助，也欢迎大家关注本站获取更多技术内容。