JavaScript中关于base64的一些事


Posted in Javascript onMay 06, 2019

base64 其实是一种编码转换方式, 将 ASCII 字符转换成普通文本, 是网络上最常见的用于传输8Bit字节代码的编码方式之一。

base64 由字母 a-z 、 A-Z 、 0-9 以及 + 和 / , 再加上作为垫字的 = , 一共65字符组成一个基本字符集, 其他所有字符都可以根据一定规则, 转换成该字符集中的字符。

abcde => YWJjZGU= ABCDE => QUJDREU=

在日常开发中, 最常见的便是将 blob 和 base64 之间相互转换.

// blob to base64
function blobTobase64(blob) {
 const fileReader = new FileReader()
 let base64 = ''
 fileReader.onload = () => {
 base64 = fileReader.result // 读取base64
 }
 fileReader.readAsDataURL(blob) // 读取blob
}
// base64 to blob
function dataURItoBlob(dataURI) {
 var mimeString = dataURI
 .split(',')[0]
 .split(':')[1]
 .split(';')[0] // mime类型
 var byteString = atob(dataURI.split(',')[1]) //base64 解码
 var arrayBuffer = new ArrayBuffer(byteString.length) //创建ArrayBuffer
 var intArray = new Uint8Array(arrayBuffer) //创建视图
 for (var i = 0; i < byteString.length; i++) {
 intArray[i] = byteString.charCodeAt(i)
 }
 return new Blob([intArray], { type: mimeString }) // 转成 blob
}

编码和解码

浏览器

最新的浏览器自带了两个方法用于 base64 的编码和解码

分别是 at

ob 和 btoa

  • atob:将 base64 转成 8bit 字节码
  • btoa:将 8bit 字节码转成 base64

对于旧版浏览器, 可以使用 js-base64

Node

目前 node 中还不支持使用 atob 和 btoa ,但是可以通过 Buffer 来实现,参考文档

if (typeof btoa === 'undefined') {
 global.btoa = function (str) {
 return Buffer.from(str).toString('base64');
 };
}

if (typeof atob === 'undefined') {
 global.atob = function (b64Encoded) {
 return Buffer.frome(b64Encoded, 'base64').toString();
 };
}

转换方式

base64编码方式对于中文是不适用的, 因为中文对应多个字节, 因此可以先使用 encodeURIComponent 编码后再进行 base64 编码.

源码

编码

每三个字节作为一组,每个字节8bit, 一共是24个二进制位。

'ABCD'
["ABC", "D"] // 每三字节做一组
['01000001010000100100001', '01000100'] // 转成8bit

将每组的24个二进制位再细分为四组,每组有6个二进制位, 此时为二维数组。

[['010000', '010100', '001001', '000011'], ['010001', '00']]

  • 二个字节的情况:将这二个字节的一共16个二进制位, 按照上面的规则, 转成三组, 那么最后一项只有4位,则在后面加两个0, 补够6位, 并在第三步对应位置加上垫字符 = 。
  • 一个字节的情况:将这一个字节的8个二进制位,按照上面的规则转成二组, 那么最后一项只有2位, 则在后面加上四个0, 并在第三步对应位置加上两个垫字符 = 。
  • 简单说就是, 缺多少位就在后面补多少个0, 直到满6位。

[['010000', '010100', '001001', '000011'], ['010001', '000000']]

在每组前面加两个00,扩展成32个二进制位,即四个字节。

规则是这么说, 但这一步我觉得可以忽略, 因为 00101010 和 101010 是一样的

将每组对应的二进制转成十进制, 在 base64char 字符集中找到对应的字符。

[["Q", "U", "J", "D"], ["R", "A"]]

每一组都最终都应该转成四个字符

如果不足四个字符, 说明明文中并不足3字节, 因此需要补上垫字符 = , 补够四个字符

[["Q", "U", "J", "D"], ["R", "A", "=", "="]]

将最后的结果连接成字符串, 则为最终编码结果。

'ABCD' > 'QUJDRA=='

根据编码方式来看, 每3个字节将会被编码成四个字符, 如果不足3个字节, 则补上垫字符 = , 缺几个就补几个。

btoa('A') // "QQ=="
btoa('AB') // "QUI="
btoa('ABC') // "QUJD"
btoa('ABCD') // "QUJDRA=="

解码

解码步骤就是跟编码步骤反过来

  1. 每四个字节分为一组。
  2. 将每组的中除了垫字符 = 外的字符, 在 base64char 字符集中找到所在下标。
  3. 将十进制下标转成二进制, 如果不够6位(一定不会超过6位), 则在前面补 0 。
  • 如果遇到垫字符 = , 说明其明文不足3字节, 则根据垫字符 = 的数量, 在该组最后一项中去掉对应个数的 0
  • 一个垫字符, 则去掉两个 0
  • 两个垫字符, 则去掉四个 0
  1. 将每组中的二进制字符串连接,此时字符串长度一定是8的倍数,然后每8位分割成一个字节。
  2. 通过 String.fromCharCode 将二进制转成字符, 然后拼接
  3. 将各个字符连接, 为最终解码结果。

题外-进制转换

  • parseInt(str, radix): 根据radix可以将字符串转成十进制
  • initValue.toString(radix): 将initValue转成其他进制
// n进制转十进制
parseInt('1000', 2) // 8
parseInt('1000', 16) // 4096

// 进制间转换
(10).toString(2) // "1010", 10进制转2进制
(0xff).toString(2) // "11111111", 16进制转2进制

总结

 以上所述是小编给大家介绍的JavaScript中关于base64的一些事,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 1.0.2
Oct 11 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
uniapp开发打包多端应用完整方法指南
Dec 24 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 #Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 #Javascript
一文了解Vue中的nextTick
May 06 #Javascript
angular 服务随记小结
May 06 #Javascript
详解如何使用nvm管理Node.js多版本
May 06 #Javascript
关于AOP在JS中的实现与应用详解
May 06 #Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 #Javascript
You might like
ThinkPHP采用模块和操作分析
2011/04/18 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
Python 字典与字符串的互转实例
2017/01/13 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
找工作最新求职信
2013/12/22 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
软环境建设心得体会
2014/09/09 职场文书
消防隐患整改通知书
2015/04/22 职场文书
致运动员赞词
2015/07/22 职场文书
五年级作文之想象作文
2019/10/30 职场文书
Python实现排序方法常见的四种
2021/07/15 Python
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS