JS基于base64编码加密解密文本和图片
密码学，体系太庞大了，常见的加密解密算法很多，我仅了解了一下，这里仅介绍采用实现base64加密解密的方法。
严格地说base64不是加密算法，他只是一种编码方式，是一种用64个字符来表示任意二进制数据的方法。详情可参见彻底弄懂base64的编码与解码原理 - 知乎
Base64编码具有不可读性，需要解码后才能阅读。算是伪加密吧。
加密解密文本
加密解密图片
本文例子用到jquery，若本地使用请先下载，我这以里jquery-3.5.1. js版本为例，这样用
<script src="jquery-3.5.1. js"></script>
也可以不下载，需要联网【使用CDN（全称是Content Delivery Network：内容分发网络或内容交付网络）可参见https://blog.csdn.net/cnds123/article/details/126268941】如下使用
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
基本原理：将图片读入canvas，并使用canvas的toDataURL方法【https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL】将图片base64化，在此过程中，可以设定quality值，即图片质量值，值为0.1到1之间，值越小，压缩度越高。
Base64是一种基于64个可打印字符来表示二进制数据的方法。Base64编码是把二进制转换为可打印字符，Base64编码具有不可读性，需要解码后才能阅读。关于Base64详情可参考其它资料。
对图片加密并保存
源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加密图片并保存</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
请选定要加密的图片文件<input id="file" type="file" capture="microphone" accept="image/*">
<button type="button" onclick="download()">保存加密图片</button>
<br>
<img id="pic" >
<script>
var stringData; //要保存的变量
$("#file").change(function(){
var m_this = this;
cutImageBase64(m_this,null,900,0.7);
})
function cutImageBase64(m_this,id,wid,quality) {
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() {
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({
width: w,
height: h
});
ctx.drawImage(that, 0, 0, w, h);
// 生成base64
base64 = canvas.toDataURL('image/jpeg', quality || 0.9);
//加密
var base64_2 = base64.substring(0,26) + "a" +base64.substring(26,base64.lenght);
console.log(base64_2);
stringData = base64_2;
};
}
function download(){
//alert(stringData);
if(stringData ==undefined){
alert("先选定需要加密的图片！");
return;
}
var text = stringData;
var blob = new Blob([text], { type: "text/plain"});
var anchor = document.createElement("a");
//anchor.download = "my-filename.txt";
anchor.download = "加密_" + document.getElementById("file").files[0].name;
anchor.href = window.URL.createObjectURL(blob);
anchor.target ="_blank";
anchor.style.display = "none"; //
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor); //
}
</script>
</body>
</html>
保存文件名为：对图片加密并保存.html，用浏览器打开效果：
对已加密图片文件进行解密
对由上面例子加密的图片文件进行解密并可保存到本地，源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对已经加密图片解密</title>
</head>
<body>
选定已加密的图片文件<input type="file" id="file"/>
<br>
<textarea id="output" cols="80" rows="6" readonly="readonly"> </textarea>
<br>
<button type="button" onclick="jm()">解密图片</button>
<button onclick="downloadIamge('pic','nianling')">保存已解密图片(.jfif)</button>
<br>
<img id="pic">
<script>
document.getElementById('file').onchange =function(){
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(progressEvent){
var fileContent = this.result;
//alert(fileContent );
document.getElementById('output').value = fileContent;
};
reader.readAsText(file);
};
function jm(){
var base64_2 = document.getElementById("output").value;
if(base64_2 ==" "){
alert("提示：请先选定要解密的加密图片文件！！！");
return;
}
//解密
var base64_3 = base64_2.substring(0,26) + base64_2.substring(27,base64_2.length);
document.getElementById("pic").src=base64_3;
//console.log(base64_3)
}
//将img标签中图片保存到本地
function downloadIamge(selector, name) {
// 通过选择器获取img元素
var img = document.getElementById(selector)
// 将图片的src属性作为URL地址
var url = img.src
//alert(url);
if(url ==""){
alert("请先解密已加密的图片文件！");
return;
}
var a = document.createElement('a')
var event = new MouseEvent('click')
a.download = name // '下载图片名称'
a.href = url
a.dispatchEvent(event) //根据A标签的属性来搞事情
}
</script>
</body>
</html>保存文件名为：对已加密图片文件进行解密并可保存.html，用浏览器打开效果：
参考：
https://www.jb51.net/article/239975.htm
