阅读 144

前端实现 base64 编码和解码

这是我参与更文挑战的第 16 天,活动详情查看 : 更文挑战

1. base64简介

Base64:选出64个字符作为一个基本字符集(A-Z,a-z,0-9,+,/,再加上作为垫字的"=",实际是65个字符),其它所有符号都转换成这个字符集中的字符。

编码规则:

  1. 将每三个字节作为一组,一共是24个二进制位。
  2. 将这24个二进制位分为四组,每个组有6个二进制位。
  3. 在每组前面加两个00,扩展成32个二进制位,即四个字节。
  4. 根据下表,得到扩展后的每个字节的对应符号,这就是Base64的编码值。

在这里插入图片描述

那如果字节数不足3呢? 2个字节的情况: 将这2个字节的一共16个二进制位,按照上面的规则,转成三组(6,6,4),最后一组除了前面加两个0以外,后面也要加两个0。这样得到一个三位的Base64编码,再在末尾补上一个"="号。

eg:
“Ma"这个字符串是两个字节,可以转化成三组00010011、00010110、00000100以后,
对应Base64值分别为T、W、E,再补上一个”="号,因此"Ma"的Base64编码就是TWE=。
复制代码

1个字节的情况: 将这1个字节的8个二进制位,按照上面的规则转成2组(6,2),最后一组除了前面加二个0以外,后面再加4个0。这样得到一个二位的Base64编码,再在末尾补上两个"="号。

eg:
“M"这个字母是一个字节,可以转化为二组00010011、00010000,对应的Base64值分别为T、Q,再补上二个”="号,
因此"M"的Base64编码就是TQ==。
复制代码

如何解码:

  1. 将每4个字符为一组,查找上表,找到每个字符对应的ASCII值;
  2. 将4个ASCII值写成二进制形式,并将每个二进制的前2个00去掉;
  3. 将剩下的24位二进制位分成3份,即3个字节;
  4. 查找ASCII值表(下表),找到每个字节对应的字符;

在这里插入图片描述

2. Vue 中实现 base64 编码和解码

使用 js-base64 插件实现

2.1 安装

npm install --save js-base64
复制代码

2.2 引入并使用

<script>
export default {
  data() {
    return {
      encodeTxt:'前端开发',
      decodeTxt:'5YmN56uv5byA5Y+R',
    };
  },
  methods: {
    base64Test(){
      let Base64 = require('js-base64').Base64; // 引入
      console.log('编码:' + Base64.encode(this.encodeTxt))
      console.log('解码:' + Base64.decode(this.decodeTxt))  
    }
  },
  mounted(){
    this.base64Test();
  }
};
</script>
复制代码

2.3 效果

在这里插入图片描述

3. 通过 window对象的 btoa 和 atob 函数实现

3.1 window.atob() 函数用来解码被 base64 编码过的数据

var encoded_str = "VGhpcyBpcyBhIHN0cmluZw==";
var str = atob(encoded_str);
console.log(str); // This is a string
复制代码

3.2 window.btoa() 将ascii字符串或二进制数据转换成 base64 编码过的字符串

var str = "This is a string";
var encoded_str = btoa(str);
console.log(encoded_str); // VGhpcyBpcyBhIHN0cmluZw==
复制代码

注意:不适用于带中文解密,即window.btoa 与 window.atob 不支持中文,且 IE9 以下不支持atob、btoa

解决:btoa 不支持 Unicode 字符编码的问题 编码时,先用 encodeURIComponent 对字符串进行编码,再进行 btoa 进行 Base64 编码 解码时,先用 atob 对 Base64 编码的串进行解码,再用 decodeURIComponent 对字符串进行解码

var str = "hello,中国";
var encoded_str = btoa(encodeURIComponent(str));
var decoded_str = decodeURIComponent(atob(encoded_str));

console.log(encoded_str); // aGVsbG8lMkMlRTQlQjglQUQlRTUlOUIlQkQ=
console.log(decoded_str); // hello,中国在这里插入代码片
复制代码

4. js实现 base64 的编码解码(支持中文)的方法

      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
        }
      };
      
      var str = '你好';

      var enstr = Base64.encode(str); 
      console.log(enstr); // 5L2g5aW9

      var destr = Base64.decode(enstr);
      console.log(destr); // 你好
复制代码

5. node中自带的base64编码与解码方法

5.1 普通字符串

//编码
new Buffer(String).toString('base64');
//解码
new Buffer(base64Str, 'base64').toString();
复制代码

5.2 十六进制Hex

//编码
new Buffer(String, 'base64').toString('hex');
//解码
new Buffer(base64Str, 'hex').toString('utf8');
复制代码

5.3 图片

const fs = require('fs');
//编码
function base64_encode(file) {
    let bitmap = fs.readFileSync(file);
    return new Buffer(bitmap).toString('base64');
}
//解码
function base64_decode(base64str, file) {
    var bitmap = new Buffer(base64str, 'base64');
    fs.writeFileSync(file, bitmap);
}
复制代码
文章分类
前端
文章标签