js原生实现base64编码解码(utf8字符集)

详细参考本篇博文https://blog.csdn.net/qq_25243451/article/details/88658864

后台传来经过 base64 编码的字符串(原始字符串含有中文), 需要在前端进行解码, 但 js 中的 atob 解码方法不支持 unicode 字符集( btoa 也是), 换言之, 中文被解码出来是会乱码的。

网上流传的多是使用encodeURIComponent 和 decodeURIComponent,原理是对中文进行百分号编码,转换为%xxx这种样式,但是这样使用之后会使编码变长,如下

图1(期望的编码值)

图2(使用百分号编码之后)

同样的元字符,使用encodeURIComponent之后字符更长,原因是没有对百分号编码的字符的进行编码,导致编码后的字符串变长

因此在这里调用escape和unescape方法:

const Base64 = {
  encode: (str) => {
    return window.btoa(unescape(encodeURIComponent(str)))
  },
  decode: (str) => {
    return decodeURIComponent(escape(window.atob(str)))
  }
}

具体的详解可以参考开头提到的那篇博文

原文地址:https://www.cnblogs.com/sue7/p/11428429.html

时间: 2024-11-07 23:52:54

js原生实现base64编码解码(utf8字符集)的相关文章

[C语言]Base64编码解码

Base64编码解码 一,Base64编码原理 Base64编码的字符数组如下所示 : ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/ 字符串转Base64编码:取3字节的字符串转换为四字节的字符串,依次往后转换.得到Base64编码字符串.具体原理如下: 1,如果需要编码的原串字节数刚好为3的倍数,那么转换规则如下: 以中文字符'严'为例,'严'字的UTF-8编码为:0xE4B8A5 = 11100100  10

Atitit. 二进制数据ascii表示法,与base64编码解码api 设计标准化总结java php c#.net

Atitit. 二进制数据ascii表示法,与base64编码解码api 设计标准化总结java php c#.net 1. Base64编码,1 1.1. 子模式 urlsafe Or  url unsafe2 1.2. 其他的二进制数据表示法  bin2hex() ,Quoted-printable ,UUencode2 2. Base64常用api2 2.1. ------------解码api2 2.2. decode(String s, OutputStream out)2 2.3. 

Base64编码解码算法

Base64不是什么新奇的算法了,不过如果你没从事过页面开发(或者说动态页面开发,尤其是邮箱服务),你都不怎么了解过,只是听起来很熟悉. 对于黑客来说,Base64与MD5算法有着同样的位置,因为电子邮箱(e-mail)正文就是base64编码的. 那么,我们就一起来深入的探讨一下这个东东吧. 对于一种算法,与其问"它是什么?",不如问"它实现了什么?" Base64实现了:将任意字节转为可读字符的编码. 我们知道,除了页面上的文本,计算机中的数据还有很多是不可见的

OpenSSL 使用 base64 编码/解码(liang19890820)

关于 OpenSSL 的介绍及安装请参见:Windows 下编译 OpenSSL 下面主要介绍有关 OpenSSL 使用 base64 编码/解码. 简述 编码解码 更多参考 编码/解码 #include <openssl/evp.h> #include <openssl/bio.h> #include <openssl/buffer.h> #include <string> #include <iostream> using namespace

java对文件的二进制流base64编码解码

1.java对文件的二进制流base64编码解码 一般保存文件的时候选择的方式是将url存进数据库.今天遇到一个对接传文件流的二进制base64编码,简单记录一下. 依赖于commons-io包和commons-codec包. 编码的方法如下: public static String encodeFile(File file) throws IOException { byte[] readFileToByteArray = FileUtils.readFileToByteArray(file

前端对base64编码的理解,原生js实现字符base64编码

目录 常见对base64的认知(不完全正确) 多问一个为什么,base64到底是个啥? 按照我们的思路实现一下 到这里基本就实现了,结果跟原生的方法打印的是一样的 下一次 @( 对于前端工程师来说base64图片编码到底是个什么玩意?) **** ---- 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有以下几点* base64是一种图片编码方式,用一长串超长的字符串表示图片 在加载的时候会直接以字符串的形式加载出来,减少了图片加载的http请求 正常加载服

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

代码如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl

Base64编码解码原理

一.编码规则 Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编码.它将需要编码的数据拆分成字节 数组.以3个字节为一组.按顺序排列24 位数据,再把这24位数据分成4组,即每组6位.再在每组的的最高位前 补两个0凑足一个字节.这样就把一个3字节为一组的数据重新编码成了4个字节.当所要编码的数据的字节数不是 3的整倍数,也就是说在分组时最后一组不够3个字节.这时在最后一组填充1到2个0字节.并在最后编码完成后在 结尾添加1到2个 "=". 例:将对ABC进行BA

BASE64 编码解码

/// <summary> /// Base64编码 /// </summary> /// <param name="data"></param> /// <returns></returns> public string base64Encode(string data) { try { byte[] encData_byte = new byte[data.Length]; encData_byte = Sys