Base64編碼格式

原創

huangpb0624

2020-02-21 15:19

Base64 就是一種編碼方法，可以將任意值轉成 0～9、A～Z、a-z、+、/ 這64個字符組成的可打印字符。使用它的主要目的，不是爲了加密，而是爲了不出現特殊字符，簡化程序的處理。經編碼後，文本體積會變大 1/3。

一、ASCII 編碼轉 Base64

js原生提供兩個 Base64 相關的方法：

btoa()：ASCII 編碼轉爲 Base64 編碼
atob()：Base64 編碼轉爲原來的ASCII 編碼

btoa('hello') // aGVsbG8=
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)); // "你好"

三、圖片轉 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);  
}