關(guān)于base64編碼和解碼的js工具函數(shù)

更新時(shí)間：2023年02月08日 09:38:47 作者：weixin_44953227

這篇文章主要介紹了關(guān)于base64編碼和解碼的js工具函數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

base64編碼和解碼的js工具函數(shù)

上代碼

// 使用
const base64 = new Base64Code()
const str = '你好'
const en = base64.enCode(str)
const de = base64.deCode(en)
console.log(en, 'base64編碼') // 5L2g5aW9
console.log(de, 'base64解碼') // 你好

|| 中文也可以進(jìn)行編碼, 里面已經(jīng)對(duì)數(shù)據(jù)UTF-8轉(zhuǎn)碼再base64編碼

// base64函數(shù)
function Base64Code() {
    // base64 character set, plus padding character (=)
    var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

        // Regular expression to check formal correctness of base64 encoded strings
        b64re = /^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/;

    // 轉(zhuǎn)UTF-8格式編碼 private method for UTF-8 encoding
    const utf8Encode = function (str) {
        let string = str;
        string = string.replace(/\r\n/g, '\n');
        let utfText = '';
        for (let n = 0; n < string.length; n++) {
        const c = string.charCodeAt(n);
        if (c < 128) {
            utfText += String.fromCharCode(c);
        } else if ((c > 127) && (c < 2048)) {
            utfText += String.fromCharCode((c >> 6) | 192);
            utfText += String.fromCharCode((c & 63) | 128);
        } else {
            utfText += String.fromCharCode((c >> 12) | 224);
            utfText += String.fromCharCode(((c >> 6) & 63) | 128);
            utfText += String.fromCharCode((c & 63) | 128);
        }

        }
        return utfText;
    };

    // 解UTF-8格式編碼 private method for UTF-8 decoding
    const utf8Decode = function (utfText) {
        let string = '';
        let i = 0;
        let c = 0;
        let c2 = 0;
        let c3 = 0;
        while (i < utfText.length) {
        c = utfText.charCodeAt(i);
        if (c < 128) {
            string += String.fromCharCode(c);
            i++;
        } else if ((c > 191) && (c < 224)) {
            c2 = utfText.charCodeAt(i + 1);
            string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
            i += 2;
        } else {
            c2 = utfText.charCodeAt(i + 1);
            c3 = utfText.charCodeAt(i + 2);
            string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
            i += 3;
        }
        }
        return string;
    };
    
    // base64編碼
    this.enCode = function(string) {
        string = utf8Encode(String(string));
        var bitmap, a, b, c,
            result = "",
            i = 0,
            rest = string.length % 3; // To determine the final padding

        for (; i < string.length;) {
            if ((a = string.charCodeAt(i++)) > 255 ||
                (b = string.charCodeAt(i++)) > 255 ||
                (c = string.charCodeAt(i++)) > 255)
                throw new TypeError("Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.");

            bitmap = (a << 16) | (b << 8) | c;
            result += b64.charAt(bitmap >> 18 & 63) + b64.charAt(bitmap >> 12 & 63) +
                b64.charAt(bitmap >> 6 & 63) + b64.charAt(bitmap & 63);
        }

        // If there's need of padding, replace the last 'A's with equal signs
        return rest ? result.slice(0, rest - 3) + "===".substring(rest) : result;
    };

    // base64解碼
    this.deCode = function(string) {
        // atob can work with strings with whitespaces, even inside the encoded part,
        // but only \t, \n, \f, \r and ' ', which can be stripped.
        string = String(string).replace(/[\t\n\f\r ]+/g, "");
        if (!b64re.test(string))
            throw new TypeError("Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.");

        // Adding the padding if missing, for semplicity
        string += "==".slice(2 - (string.length & 3));
        var bitmap, result = "",
            r1, r2, i = 0;
        for (; i < string.length;) {
            bitmap = b64.indexOf(string.charAt(i++)) << 18 | b64.indexOf(string.charAt(i++)) << 12 |
                (r1 = b64.indexOf(string.charAt(i++))) << 6 | (r2 = b64.indexOf(string.charAt(i++)));

            result += r1 === 64 ? String.fromCharCode(bitmap >> 16 & 255) :
                r2 === 64 ? String.fromCharCode(bitmap >> 16 & 255, bitmap >> 8 & 255) :
                String.fromCharCode(bitmap >> 16 & 255, bitmap >> 8 & 255, bitmap & 255);
        }
        return utf8Decode(result);
    };
}

前端實(shí)現(xiàn)base64解碼編碼

本文描述了三種前端實(shí)現(xiàn)base64解碼和編碼的方法

Base64 在線編碼解碼工具 https://base64.us/

方法一：btoa 和 atob

btoa 和 atob 是window對(duì)象上的兩個(gè)函數(shù)，window.atob()解碼，window.btoa()編碼

let encodeText = 'xiaxiayaoguai'
let decodeText = 'eGlheGlheWFvZ3VhaQ=='
console.log(atob(decodeText)) // xiaxiayaoguai
console.log(btoa(encodeText)) // eGlheGlheWFvZ3VhaQ==

Unicode字符編碼報(bào)錯(cuò)

這里我們將encodeText = '霞霞要乖'再進(jìn)行解碼就會(huì)出現(xiàn)以下報(bào)錯(cuò)，因?yàn)閎toa不支持Unicode字符編碼

Failed to execute ‘btoa’ on ‘Window’: The string to be encoded contains characters outside of the Latin1 range.

報(bào)錯(cuò)解決辦法：

編碼時(shí)，先用encodeURIComponent對(duì)字符串進(jìn)行編，再用btoa進(jìn)行Base64編碼；
解碼時(shí)，先用atob對(duì)Base64編碼的串進(jìn)行解碼，再用decodeURIComponent對(duì)字符串進(jìn)行解碼

let encodeText = '霞霞要乖'
let decodeText = 'JUU5JTlDJTlFJUU5JTlDJTlFJUU4JUE2JTgxJUU0JUI5JTk2'
console.log(btoa(encodeURIComponent(encodeText))) // JUU5JTlDJTlFJUU5JTlDJTlFJUU4JUE2JTgxJUU0JUI5JTk2
console.log(decodeURIComponent(atob(decodeText))) // 霞霞要乖

方法二：下包

下包

npm install --save js-base64

使用

<script>
    import {Base64} from 'js-base64' // 引入
    export default {
      data() {
        return {
          encodeText:'霞霞要乖',
          decodeText:'6Zye6Zye6KaB5LmW',
        }
      },
      created(){
        this.transformBase64()
      },
      methods: {
        transformBase64(){
          console.log('編碼：', Base64.encode(this.encodeText)) // 6Zye6Zye6KaB5LmW
          console.log('解碼：', Base64.decode(this.decodeText)) // 霞霞要乖
        }
      }
}
</script>

方法三：js實(shí)現(xiàn)

構(gòu)建函數(shù)

let Base64 = {
    keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

    encode: function(e) {
      let t = "";
      let n, r, i, s, o, u, a;
      let 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) {
      let t = "";
      let n, r, i;
      let s, o, u, a;
      let 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");
      let t = "";
      for (let n = 0; n < e.length; n++) {
        let 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) {
      let t = "";
      let n = 0;
      let 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
    }
  }

使用

let encodeText = '霞霞要乖'
let decodeText = '6Zye6Zye6KaB5LmW'
console.log(Base64.encode(encodeText)) // 6Zye6Zye6KaB5LmW
console.log(Base64.decode(decodeText)) // 霞霞要乖