base64編碼和解碼
const rich = btoa("I have money, a lot, fully 10 yuan.") // 編碼
console.log(rich) // SSBoYXZlIG1vbmV5LCBhIGxvdCwgZnVsbHkgMTAgeXVhbi4=
const HowMuchMoneyIHave = atob(rich) // 解碼
console.log(HowMuchMoneyIHave.split(',')[2]) // fully 10 yuan.
以上是對ASCII代碼進行加密，下面對非ASCII代碼加密
function b64Encode(str) {
return btoa(encodeURIComponent(str)); // 先轉碼再編碼
}
function b64Decode(str) {
return decodeURIComponent(atob(str)); // 先解碼再轉碼
}
let IHaveMoney = b64Encode('我有錢');
console.log(IHaveMoney); // JUU2JTg4JTkxJUU2JTlDJTg5JUU5JTkyJUIx
console.log(b64Decode(IHaveMoney)); // 我有錢
base64對圖片編碼
<body>
<img src="" class="img" />
<script>
function getBase64Image(img) {
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 ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
var dataUrl = canvas.toDataURL("images/" + ext);
return dataUrl;
};
var img = "./img/b5.jpg"; // 圖片路徑
var image = new Image();
image.src = img;
image.onload = function() {
var base64 = getBase64Image(image);
document.getElementsByClassName("img")[0].setAttribute("src", base64)
}
</script>
</body>