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功能的更多相关文章

  1. JS实现——Base64编码解码,带16进制显示

    在网上找了个JS实现的Base64编码转换,所以就想自己研究下,界面如下: 将代码以BASE64方式加密.解密 请输入要进行编码或解码的字符: 编码结果以ASCII码16进制显示 解码结果以ASCII ...

  2. js简单Base64编码解码

    var str = 'javascript'; window.btoa(str) //转码结果 "amF2YXNjcmlwdA==" window.atob("amF2Y ...

  3. 原生js实现Base64编码解码

    注:ie10+ var str = window.btoa("liusong"); console.log(str); var s = window.atob("bGl1 ...

  4. JS的base64编码解码

    Unicode问题解法 有个小坑是它只支持ASCII. 如果你调用btoa("中文")会报错: Uncaught DOMException: Failed to execute ' ...

  5. 原来浏览器原生支持JS Base64编码解码 outside of the Latin1 range

    原来浏览器原生支持JS Base64编码解码 « 张鑫旭-鑫空间-鑫生活 https://www.zhangxinxu.com/wordpress/2018/08/js-base64-atob-bto ...

  6. js的Base64编码与解码

    js的Base64编码与解码 pc和手机app项目中,经常需要将手机自带的表情图片转换特定的编码格式与后台进行交互. Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止 ...

  7. Javascript中Base64编码解码的使用实例

    Javascript为我们提供了一个简单的方法来实现字符串的Base64编码和解码,分别是window.btoa()函数和window.atob()函数. 1 var encodedStr = win ...

  8. 常用的js、java编码解码方法

    前言 前后端直接传输数据进行交互不就行了吗,为什么还要进行编码解码?正常情况下直接交互没问题,但当有类似以下情况出现时就需要进行编码再进行传输: 1.编码格式难以统一,导致数据交互过程出现中文乱码等问 ...

  9. 王小胖之 Base64编码/解码

    使用场景:编码网址作为URL参数,简单编码或加密数据,下载地址生成或解析. 实现功能:BASE64在线编码和解码. 数据实例:王小胖好啊,王小胖顶呱呱!! ~~ english 123 !@#$%^& ...

  10. OpenSSL 使用 base64 编码/解码

    简述 关于 OpenSSL 的介绍及安装请参见:Windows下编译OpenSSL 下面主要介绍有关 OpenSSL 使用 base64 编码/解码. 简述 编码解码 更多参考 编码/解码 #incl ...

随机推荐

  1. IntelliJ IDEA 换背景免费酷炫的插件(转)

    一.插件的安装 打开setting文件选择Plugins选项 Ctrl + Alt + S File -> Setting 分别是安装JetBrains插件,第三方插件,本地已下载的插件包. 二 ...

  2. C语言--线性表

    #include<stdio.h>#include<stdlib.h>#include<string.h>#define LIST_SIZE 100#define ...

  3. ASP.NET SignalR 系列(五)之群组推送

    在上一章介绍了 一对一推送的方式,这章重点介绍下群组推送和多人推送 群组主要就是用到了方法:Groups.Add(Context.ConnectionId, groupName); 将不同的连接id加 ...

  4. golang中生成读取二维码(skip2/go-qrcode和boombuler/barcode,tuotoo/qrcode)

     1 引言 在github上有好用golan二维码生成和读取库,两个生成二维码的qrcode库和一个读取qrcode库. skip2/go-qrcode生成二维码,github地址:https://g ...

  5. Kafka 生产者、消费者与分区的关系

    背景 最近和海康整数据对接, 需要将海康产生的结构化数据拿过来做二次识别. 基本的流程: 海康大数据 --> kafka server --> 平台 Kafka 的 topic 正常过车 ...

  6. sublime中Vue高亮插件安装

    1.准备语法高亮插件vue-syntax-highlight. 下载地址: https://github.com/vuejs/vue-syntax-highlight 下载页面并下载: 解开压缩包vu ...

  7. pip笔记(译)

    从PyPI中安装包 >>> pip install SomePackage [...] Successfully installed SomePackage 从PyPI或其他地方安装 ...

  8. Kali软件库认识

    对kali上的软件进行一个初步的认识 信息收集 dmitry -o 将输出保存到%host.txt或由-o文件指定的文件 -i 对主机的IP地址执行whois查找 -w 对主机的域名执行whois查找 ...

  9. Alpha_4

    一. 站立式会议照片 二. 工作进展 (1) 昨天已完成的工作 a. 我的·主界面设计 b. 番茄钟的页面及音乐选择弹窗页面设计 c. 实现自定义习惯和设置新习惯的功能页面,并可预览 d.已实现番茄钟 ...

  10. MySQL/MariaDB数据库的主从复制

     MySQL/MariaDB数据库的主从复制  作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.MySQL复制概述 1>.传统扩展方式 垂直扩展(也叫向上扩展,Sacle ...