Base64编码、解码

Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+、/ 这64个字符组成的可打印字符。主要用于转换二进制数据。经编码后，文本体积会变大 1/3。

一、ASCII 编码转 Base64

js原生提供两个 Base64 相关的方法：

• window.btoa()：ASCII 编码转为 Base64 编码
• window.atob()：Base64 编码转为原来的ASCII 编码

window.btoa('hello') // aGVsbG8=
window.atob('aGVsbG8=') // hello

非 ASCII 编码（如：汉字）使用上述2个方法会报错。

二、非 ASCII 编码转 Base64

要将非 ASCII 码字符转为 Base64 编码，中间要用 encodeURIComponent 方法进行一次转码。

function b64Encode(str) {
    return btoa(encodeURIComponent(str));
}
function b64Decode(str) {
    return decodeURIComponent(atob(str));
}
    
let strChinaBase64 = b64Encode('你好'); // "JUU0JUJEJUEwJUU1JUE1JUJE"
console.log(b64Decode(strChinaBase64)); // "你好"

三、字符串（ASCII 和 非 ASCII 都适用）转 Base64

js-base64 npm 包可用于字符串转 Base64。

$ cnpm i -S js-base64

import { Base64 } from 'js-base64';

// 加密
Base64.encode('dankogai'); // ZGFua29nYWk=
// 解密
Base64.decode('ZGFua29nYWk='); // dankogai

四、图片转 Base64

var img = "http://xxx.com/img/xx.png";  

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("image/"+ext);  
     return dataURL;  
}  

// 下面的代码也可以封装到getBase64Image函数里面
var image = new Image();  
image.src = img;  
image.onload = function(){  
  var base64 = getBase64Image(image);  
  console.log(base64);  
}

五、图片还没上传时的预览图片

const inp = document.querySelector('input');
inp.onchange = e => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = e => {
    const dataurl = e.target.result;
    preview.src = dataurl;
  }
  reader.readAsDataURL(file);
}