フロントエンドはbase64のエンコードとデコードを実現します

1.base64の概要

Base64:基本文字セットとして64文字を選択し(AZ、az、0-9、+、/、およびパッドワードとして "="、実際には65文字)、他のすべての記号はこの文字に変換されます。キャラクターセット。
エンコード規則:

  1. グループとして3バイトごとに、合計24のバイナリビットがあります。
  2. これらの24個のバイナリビットを4つのグループに分割すると、各グループには6個のバイナリビットがあります。
  3. 各グループの前に2つの00を追加して、32のバイナリビット、つまり4バイトに拡張します。
  4. 次の表に従って、展開後の各バイトの対応するシンボルを取得します。これは、Base64のエンコード値です。
    ここに画像の説明を挿入します

バイト数が3未満の場合はどうなりますか?2バイト
の場合
:上記のルールに従って、これら2バイトの合計16個のバイナリビットが3つのグループ(6、6、4)に変換されます。前の2つの0に加えて、最後のグループも2つのゼロを追加する必要があります。このようにして、3桁のBase64コードが取得され、最後に「=」記号が追加されます。

eg:
“Ma"这个字符串是两个字节,可以转化成三组000100110001011000000100以后,
对应Base64值分别为TWE,再补上一个”="号,因此"Ma"的Base64编码就是TWE=


1バイトの場合:このバイトの8つのバイナリビットは、上記の規則に従って2つのグループ(6、2)に変換され、最後のグループに2つの0が前に、4つの0が後ろに追加されます。 。このようにして、2桁のBase64エンコーディングが取得され、最後に2つの「=」記号が追加されます。

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

デコード方法:

  1. 4文字ごとにグループにまとめ、上記の表を調べて、各文字に対応するASCII値を見つけます。
  2. 4つのASCII値をバイナリ形式で記述し、各バイナリの最初の200を削除します。
  3. 残りの24個のバイナリビットを3つの部分、つまり3バイトに分割します。
  4. ASCII値テーブル(次のテーブル)を検索して、各バイトに対応する文字を見つけます。

ここに画像の説明を挿入します

2.Vueでbase64エンコーディングとデコーディングを実装します

2.1のインストールを実現するには、js-base64プラグインを使用し
ます

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.ウィンドウオブジェクトの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は中国語をサポートしておらず、atobとbtoaはIE9以降ではサポートされていません。

解決策: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. base64エンコーディングおよびデコーディング(中国語をサポート)メソッドのjs実装

      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.ノードに付属するbase64エンコードおよびデコード方法

5.1通常の文字列

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

5.216進数16進数

//编码
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);
}

おすすめ

転載: blog.csdn.net/ZYS10000/article/details/109263539