CLQ工作室开源代码 - base64编码：js实现base64编码的3种方式，多场景下分析使用[zt]

您的位置：首页 >> CLQ工作室开源代码 >> 主题: base64编码：js实现base64编码的3种方式，多场景下分析使用[zt] [回主站] [分站链接]

您的位置：首页 >> CLQ工作室开源代码 >> 主题: base64编码：js实现base64编码的3种方式，多场景下分析使用[zt] [最新] [回主站]

标题

base64编码：js实现base64编码的3种方式，多场景下分析使用[zt]

clq

浏览(430) + 2022-10-17 13:39:40 发表编辑

关键字:

[2022-10-17 14:04:37 最后更新]

https://blog.csdn.net/qq_42961150/article/details/121922216

base64编码：js实现base64编码的3种方式，多场景下分析使用
上网的虫不叫网虫
于 2021-12-14 10:52:29 发布 22563

目录

前言
js实现base64编码的3种方式
应用场景总结及建议
关注我，不迷路

前言

js实现base64编码，前端一般应用场景在与后端接口参数中体现，后端可能需要某个字段是base64编码的字符，这时候就需要用前端的方法进行转换，再作为参数传递到服务端。
js实现base64编码的3种方式

1. 使用base64.js进行转换

获取base64.js，可以直接搜索base64.js下载。推荐使用npm下载：npm install --save js-base64，下载后在node_modules文件夹下面就能找到需要的base64.js。
在普通的html文件中使用：直接将js引入使用。
在vue中使用，用npm下载之后，直接用require引入使用：const Base64 = require('js-base64').Base64。
加密使用：Base64.encode('我是一段需要处理的字符')。
解密使用：Base64.decode('5oiR5piv5LiA5q616ZyA6KaB5aSE55CG55qE5a2X56ym')。

使用示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2. js内置方法进行转换

加密使用：window.btoa(unescape(encodeURIComponent('我是一段需要处理的字符')))
解密使用：decodeURIComponent(escape(window.atob('5oiR5piv5LiA5q616ZyA6KaB5aSE55CG55qE5a2X56ym')))
注意：1. 该方式只是兼容ie10及其以上，做移动端项目或者对ie低版本兼容没要求，这种方式适用；2. 该方式需要将字符串先编码才能进行转base64，否则中文字符串会报错。

使用示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3. node环境内置方法进行转换

node中自带的base64的编码与解码分为三种：普通字符串/十六进制/图片

普通字符串

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

1
2
3
4

十六进制

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

1
2
3
4

图片

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);
}

1
2
3
4
5
6
7
8
9
10
11

应用场景总结及建议

如果考虑到ie10及其以下低版本兼容性，使用第一种引入base64.js的方式；
如果是移动端项目或不考虑ie低版本兼容，直接使用第二种js内置方法进行转换，简单粗暴；
如果是在node环境中使用，就需要用到第三种方式；
如果是在vue项目中使用，推荐使用第一种，使用npm下载，直接引入使用。

clq

2022-10-17 13:47:25 发表编辑

https://www.cnblogs.com/xfweb/p/16090942.html

这个其实不对，它只考虑了双字节的汉字，不过算法可参考。

function Base64() {

// private property
_keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

// public method for encoding
this.encode = function(input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = _utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
_keyStr.charAt(enc3) + _keyStr.charAt(enc4);
}
return output;
}

// public method for decoding
this.decode = function(input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = _keyStr.indexOf(input.charAt(i++));
enc2 = _keyStr.indexOf(input.charAt(i++));
enc3 = _keyStr.indexOf(input.charAt(i++));
enc4 = _keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
}
output = _utf8_decode(output);
return output;
}

// private method for UTF-8 encoding
_utf8_encode = function(string) {
string = string.replace(/\r\n/g, "\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var 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;
}

// private method for UTF-8 decoding
_utf8_decode = function(utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 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;
}
}
this.base64 = new Base64();
console.log(this.base64.encode("123"))
console.log(this.base64.decode(this.base64.encode("123")))

clq

2022-10-17 14:04:37 发表编辑

https://www.cnblogs.com/ZheOneAndOnly/p/15946912.html

NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.