1.base64の概要
Base64:基本文字セットとして64文字を選択し(AZ、az、0-9、+、/、およびパッドワードとして "="、実際には65文字)、他のすべての記号はこの文字に変換されます。キャラクターセット。
エンコード規則:
- グループとして3バイトごとに、合計24のバイナリビットがあります。
- これらの24個のバイナリビットを4つのグループに分割すると、各グループには6個のバイナリビットがあります。
- 各グループの前に2つの00を追加して、32のバイナリビット、つまり4バイトに拡張します。
- 次の表に従って、展開後の各バイトの対応するシンボルを取得します。これは、Base64のエンコード値です。
バイト数が3未満の場合はどうなりますか?2バイト
の場合
:上記のルールに従って、これら2バイトの合計16個のバイナリビットが3つのグループ(6、6、4)に変換されます。前の2つの0に加えて、最後のグループも2つのゼロを追加する必要があります。このようにして、3桁のBase64コードが取得され、最後に「=」記号が追加されます。
eg:
“Ma"这个字符串是两个字节,可以转化成三组00010011、00010110、00000100以后,
对应Base64值分别为T、W、E,再补上一个”="号,因此"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==。
デコード方法:
- 4文字ごとにグループにまとめ、上記の表を調べて、各文字に対応するASCII値を見つけます。
- 4つのASCII値をバイナリ形式で記述し、各バイナリの最初の200を削除します。
- 残りの24個のバイナリビットを3つの部分、つまり3バイトに分割します。
- 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);
}