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. Golang/Go goroutine调度器原理/实现【原】

    Go语言在2016年再次拿下TIBOE年度编程语言称号,这充分证明了Go语言这几年在全世界范围内的受欢迎程度.如果要对世界范围内的gopher发起一次“你究竟喜欢Go的哪一点”的调查,我相信很多Gop ...

  2. 软件平台ThinkSNS+软件系统研发日记

    NO.1: 实用开源软件安装部署是第一步, ThinkSNS+响应快速安装,易于二开基准,为大家录制了一份宝塔面板安装社交系统ThinkSNS+视频教程,点开观看视频一起吸一吸. 若无法播放,请直接打 ...

  3. Android常用优秀开源框架整理

    前言 AOSF:全称为Android Open Source Framework,即Android优秀开源框架汇总.包含:网络请求okhttp,图片下载glide,数据库greenDAO,链式框架Rx ...

  4. iManager微服务自定义上传数据的两种方法

    背景 当数据量大时,通过浏览器上传可能速度较慢,可以使用以下两种方式进行数据导入. 方法一 1.访问k8s主页(31234端口) 找到所创建的微服务的命名空间(例如icloud-native-xxx) ...

  5. SQL Text Literals 文本

    Text Literals 文本 Use the text literal notation to specify values whenever string appears in the synt ...

  6. jQuery 页面加载后执行的事件(3 种方式)

    刚刚工作,没怎么用过 jQuery.今天在工作中遇到一个 jQuery 问题,页面加载的时候需要触发函数,第一直觉告诉我应该写成 onload(),结果不是.后来查了文档发现是 load(),但是版本 ...

  7. Vue+Django项目部署

    本地项目配置 1 复制 luffy/settings/dev.py为prop.py 修改luffy/settings/prop.py中以下几项 (1) allow_hosts ALLOWED_HOST ...

  8. Pthon魔术方法(Magic Methods)-可调用对象

    Pthon魔术方法(Magic Methods)-可调用对象 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.可调用对象方法 __call__: 类中定义一个该方法,实例就可以像 ...

  9. Gerrit 服务器入门使用-项目的创建与克隆

    Gerrit 服务器入门使用-项目的创建与克隆 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.创建克隆项目 1>.点击"BROWSE" 2>.点 ...

  10. jquery对象转成dom对象

     jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能.我们使用jQuery的同时也能混合Java ...