JS基于base64編碼加密解密文本和圖片
?
密碼學(xué)，體系太龐大了，常見(jiàn)的加密解密算法很多，這里僅介紹采用base64實(shí)現(xiàn)的加密解密的方法。
嚴(yán)格地說(shuō)base64不是加密算法，他只是一種編碼方式，是一種用64個(gè)字符來(lái)表示任意二進(jìn)制數(shù)據(jù)的方法。詳情可參見(jiàn)其它資料。
Base64編碼具有不可讀性，需要解碼后才能閱讀。算是偽加密吧。
加密解密文本
源碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的BASE64加密/解密示例</title>
<script>
// 創(chuàng)建Base64對(duì)象
var Base64 = {
_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
encode: function(e) {
var t = "";
var n, r, i, s, o, u, a;
var f = 0;
e = Base64._utf8_encode(e);
while (f < e.length) {
n = e.charCodeAt(f++);
r = e.charCodeAt(f++);
i = e.charCodeAt(f++);
s = n >> 2;
o = (n & 3) << 4 | r >> 4;
u = (r & 15) << 2 | i >> 6;
a = i & 63;
if (isNaN(r)) {
u = a = 64
} else if (isNaN(i)) {
a = 64
}
t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a)
}
return t
},
decode: function(e) {
var t = "";
var n, r, i;
var s, o, u, a;
var f = 0;
e = e.replace(/[^A-Za-z0-9+/=]/g, "");
while (f < e.length) {
s = this._keyStr.indexOf(e.charAt(f++));
o = this._keyStr.indexOf(e.charAt(f++));
u = this._keyStr.indexOf(e.charAt(f++));
a = this._keyStr.indexOf(e.charAt(f++));
n = s << 2 | o >> 4;
r = (o & 15) << 4 | u >> 2;
i = (u & 3) << 6 | a;
t = t + String.fromCharCode(n);
if (u != 64) {
t = t + String.fromCharCode(r)
}
if (a != 64) {
t = t + String.fromCharCode(i)
}
}
t = Base64._utf8_decode(t);
return t
},
_utf8_encode: function(e) {
e = e.replace(/rn/g, "n");
var t = "";
for (var n = 0; n < e.length; n++) {
var r = e.charCodeAt(n);
if (r < 128) {
t += String.fromCharCode(r)
} else if (r > 127 && r < 2048) {
t += String.fromCharCode(r >> 6 | 192);
t += String.fromCharCode(r & 63 | 128)
} else {
t += String.fromCharCode(r >> 12 | 224);
t += String.fromCharCode(r >> 6 & 63 | 128);
t += String.fromCharCode(r & 63 | 128)
}
}
return t
},
_utf8_decode: function(e) {
var t = "";
var n = 0;
var r = c1 = c2 = 0;
while (n < e.length) {
r = e.charCodeAt(n);
if (r < 128) {
t += String.fromCharCode(r);
n++
} else if (r > 191 && r < 224) {
c2 = e.charCodeAt(n + 1);
t += String.fromCharCode((r & 31) << 6 | c2 & 63);
n += 2
} else {
c2 = e.charCodeAt(n + 1);
c3 = e.charCodeAt(n + 2);
t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
n += 3
}
}
return t
}
}
function Encode(){
var str1= document.getElementById("text1").value
document.getElementById("text1").value=Base64.encode(str1); // 使用Base64對(duì)象的encode()
}
function deEncode(){
var str2= document.getElementById("text2").value
document.getElementById("text2").value=Base64.decode(str2) ; //使用Base64對(duì)象的decode()
}
</script>
</head>
<body>
<textarea id="text1" cols="60" rows="10"></textarea>
<br>
<input type="button" value="BASE64加密" onclick="Encode()">
<br><br>
<textarea id="text2" cols="60" rows="10"></textarea>
<br>
<input type="button" value="BASE64解密" onclick="deEncode()">
</body>
</html>
保存文件名為：BASE64編碼加密解密文本.html，用瀏覽器打開(kāi)效果：
?現(xiàn)在，你可以試試了。?
參考https://www.yisu.com/zixun/180535.html
加密解密圖片
本文例子用到j(luò)query，若本地使用請(qǐng)先下載，我這以里jquery-3.5.1. js版本為例，這樣用
<script src="jquery-3.5.1. js"></script>
也可以不下載，需要聯(lián)網(wǎng)【使用CDN（全稱(chēng)是Content Delivery Network：內(nèi)容分發(fā)網(wǎng)絡(luò)或內(nèi)容交付網(wǎng)絡(luò)）可參見(jiàn)https://blog.csdn.net/cnds123/article/details/126268941】如下使用
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
Canvas（畫(huà)布） API提供了toDataURL()方法，可以把畫(huà)布中的圖形轉(zhuǎn)換為圖片。有了Data URL數(shù)據(jù)后，就可將這些數(shù)據(jù)直接填充到<img>元素里，或者直接從瀏覽器里下載它們。
【關(guān)于toDataURL()方法參看https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
https://www.canvasapi.cn/HTMLCanvasElement/toDataURL】
這里介紹的加密解密圖片基本原理：將圖片讀入canvas，并使用canvas的toDataURL方法將圖片base64化，在此過(guò)程中，可以設(shè)定quality值，即圖片質(zhì)量值，值為0.1到1之間，值越小，壓縮度越高。
先看如何對(duì)圖片加密并保存
源碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加密圖片并保存</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
請(qǐng)選定要加密的圖片文件<input id="file" type="file" onchange="showPreview(this, 'pic')" capture="microphone" accept="image/*">
<button type="button" onclick="download()">保存加密圖片</button>
<br>
<img id="pic" >
<script>
//顯示選定的圖片
function showPreview(source, imgId) {
var file = source.files[0];
if(window.FileReader) {
var fr = new FileReader();
fr.onloadend = function(e) {
document.getElementById(imgId).src = e.target.result;
ReadFlag = e.target.result;
}
fr.readAsDataURL(file);
}
}
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（畫(huà)布）
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);
//stringData = base64;
//加密
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>保存文件名為：對(duì)圖片加密并保存AA.html，用瀏覽器打開(kāi)效果：
單擊“保存加密圖片”將保存到瀏覽器默認(rèn)下載位置，你可以到此找到已加密的圖片，用“畫(huà)圖”等是打不開(kāi)的——因?yàn)橐鸭用?，怎么打開(kāi)？接著往下看。
再看對(duì)已加密圖片文件進(jìn)行解密
對(duì)由上面例子加密的圖片文件進(jìn)行解密，并將解密得到的圖片保存到本地，源碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>對(duì)已經(jīng)加密圖片解密</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')">保存已解密圖片</button>
<br>
<img id="pic">
<script>
var fileName;
document.getElementById('file').onchange =function(){
var file = this.files[0];
fileName=file.name
//alert(file.name)
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("提示：請(qǐng)先選定要解密的加密圖片文件！?。?);
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標(biāo)簽中圖片保存到本地
function downloadIamge(selector) {
// 通過(guò)選擇器獲取img元素
var img = document.getElementById(selector)
// 將圖片的src屬性作為URL地址
var url = img.src
//alert(url);
if(url ==""){
alert("請(qǐng)先解密已加密的圖片文件！");
return;
}
var a = document.createElement('a')
var event = new MouseEvent('click')
a.download = "解密_"+fileName // '下載圖片名稱(chēng)'
a.href = url
a.dispatchEvent(event) //根據(jù)A標(biāo)簽的屬性來(lái)搞事情
}
</script>
</body>
</html>
保存文件名為：對(duì)已加密圖片文件進(jìn)行解密并可保存AA.html，用瀏覽器打開(kāi)效果：
解密后的圖片可保存，單擊“保存已解密圖片”將保存到瀏覽器默認(rèn)下載位置，你可以到此找到已解密的圖片，可以用“畫(huà)圖”等 打開(kāi)看了。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-725942.html
參考：https://www.jb51.net/article/239975.htm文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-725942.html
到了這里，關(guān)于JS基于base64編碼加密解密文本和圖片（修訂）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[虛幻引擎] UE DTBase64 插件說(shuō)明 使用藍(lán)圖對(duì)字符串或文件進(jìn)行Base64加密解密](https://imgs.yssmx.com/Uploads/2024/02/640195-1.png)
