JavaScript中关于base64的一些事

作者:zWing 时间:2024-05-02 16:20:25 

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的一些事,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对asp之家网站的支持!

来源:https://juejin.im/post/5ccf01d5e51d453a363848d6

标签:js,base64
0
投稿

猜你喜欢

  • WEB开发之注册页面验证码倒计时代码的实现

    2024-04-22 22:32:31
  • 加速 PyTorch 模型训练的 9 个技巧(收藏)

    2023-12-17 10:35:58
  • 将Pytorch模型从CPU转换成GPU的实现方法

    2023-07-07 00:11:00
  • 详解PHP结构型设计模式之桥接模式Bridge Pattern

    2023-05-25 06:58:55
  • Python实现多线程爬表情包详解

    2022-05-26 01:30:55
  • python数据XPath使用案例详解

    2023-07-28 15:24:24
  • mysql和oracle默认排序的方法 - 不指定order by

    2024-01-27 17:44:28
  • Pytorch模型微调fine-tune详解

    2021-06-17 07:29:00
  • 安装MySQL 5后无法启动(不能Start service)解决方法小结

    2024-01-23 07:29:29
  • python中string模块各属性以及函数的用法介绍

    2023-12-07 13:49:47
  • JavaScript设计模式之模板方法模式原理与用法示例

    2024-02-24 02:17:20
  • Python编程中的文件操作攻略

    2022-12-08 10:49:54
  • 如何将python文件打包成exe可运行文件

    2022-06-29 19:01:17
  • Python中Pyspider爬虫框架的基本使用详解

    2021-04-01 06:00:31
  • 基于微信小程序实现透明背景人像分割功能

    2024-06-05 09:34:50
  • vscode安装使用的详细教程

    2022-06-10 01:15:24
  • python--shutil移动文件到另一个路径的操作

    2022-05-15 05:43:25
  • python列表与列表算法详解

    2022-09-20 20:36:51
  • Go简单实现协程方法

    2024-02-06 05:00:12
  • css把超出的部分显示为省略号的方法兼容火狐

    2010-10-07 09:02:44
  • asp之家 网络编程 m.aspxhome.com