广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js中关于base64编码的问题
  • 955
分享到

js中关于base64编码的问题

js中base64编码jsbase64编码base64编码问题 2023-02-08 12:02:56 955人浏览 泡泡鱼
摘要

目录关于base64编码的问题1. 使用 Buffer对象2. 使用base64js.js3. js中类似java中byte强转int类型手把手教你js实现base64编码规则总结关

关于base64编码的问题

1. 使用 Buffer对象

Buffer.from(JSON.stringify(JwtHeader)).toString('base64')

2. 使用base64js.js


(function (r) {
  if (typeof exports === "object" && typeof module !== "undefined") {
    module.exports = r()
  } else {
    if (typeof define === "function" && define.amd) {
      define([], r)
    } else {
      var e;
      if (typeof window !== "undefined") {
        e = window
      } else {
        if (typeof global !== "undefined") {
          e = global
        } else {
          if (typeof self !== "undefined") {
            e = self
          } else {
            e = this
          }
        }
      }
      e.base64js = r()
    }
  }
})(function () {
  var r, e, t;
  return function r(e, t, n) {
    function o(i, a) {
      if (!t[i]) {
        if (!e[i]) {
          var u = typeof require == "function" && require;
          if (!a && u) {
            return u(i, !0)
          }
          if (f) {
            return f(i, !0)
          }
          var d = new Error("Cannot find module '" + i + "'");
          throw d.code = "MODULE_NOT_FOUND", d
        }
        var c = t[i] = {
          exports: {}
        };
        e[i][0].call(c.exports, function (r) {
          var t = e[i][1][r];
          return o(t ? t : r)
        }, c, c.exports, r, e, t, n)
      }
      return t[i].exports
    }

    var f = typeof require == "function" && require;
    for (var i = 0; i < n.length; i++) {
      o(n[i])
    }
    return o
  }({
    "/": [function (r, e, t) {
      t.byteLength = c;
      t.toByteArray = v;
      t.fromByteArray = s;
      var n = [];
      var o = [];
      var f = typeof Uint8Array !== "undefined" ? Uint8Array : Array;
      var i = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
      for (var a = 0, u = i.length; a < u; ++a) {
        n[a] = i[a];
        o[i.charCodeAt(a)] = a
      }
      o["-".charCodeAt(0)] = 62;
      o["_".charCodeAt(0)] = 63;

      function d(r) {
        var e = r.length;
        if (e % 4 > 0) {
          throw new Error("Invalid string. Length must be a multiple of 4")
        }
        return r[e - 2] === "=" ? 2 : r[e - 1] === "=" ? 1 : 0
      }

      function c(r) {
        return r.length * 3 / 4 - d(r)
      }

      function v(r) {
        var e, t, n, i, a;
        var u = r.length;
        i = d(r);
        a = new f(u * 3 / 4 - i);
        t = i > 0 ? u - 4 : u;
        var c = 0;
        for (e = 0; e < t; e += 4) {
          n = o[r.charCodeAt(e)] << 18 | o[r.charCodeAt(e + 1)] << 12 | o[r.charCodeAt(e + 2)] << 6 | o[r.charCodeAt(e + 3)];
          a[c++] = n >> 16 & 255;
          a[c++] = n >> 8 & 255;
          a[c++] = n & 255
        }
        if (i === 2) {
          n = o[r.charCodeAt(e)] << 2 | o[r.charCodeAt(e + 1)] >> 4;
          a[c++] = n & 255
        } else {
          if (i === 1) {
            n = o[r.charCodeAt(e)] << 10 | o[r.charCodeAt(e + 1)] << 4 | o[r.charCodeAt(e + 2)] >> 2;
            a[c++] = n >> 8 & 255;
            a[c++] = n & 255
          }
        }
        return a
      }

      function l(r) {
        return n[r >> 18 & 63] + n[r >> 12 & 63] + n[r >> 6 & 63] + n[r & 63]
      }

      function h(r, e, t) {
        var n;
        var o = [];
        for (var f = e; f < t; f += 3) {
          n = (r[f] << 16) + (r[f + 1] << 8) + r[f + 2];
          o.push(l(n))
        }
        return o.join("")
      }

      function s(r) {
        var e;
        var t = r.length;
        var o = t % 3;
        var f = "";
        var i = [];
        var a = 16383;
        for (var u = 0, d = t - o; u < d; u += a) {
          i.push(h(r, u, u + a > d ? d : u + a))
        }
        if (o === 1) {
          e = r[t - 1];
          f += n[e >> 2];
          f += n[e << 4 & 63];
          f += "=="
        } else {
          if (o === 2) {
            e = (r[t - 2] << 8) + r[t - 1];
            f += n[e >> 10];
            f += n[e >> 4 & 63];
            f += n[e << 2 & 63];
            f += "="
          }
        }
        i.push(f);
        return i.join("")
      }
    }, {}]
  }, {}, [])("/")
});

字符串编码


var utf8StrToBytes = function (utf8Str) {
    var ens = encodeURIComponent(utf8Str);
    var es = unescape(ens);
    var esLen = es.length;
    // Convert
    var Words = [];
    for (var i = 0; i < esLen; i++) {
        words[i] = es.charCodeAt(i);
    }
    return words;
}

var bytesToUtf8Str = function (bytesArray) {
    var utf8Byte = bytesArray;
    var latin1Chars = [];
    for (var i = 0; i < utf8Byte.length; i++) {
        latin1Chars.push(String.fromCharCode(utf8Byte[i]));
    }
    return decodeURIComponent(escape(latin1Chars.join('')));
}

测试

base64.fromByteArray(utf8StrToBytes('打快点快点')) // 5omT5b+r54K55b+r54K5
//同Java中 org.apache.commons.codec
Base64.encodeBase64String("打快点快点".getBytes()) // 5omT5b+r54K55b+r54K5

3. js中类似java中byte强转int类型


var intToByte = function(i) {
  var b = i & 0xFF;
  var c = 0;
  if (b >= 128) {
    c = b % 128;
    c = -1 * (128 - c);
  } else {
    c = b;
  }
  return c
}

手把手教你js实现base64编码规则

base64编码是使用自己的编码规则重新编码ascii码,原理是将3*8个字节用4*6去代替,将8字节划分时会在前面添加2个0形成6位,最后不够4个字节全补0。

base64也是基于64个可打印的字符来表示二进制的数据的一种方法。

base64编码表如下图所示:

js实现代码如下:


//2.加密、解密算法封装:
function Base64() { 
  // private property 
  _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; 
  // public method for encoding 
  this.encode = function (input) { 
    var output = ""; 
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4; 
    var i = 0; 
    input = _utf8_encode(input); 
    while (i < input.length) { 
      chr1 = input.charCodeAt(i++); 
      chr2 = input.charCodeAt(i++); 
      chr3 = input.charCodeAt(i++); 
      enc1 = chr1 >> 2; 
      // &3表示只要chr1的后两位
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 
      enc4 = chr3 & 63; 
      if (isNaN(chr2)) { 
        enc3 = enc4 = 64; 
      } else if (isNaN(chr3)) { 
        enc4 = 64; 
      } 
      output = output + 
      _keyStr.charAt(enc1) + _keyStr.charAt(enc2) + 
      _keyStr.charAt(enc3) + _keyStr.charAt(enc4); 
    } 
    return output; 
  } 
  // public method for decoding 
  this.decode = function (input) { 
    var output = ""; 
    var chr1, chr2, chr3; 
    var enc1, enc2, enc3, enc4; 
    var i = 0; 
    input = input.replace(/[^A-Za-z0-9\+\/\=]/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 << 2) | (enc2 >> 4); 
      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); 
      chr3 = ((enc3 & 3) << 6) | enc4; 
      output = output + String.fromCharCode(chr1); 
      if (enc3 != 64) { 
        output = output + String.fromCharCode(chr2); 
      } 
      if (enc4 != 64) { 
        output = output + String.fromCharCode(chr3); 
      } 
    } 
    output = _utf8_decode(output); 
    return output; 
  } 
  // private method for UTF-8 encoding 
  _utf8_encode = function (string) { 
    string = string.replace(/\r\n/g,"\n"); 
    var utftext = ""; 
    for (var n = 0; n < string.length; n++) { 
      var c = string.charCodeAt(n); 
      if (c < 128) { 
        utftext += String.fromCharCode(c); 
      } else if((c > 127) && (c < 2048)) { 
        utftext += String.fromCharCode((c >> 6) | 192); 
        utftext += String.fromCharCode((c & 63) | 128); 
      } else { 
        utftext += String.fromCharCode((c >> 12) | 224); 
        utftext += String.fromCharCode(((c >> 6) & 63) | 128); 
        utftext += String.fromCharCode((c & 63) | 128); 
      } 
    } 
    return utftext; 
  } 
  // private method for UTF-8 decoding 
  _utf8_decode = function (utftext) { 
    var string = ""; 
    var i = 0; 
    var c = c1 = c2 = 0; 
    while ( i < utftext.length ) { 
      c = utftext.charCodeAt(i); 
      if (c < 128) { 
        string += String.fromCharCode(c); 
        i++; 
      } else if((c > 191) && (c < 224)) { 
        c2 = utftext.charCodeAt(i+1); 
        string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); 
        i += 2; 
      } else { 
        c2 = utftext.charCodeAt(i+1); 
        c3 = utftext.charCodeAt(i+2); 
        string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); 
        i += 3; 
      } 
    } 
    return string; 
  } 
}

const base64 = new Base64()
console.log(base64.encode('1ab'));
console.log(base64.decode('MWE='));

二进制3*8位转4*6参考下图:

  • 1.先来看看encode实现原理,首先是获取ascii码值,第一个字节001100是1在ascii码中是49,二进制是110001,此时在前面新增00得到00110001,第一个字节是110001右移两位得到001100。
  • 2.我们看看第二个码010110,它是由第一个字节110001的后两位(&3)和第二个字节1100001的前四位(>>4)共同构成。
  • 3.第三个码000101,它是由第二个字节1100001后四位(&15)和第三个字节的前两位(>>6)。
  • 4.第四个码100010,它是由第三个字节1100010的后六位(&63)构成。

解码的操作跟这个刚好相反,大家可以试试。

1ab
110001 1100001 1100010	49 97 98
00110001 01100001 01100010(补成8位,划分成6位,高位补2个0)
001100 010110 000101 100010 (开始划分成4个,不够补0)

12 22 5 34
MWFi

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: js中关于base64编码的问题

本文链接: https://www.lsjlt.com/news/195097.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • js中关于base64编码的问题
    目录关于base64编码的问题1. 使用 Buffer对象2. 使用base64js.js3. js中类似java中byte强转int类型手把手教你js实现base64编码规则总结关...
    99+
    2023-02-08
    js中base64编码 js base64编码 base64编码问题
  • 关于base64编码和解码的js工具函数
    目录base64编码和解码的js工具函数前端实现base64解码编码方法一:btoa 和 atob方法二:下包方法三:js实现总结base64编码和解码的js工具函数 上代码 // ...
    99+
    2023-02-08
    关于base64编码 关于base64解码 js工具函数
  • JAVA关于Unicode编码问题
    在Java中,Unicode编码是用来表示字符的标准编码方式。Java中的字符类型char是基于Unicode编码的,它使用16位(...
    99+
    2023-08-19
    Java
  • 关于Java中properties文件编码问题
    目录Java properties文件编码问题问题一:Transparent native-to-ascii conversion是什么Java中属性文件(*.properties)...
    99+
    2022-11-12
  • 关于idea中ssm框架的编码问题分析
    idea中ssm框架的编码问题 介绍 在idea中编码问题分为几个部分: 1 tomcat服务器编码 2 页面编码 3 控制台编码 4 操作系统编码 在实际开发中需要将操作系统编码、...
    99+
    2022-11-12
  • 关于Android Studio 在XML中编码无代码提示的问题
    记录一下终于受不了在activity_main.xml中敲代码没有提示,全手敲到网上找解决办法,到终于顺利解决的过程!   有提示可太爽啦 ~~ 解决方法: 我的Android Studio开始不懂装了好些版本的Sdk,然后全部卸载...
    99+
    2023-10-05
    android studio xml android
  • 关于mysql数据库连接编码问题
    前几天使用springboot做一个数据库查询功能,发现使用中文就无法查到数据,经过测试SQL语句是没有问题的,但是就是查询不到数据,一直显示为null。 后来,我灵机一动尝试了一下查询参数改为英文,显示出查询结果是正常...
    99+
    2023-04-14
    mysql数据库 mysql编码
  • 如何解决PHP base64编码后解码乱码的问题
    如何解决PHP base64编码后解码乱码的问题 PHP base64编码后解码乱码的解决办法:用GET形式传递时,防止【+】号被替换成空格即可,代码为【$str = base64_decode(str_replace(" ","...
    99+
    2023-09-06
    servlet java html
  • 关于Python的文本文件转换编码问题
    目录前言 测试数据编码转换代码执行结果说明前言  因为编程的原因,经成会遇到字符编码的问题。如开发工具使用的是UTF-8编码(推荐使用),然后需要导入一个从其它地...
    99+
    2023-05-16
    Python文本文件 文件转换编码
  • 关于JS中的全等和不全等、等于和不等于问题
    目录全等和不全等全等不全等相等和不相等相等不相等全等和不全等 全等和不全等比较的是符号两侧的操作数,以全等操作符为例,如果操作数满足全等则返回true,否则返回false。全等和不全...
    99+
    2022-11-12
  • 关于JS中的作用域中的问题思考分享
    目录作用域全局作用域作用域中的错误局部作用域with弊端数据泄露性能下降letconst作用域链闭包闭包对作用域链的影响匿名函数的赋值使用let作用域 作用域,也就是我们常说的词法作...
    99+
    2022-11-13
  • 解读Base64编码中为什么会有等号(=)问题
    目录Base64编码中为什么会有等号(=)64个字符如下表所示顺便附上golang示例代码总结Base64编码中为什么会有等号(=) 如果对字符串"ab"进行Ba...
    99+
    2023-03-06
    Base64编码 Base64编码等号 Base64编码=
  • 关于dns密码的问题分析
    关于dns密码的问题分析,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。小弟一直以来都在寻找关于DNS配置,无奈很多资料都是过时的,特别关于KEY和RNDC的部分...
    99+
    2023-06-13
  • Python中,关于读取文件编码解码的问
    UnicodeDecodeError: 'gbk' codec can't decode byte 0xb1 in position 94: illegal multibyte sequence 有时候用o...
    99+
    2023-01-31
    文件 Python
  • 关于java中出现问号乱码问题的总结
    在基于Java的编程中,经常会碰到汉字的处里及显示的问题,比如一大堆乱码或问号。这是因为JAVA中默认的编码方式是UNICODE,而中国人通常使用的文件和DB都是基于GB2312或者BIG5等编码,故会出现此问题。下面是关于此类问题的总结。...
    99+
    2015-10-17
    java入门 java 问号 乱码 总结
  • 如何解决ie6下关于html编码问题导致js出错css不被应用
    本篇内容主要讲解“如何解决ie6下关于html编码问题导致js出错css不被应用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何解决ie6下关于html编码问题导致js出错css不被应用”吧!...
    99+
    2023-06-08
  • 关于C#中GUI编程的标准事件问题
    前言 昨天的文章,带大家简单学习C#中的事件,了解订阅者和发布者之间的逻辑关联,也通过小案例进行实际操作,可以看到具体的输出结果。 目前在工作中,使用Winform桌面开发比较多,很...
    99+
    2022-11-13
  • 关于logBack配置日志文件及编码配置的问题
    记录下使用logback中遇到的问题,方便以后查看 logback输出到文件文件大小设置问题 目前网上能搜到的关于输出到日志文件的大小设置有如下两种: 1.单独的triggering...
    99+
    2022-11-12
  • 关于androidstuio导入系统源码的问题
    最近公司需要做一些将系统源码导出来,然后加入一些功能,在导入androidstudio过程中遇到过一些问题,这里记录下,方便以后需要。 一般导入成功的都是系统比较相对独立的app,比...
    99+
    2022-11-12
  • 关于python中第三方库交叉编译的问题
    目录一、前言:二、交叉编译介绍:三、python及其第三方库的交叉编译背景四、交叉编译的准备工作五、交叉编译python及其第三方的思路六、准备交叉编译工具七、准备openssl-b...
    99+
    2022-11-11
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作