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. Mysql表字段命令alter add

    alter add命令用来增加表的字段. alter add命令格式:alter table 表名 add字段 类型 其他; 例如,在表MyClass中添加了一个字段passtest,类型为int(4 ...

  2. asp.net core 之中间件

    Http请求资源的过程可以看成一个管道:“Pipe”,并不是所有的请求都是合法的.安全的,其于功能.性能或安全方面的考虑,通常需要在这管道中装配一些处理程序来筛选和加工这些请求.这些处理程序就是中间件 ...

  3. C# vb .net实现宝丽来效果滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的宝丽来效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一 ...

  4. "Sed" 高级实用功能汇总

    sed命令有两个空间,一个叫pattern space,一个叫hold space.这两个空间能够证明人类的脑瓜容量是非常小的,需要经过大量的训练和烧脑的理解,才能适应一些非常简单的操作. 不信看下面 ...

  5. 自己使用的jquery公用common.js

    /*解决ie8中js数组没有indexOf方法*/ jQuery.extend({ exportResport : function(url, method, params){ var paramCo ...

  6. SpringBoot开发验证码功能

    简介 验证码主要是用来防止恶意破解密码.刷票.论坛灌水.刷页.Kaptcha 是一个可高度配置的实用验证码生成工具,使用也很简单,这里就使用它来做验证码. 另外使用JAVA原生的API也可以实现验证码 ...

  7. python预习day1

    计算机基础 cpu 大脑 内存 临时记忆 硬盘 永久记忆 输入设备 眼睛 耳朵 输出设备 嘴巴 操作系统 控制计算机硬件工作流程的 应用程序 安装在操作系统之上的软件 python简介 python是 ...

  8. centos6安装composer

    需要使用到curl,没有的话需要 yum  -y install curl     ###安装一.下载:curl -sS https://getcomposer.org/installer | php ...

  9. python 工厂方法

    工厂方法模式(FACTORY METHOD)是一种常用创建型设计模式,此模式的核心精神是封装类中变化的部分,提取其中个性化善变的部分为独立类, 通过依赖注入以达到解耦.复用和方便后期维护拓展的目的. ...

  10. JVM粗解

    主要是碰到了eclipse无法启动的问题.之前不知道怎么回事导致eclipse启动速度一次比一次慢, 百度了下开始改动eclipse.ini参数 也不知道改了啥.第二天直接起不来eclipse了. 于 ...