JS实现Base64编码、解码,即window.atob,window.btoa功能
window.atob(),window.btoa()方法可以对字符串精选base64编码和解码,但是有些环境比如nuxt的服务端环境没法使用window,所以需要自己实现一个base64的编码解码功能,下面是原生js实现该功能,可以作为一个常用工具使用。
// private property
let _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; // private method for UTF-8 encoding
function _utf8_encode (string) {
string = string.replace(/\r\n/g,"\n");
let utftext = "";
for (let n = ; n < string.length; n++) {
let c = string.charCodeAt(n);
if (c < ) {
utftext += String.fromCharCode(c);
} else if((c > ) && (c < )) {
utftext += String.fromCharCode((c >> ) | );
utftext += String.fromCharCode((c & ) | );
} else {
utftext += String.fromCharCode((c >> ) | );
utftext += String.fromCharCode(((c >> ) & ) | );
utftext += String.fromCharCode((c & ) | );
} }
return utftext;
} // private method for UTF-8 decoding
function _utf8_decode (utftext) {
let string = "";
let i = ;
let c = ;
let c1 = ;
let c2 = ;
let c3 = ;
while ( i < utftext.length ) {
c = utftext.charCodeAt(i);
if (c < ) {
string += String.fromCharCode(c);
i++;
} else if((c > ) && (c < )) {
c2 = utftext.charCodeAt(i+);
string += String.fromCharCode(((c & ) << ) | (c2 & ));
i += ;
} else {
c2 = utftext.charCodeAt(i+);
c3 = utftext.charCodeAt(i+);
string += String.fromCharCode(((c & ) << ) | ((c2 & ) << ) | (c3 & ));
i += ;
}
}
return string;
} // public method for encoding
export const encode = (input) => {
let output = "";
let chr1, chr2, chr3, enc1, enc2, enc3, enc4;
let i = ;
input = _utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> ;
enc2 = ((chr1 & ) << ) | (chr2 >> );
enc3 = ((chr2 & ) << ) | (chr3 >> );
enc4 = chr3 & ;
if (isNaN(chr2)) {
enc3 = enc4 = ;
} else if (isNaN(chr3)) {
enc4 = ;
}
output = output +
_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
_keyStr.charAt(enc3) + _keyStr.charAt(enc4);
}
return output;
} // public method for decoding
export const decode = (input) => {
let output = "";
let chr1, chr2, chr3;
let enc1, enc2, enc3, enc4;
let i = ;
input = input.replace(/[^A-Za-z0-\+\/\=]/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 << ) | (enc2 >> );
chr2 = ((enc2 & ) << ) | (enc3 >> );
chr3 = ((enc3 & ) << ) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != ) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != ) {
output = output + String.fromCharCode(chr3);
}
}
output = _utf8_decode(output);
return output;
}
当然github上还有很多比较好的base64转码解码插件,可以自行查找
JS实现Base64编码、解码,即window.atob,window.btoa功能的更多相关文章
- JS实现——Base64编码解码,带16进制显示
在网上找了个JS实现的Base64编码转换,所以就想自己研究下,界面如下: 将代码以BASE64方式加密.解密 请输入要进行编码或解码的字符: 编码结果以ASCII码16进制显示 解码结果以ASCII ...
- js简单Base64编码解码
var str = 'javascript'; window.btoa(str) //转码结果 "amF2YXNjcmlwdA==" window.atob("amF2Y ...
- 原生js实现Base64编码解码
注:ie10+ var str = window.btoa("liusong"); console.log(str); var s = window.atob("bGl1 ...
- JS的base64编码解码
Unicode问题解法 有个小坑是它只支持ASCII. 如果你调用btoa("中文")会报错: Uncaught DOMException: Failed to execute ' ...
- 原来浏览器原生支持JS Base64编码解码 outside of the Latin1 range
原来浏览器原生支持JS Base64编码解码 « 张鑫旭-鑫空间-鑫生活 https://www.zhangxinxu.com/wordpress/2018/08/js-base64-atob-bto ...
- js的Base64编码与解码
js的Base64编码与解码 pc和手机app项目中,经常需要将手机自带的表情图片转换特定的编码格式与后台进行交互. Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止 ...
- Javascript中Base64编码解码的使用实例
Javascript为我们提供了一个简单的方法来实现字符串的Base64编码和解码,分别是window.btoa()函数和window.atob()函数. 1 var encodedStr = win ...
- 常用的js、java编码解码方法
前言 前后端直接传输数据进行交互不就行了吗,为什么还要进行编码解码?正常情况下直接交互没问题,但当有类似以下情况出现时就需要进行编码再进行传输: 1.编码格式难以统一,导致数据交互过程出现中文乱码等问 ...
- 王小胖之 Base64编码/解码
使用场景:编码网址作为URL参数,简单编码或加密数据,下载地址生成或解析. 实现功能:BASE64在线编码和解码. 数据实例:王小胖好啊,王小胖顶呱呱!! ~~ english 123 !@#$%^& ...
- OpenSSL 使用 base64 编码/解码
简述 关于 OpenSSL 的介绍及安装请参见:Windows下编译OpenSSL 下面主要介绍有关 OpenSSL 使用 base64 编码/解码. 简述 编码解码 更多参考 编码/解码 #incl ...
随机推荐
- CentOS 7 配置本地 YUM源
以VMware中使用ISO光盘为例配置本地Yum源 配置步骤:1.安装好CentOS 7后,使用root账户登陆系统#将安装CentOS所使用的iso光盘挂载到/mnt目录下 mount -t iso ...
- Entity Framework Codefirst的配置步骤
Entity Framework Codefirst的配置步骤: (1) 安装命令: install-package entityframework (2) 创建实体类,注意virtual关键字在导航 ...
- 关于django数据库迁移 以及显示未检测到更改的问题
No changes detected 显示这样的原因 数据库迁移代码步骤: 今天在所有数据库的时候对数据库进行了删除,重新迁移数据库映射,但是却发现终端给出了这样的信息. '>>> ...
- permission 权限清单
<uses-permission android:name="android.permission.READ_CALENDAR" /> <uses-permiss ...
- python SqlServer操作
python连接微软的sql server数据库用的第三方模块叫做pymssql(document:http://www.pymssql.org/en/stable/index.html).在官方文档 ...
- RabbitMq 消息队列 在Python端的应用
https://www.cnblogs.com/Xuuuuuu/p/10895552.html rabbit_server持久化,消费者端手动确认保证消息不会丢失.具体代码如下: 1对1生产者端代码: ...
- 【DATAGUARD】物理dg在主库丢失归档文件的情况下的恢复(七)
[DATAGUARD]物理dg在主库丢失归档文件的情况下的恢复(七) 一.1 BLOG文档结构图 一.2 前言部分 一.2.1 导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到 ...
- echarts Y轴名称显示不全(转载)
转载来源:https://blog.csdn.net/qq8241994/article/details/90720657今天在项目的开发中遇到的一个问题,echarts Y轴左侧的文字太多了,显示不 ...
- 自动化运维-Ansible-playbook
Ansible Playbook https://ansible-tran.readthedocs.io/en/latest/docs/playbooks_intro.html Ansible中文网址 ...
- mac 使用 brew 安装 nginx 及各种命令
一.安装 brew install nginx 或 sudo brew install nginx 二.启动 brew services start nginx 或 sudo brew service ...