window.atob(),window.btoa()方法可以对字符串精选base64编码和解码,但是有些环境比如nuxt的服务端环境没法使用window,所以需要自己实现一个base64的编码解码功能,下面是原生js实现该功能,可以作为一个常用工具使用。

  1. // private property
  2. let _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
  3.  
  4. // private method for UTF-8 encoding
  5. function _utf8_encode (string) {
  6. string = string.replace(/\r\n/g,"\n");
  7. let utftext = "";
  8. for (let n = ; n < string.length; n++) {
  9. let c = string.charCodeAt(n);
  10. if (c < ) {
  11. utftext += String.fromCharCode(c);
  12. } else if((c > ) && (c < )) {
  13. utftext += String.fromCharCode((c >> ) | );
  14. utftext += String.fromCharCode((c & ) | );
  15. } else {
  16. utftext += String.fromCharCode((c >> ) | );
  17. utftext += String.fromCharCode(((c >> ) & ) | );
  18. utftext += String.fromCharCode((c & ) | );
  19. }
  20.  
  21. }
  22. return utftext;
  23. }
  24.  
  25. // private method for UTF-8 decoding
  26. function _utf8_decode (utftext) {
  27. let string = "";
  28. let i = ;
  29. let c = ;
  30. let c1 = ;
  31. let c2 = ;
  32. let c3 = ;
  33. while ( i < utftext.length ) {
  34. c = utftext.charCodeAt(i);
  35. if (c < ) {
  36. string += String.fromCharCode(c);
  37. i++;
  38. } else if((c > ) && (c < )) {
  39. c2 = utftext.charCodeAt(i+);
  40. string += String.fromCharCode(((c & ) << ) | (c2 & ));
  41. i += ;
  42. } else {
  43. c2 = utftext.charCodeAt(i+);
  44. c3 = utftext.charCodeAt(i+);
  45. string += String.fromCharCode(((c & ) << ) | ((c2 & ) << ) | (c3 & ));
  46. i += ;
  47. }
  48. }
  49. return string;
  50. }
  51.  
  52. // public method for encoding
  53. export const encode = (input) => {
  54. let output = "";
  55. let chr1, chr2, chr3, enc1, enc2, enc3, enc4;
  56. let i = ;
  57. input = _utf8_encode(input);
  58. while (i < input.length) {
  59. chr1 = input.charCodeAt(i++);
  60. chr2 = input.charCodeAt(i++);
  61. chr3 = input.charCodeAt(i++);
  62. enc1 = chr1 >> ;
  63. enc2 = ((chr1 & ) << ) | (chr2 >> );
  64. enc3 = ((chr2 & ) << ) | (chr3 >> );
  65. enc4 = chr3 & ;
  66. if (isNaN(chr2)) {
  67. enc3 = enc4 = ;
  68. } else if (isNaN(chr3)) {
  69. enc4 = ;
  70. }
  71. output = output +
  72. _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
  73. _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
  74. }
  75. return output;
  76. }
  77.  
  78. // public method for decoding
  79. export const decode = (input) => {
  80. let output = "";
  81. let chr1, chr2, chr3;
  82. let enc1, enc2, enc3, enc4;
  83. let i = ;
  84. input = input.replace(/[^A-Za-z0-\+\/\=]/g, "");
  85. while (i < input.length) {
  86. enc1 = _keyStr.indexOf(input.charAt(i++));
  87. enc2 = _keyStr.indexOf(input.charAt(i++));
  88. enc3 = _keyStr.indexOf(input.charAt(i++));
  89. enc4 = _keyStr.indexOf(input.charAt(i++));
  90. chr1 = (enc1 << ) | (enc2 >> );
  91. chr2 = ((enc2 & ) << ) | (enc3 >> );
  92. chr3 = ((enc3 & ) << ) | enc4;
  93. output = output + String.fromCharCode(chr1);
  94. if (enc3 != ) {
  95. output = output + String.fromCharCode(chr2);
  96. }
  97. if (enc4 != ) {
  98. output = output + String.fromCharCode(chr3);
  99. }
  100. }
  101. output = _utf8_decode(output);
  102. return output;
  103. }

  当然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. C# 录音和变调

    一直想研究下录音 正好有个项目有机会使用一下强大的 NAudio (https://github.com/naudio/NAudio)库 录音 NAudio 录音类库 public class NAu ...

  2. 【已解决】ArcMap的界面如何恢复默认设置

    解决方案:在C盘内搜索“Normal.mxt”,将它删除,然后重启ArcMap,即可.  效果图:

  3. Spring-Cloud之Zuul路由网关-6

    一.为什么需要Zuul? Zuul 作为微服务系统的网关组件,用于构建边界服务( Edge Service ),致力于动态路由.过滤.监控.弹性伸缩和安全.Zuul 作为路由网关组件,在微服务架构中有 ...

  4. 如何让 height:100%; 起作用---父级元素必须设定高度

    参考: http://www.webhek.com/post/css-100-percent-height.html https://www.cnblogs.com/kunmomo/p/1060066 ...

  5. 内部属性[[class]]

    1. 对象的[[class]]属性 所有typeof返回值为“object”的对象(如数组)都包含一个内部属性[[class]],这个属性无法直接访问,一般通过Object.prototype.toS ...

  6. 十一、vue生命周期诠释--带图

    Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue 的生命周期.通俗说就是 Vue 实例从创建到销毁的过程,就 ...

  7. tomcat将控制台输出定向到特定的文件中,并且一天一个文件

    在bin目录的start.bat中,编辑: call "%EXECUTABLE%" start %CMD_LINE_ARGS% 改成: call "%EXECUTABLE ...

  8. MySQL存储过程01

    过程:封装了若干条语句,调用时,这些封装体执行 函数:是一个由返回值的’过程‘ 过程是没有返回值的函数 我们把若干条sql封装起来,起个名字---过程 把此过程存储在数据库中------存储过程 存储 ...

  9. 团队第五次作业——Alpha2

    一.相关信息 Q A 作业所属课程 https://edu.cnblogs.com/campus/xnsy/2019autumnsystemanalysisanddesign/ 作业要求 https: ...

  10. ReqMan — 需求提取和协同处理工具

            ReqMan是由德国engineering method AG公司开发的一款高效的.可自由定制的需求提取和协同处理工具.ReqMan 能够将PDF.Word.Excel等格式的文档提取 ...