javascript实现base64格式转码与解码
最近碰到一个需求,后端返回base64格式的数据,前端需要进行base64格式解码,好了,前端采用内部提供的atob函数进行解码,开完成,交付测试,然后测试小哥哥小姐姐反馈说中文乱码!
然后查了一下,我后端代码采用utf8编码,这没问题,问题出在前端使用的atob函数,它居然采用的是Latin1(ISO-8859-1)编码!还不能修改编码方式,而且它还只在web端开发有这个atob函数!也不知道写这个atob函数的作者出于什么目的,Latin1(ISO-8859-1)编码用的很广么?竖中指!!!!
没办法,问题要解决,我们本可以找一下第三方的包,但想想,还是觉的自己实现一个转码的函数,留着备用,这里分享出来:
let base64util = function () {
let _keys = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
//base64格式加密
function encode(input) {
if (typeof input != "string") {
input = JSON.stringify(input)
}
//utf8转码,Unicode值转换为字节数组
let buffer = [];
for (var n = 0; n < input.length; n++) {
var c = input.charCodeAt(n);
if (c < 128) { //一个字节
buffer.push(c);
} else if (c < 2048) { //两个字节
buffer.push((c >> 6) | 192, (c & 63) | 128);
} else if (c < 65536) { //三个字节
buffer.push((c >> 12) | 224, ((c >> 6) & 63) | 128, (c & 63) | 128);
} else if (c < 2097152) { //四个字节
buffer.push((c >> 18) | 240, ((c >> 12) & 63) | 128, ((c >> 6) & 63) | 128, (c & 63) | 128);
} else if (c < 67108864) { //五个字节
buffer.push((c >> 24) | 248, ((c >> 18) & 63) | 128, ((c >> 12) & 63) | 128, ((c >> 6) & 63) | 128, (c & 63) | 128);
} else { //六个字节
buffer.push((c >> 30) | 252, ((c >> 24) & 63) | 128, ((c >> 18) & 63) | 128, ((c >> 12) & 63) | 128, ((c >> 6) & 63) | 128, (c & 63) | 128);
}
}
//转码,三字节转换成四字节
let i = 0, padding = buffer.length % 3;
padding && buffer.push(...new Array(padding = 3 - padding).fill(0));//先用0填补
let result = []
while (i < buffer.length) {
let [c1, c2, c3] = [buffer[i++], buffer[i++], buffer[i++]];
result.push(c1 >> 2, ((c1 & 0b11) << 4) | (c2 >> 4), ((c2 & 0b1111) << 2) | (c3 >> 6), c3 & 63);
}
padding && (result.splice(result.length - padding), result.push(...new Array(padding).fill(64)));//把0填补换成=
return result.map(v => _keys.charAt(v)).join("");
}
//base64格式解码
function decode(input) {
if (typeof input != "string") {
throw "invalid argument"
}
//解码,四字节转换成三字节
let buffer = input.split(""), i = 0, padding;
let r = []
while (i < buffer.length) {
let array = buffer.slice(i, i += 4).map(v => _keys.indexOf(v))
if (array.length != 4 || array.some(v => v < 0)) throw "invalid input"
padding = array.filter(v => v == 64).length;//获取填补的=号数量
padding && (array.splice(r.length - padding), array.push(...new Array(padding).fill(0)));//把=填补换成0
let [e1, e2, e3, e4] = array
r.push((e1 << 2) | (e2 >> 4), ((e2 & 15) << 4) | (e3 >> 2), ((e3 & 3) << 6) | e4);
}
padding && r.splice(r.length - padding)//去掉填补
//utf8转码,字节数组转换成Unicode值
i = 0;
buffer = [];
while (i < r.length) {
let c = r[i++]
if (c < 128) //一个字节
buffer.push(c);
else if (c < 224) //两个字节
buffer.push(((c & 31) << 6) | (r[i++] & 63));
else if (c < 240) //三个字节
buffer.push(((c & 15) << 12) | ((r[i++] & 63) << 6) | (r[i++] & 63));
else if (c < 248) //四个字节
buffer.push(((c & 7) << 18) | ((r[i++] & 63) << 12) | ((r[i++] & 63) << 6) | (r[i++] & 63));
else if (c < 252) //五个字节
buffer.push(((c & 3) << 24) | ((r[i++] & 63) << 18) | ((r[i++] & 63) << 12) | ((r[i++] & 63) << 6) | (r[i++] & 63));
else //六个字节
buffer.push(((c & 1) << 30) | ((r[i++] & 63) << 25) | ((r[i++] & 63) << 18) | ((r[i++] & 63) << 12) | ((r[i++] & 63) << 6) | (r[i++] & 63));
}
return buffer.map(v => String.fromCharCode(v)).join("");
}
return { encode, decode };
}()
使用:
//转码
base64util.encode("say:上山打老虎")
//解码
base64util.decode("c2F5OuS4iuWxseaJk+iAgeiZjg==")
结果:

javascript实现base64格式转码与解码的更多相关文章
- 把vux中的@font-face为base64格式的字体信息解码成可用的字体文件
在最近移动端项目中用到了vux,感觉用着还习惯,当把vux使用到PC端的时候出现了IE浏览器出现,这样的错误信息: CSS3114: @font-face 未能完成 OpenType 嵌入权限检查.权 ...
- javascript中base64和Gzip的使用
一般的使用流程(4步): 服务器端将字符串Gzip压缩为 字节数组——>通过base64转为字符串(后传递到客户端)——>解码base64字符串为字节数组——>Gzip解码字节数组为 ...
- javascript 使用btoa和atob来进行Base64转码和解码
javascript原生的api本来就支持,Base64,但是由于之前的javascript局限性,导致Base64基本中看不中用.当前html5标准正式化之际,Base64将有较大的转型空间,对于H ...
- JavaScript对HTML字符转义与反转义(转码和解码)
HTML的Encode(转码)和解码(Decode)在平时的开发中也是经常要处理的,在这里总结了使用javascript处理HTML的Encode(转码)和解码(Decode)的常用方式 一.用浏览器 ...
- Javascript中Base64编码解码的使用实例
Javascript为我们提供了一个简单的方法来实现字符串的Base64编码和解码,分别是window.btoa()函数和window.atob()函数. 1 var encodedStr = win ...
- javascript处理HTML的Encode(转码)和解码(Decode)
HTML的Encode(转码)和解码(Decode)在平时的开发中也是经常要处理的,在这里总结了使用javascript处理HTML的Encode(转码)和解码(Decode)的常用方式 一.用浏览器 ...
- base64格式的图片数据如何转成图片
base64格式的图片数据如何转成图片 一.总结 一句话总结:不仅要去掉前面的格式串,还需要base64_decode()解码才行. // $base_img是获取到前端传递的值 $base_img ...
- 图片64base转码与解码
场景一:图片转码成base64,传输,接收后解码成png等格式图片 import base64 # 读取图片,转换为base64编码格式 with open("F:\Archer\pictu ...
- html5 图片转为base64格式异步上传
因为有这个需求(移动端),所以就研究了一下,发现还挺不错的.这个主要是用了html5的API,不需要其他的JS插件,不过只有支持html5的浏览器才行,就现在而言应该大部份都支持的.<!DOCT ...
随机推荐
- SpringMVC详细实例
一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 1 2 3 4 5 6 ...
- spring 事务处理中,同一个类中:A方法(无事务)调B方法(有事务),事务不生效问题
public class MyEntry implements IBaseService{ public String A(String jsonStr) throws Exception{ User ...
- 【Linux】【Basis】文件
refer to: https://en.wikipedia.org/wiki/POSIX refer to: https://en.wikipedia.org/wiki/Unix_file_type ...
- Springboot,SSM及SSH的概念、优点、区别及缺点
Springboot的概念: 是提供的全新框架,使用来简化Spring的初始搭建和开发过程,使用了特定的方式来进行配置,让开发人员不在需要定义样板化的配置.此框架不需要配置xml,依赖于像MAVEN这 ...
- 【JAVA今法修真】 第二章 一气化三清 线程分心念
这是我的微信公众号,希望有兴趣的朋友能够一起交流,也希望能够多多支持新人作者,你的每一份关注都是我写文章的动力:南橘ryc 天有八纪,地分九州,万法仙门与天道剑宗一并坐落在东北方通辽州. 与李小庚想象 ...
- 关于Too many levels of symbolic links和 /usr/bin/env: node: 没有那个文件或目录
由于node装了两遍在运行bower install的时候就会报错Too many levels of symbolic links要卸载其中一个nodejs,卸载的方法: 1. 卸载node npm ...
- HGAME pwn ROP_LEVEL2
花了好多天,终于把这个题彻底弄懂了...自己太菜了 下载文件,首先checksec检查一下保护. 只开启了堆栈不可执行,接下来拖到IDA看一下C的伪代码. 大致先让你输入,然后再次让你输入. 第 ...
- 【python】青果教务系统模拟登陆
使用 python 的 selenium + chrome 来模拟登陆学校教务系统 完整代码传至 github,增加了一个自动识别验证码的功能,不过是用的别人的轮子,识别度也不高 这是需要手动输入验证 ...
- 月薪过2w的IT程序员都是怎么做到的?
先说结论:要月入过2万,不能仅仅靠技术,更要找个肯给到这份工资的平台.也就是说,尽量去大城市,尽量去大公司. 我在上海,先说下我知道的薪资情况,基本上,只要有3年开发经验,能过大厂或外企的面试, ...
- JVM 常见面试题指南
基础 1. JDK.JRE.JVM的关系是什么? 什么是 JVM? 英文名称 (Java Virtual Machine ),就是JAVA 虛拟机,它只识别 .class 类型文件,它 能够将 cla ...