前端实现 base64 编码和解码-阿里云开发者社区

前端实现 base64 编码和解码

2022-11-22 577

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端实现 base64 编码和解码

1. base64简介

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

编码规则：

将每三个字节作为一组，一共是24个二进制位。
将这24个二进制位分为四组，每个组有6个二进制位。
在每组前面加两个00，扩展成32个二进制位，即四个字节。
根据下表，得到扩展后的每个字节的对应符号，这就是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==。

如何解码:

将每4个字符为一组，查找上表，找到每个字符对应的ASCII值;
将4个ASCII值写成二进制形式，并将每个二进制的前2个00去掉;
将剩下的24位二进制位分成3份，即3个字节;
查找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);
}

前端实现 base64 编码和解码

1. base64简介

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

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

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

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

前端实现 base64 编码和解码

1. base64简介

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

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

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

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景