Base64 编码字符串

最新推荐文章于 2024-05-04 15:09:43 发布

阿绵

最新推荐文章于 2024-05-04 15:09:43 发布

阅读量287

点赞数

文章标签：前端安全

本文链接：https://blog.csdn.net/qq_40949254/article/details/133631953

版权

定义

Base64 是基于64个可打印字符来表示二进制数据的编解码方式，由于 Base64 仅可对 ASCII 字符进行编码，如果是中文字符等非ASCII码，就需要先将中文字符转换为ASCII字符后，再进行编码才行

主要的作用不在于安全性，而在于让内容能在各个网关间无错的传输

Base64是一种索引编码，每个字符都对应一个索引，64个可打印字符包括大写字母A-Z、小写字母a-z、数字0-9共62个字符，再加上另外2个 + 和 /

由于64等于2的6次方，所以一个Base64字符实际上代表着6个二进制位(bit)，二进制数据1个字节(byte)对应的是8比特(bit)，因此，3字节（3 x 8 = 24比特）的字符串/二进制数据正好可以转换成4个Base64字符(4 x 6 = 24比特)

具体的编码方式：

上图中的字符串 'you'，经过转换后，得到的编码为： 'eW91'

当3个字符进行Base64转换编码后，最后变成了4个字符。因为每个6比特位，都补了2个0，变成8比特位，对应1字节

正常情况下，Base64编码的数据体积通常比原数据的体积大三分之一

当长度不是 3 的倍数时，实际都会在后面补0，直到有24个二进制位为止

图片处理，基于 DataURL 方式，可以减少请求数
- Data URL 由 data:前缀、MIME类型（表明数据类型）、base64标志位（如果是文本，则可选）以及 数据本身 四部分组成。具体的格式：data:[<mime type>][;base64],<data>。这里的第四部分 <data> 数据本身，就是一个Base64字符串
- ```
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c......Ii8+PC9nPjwvc3ZnPg==">

.icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c......Ii8+PC9nPjwvc3ZnPg==);
}
```
文件读取
- FileReader 的API，用来读取文件的数据，可以通过它的 readAsDataURL() 方法，将文件数据读取为Base64编码的字符串数据
- ```
let reader = new FileReader()
reader.onload = () => {
  let base64Img = reader.result
};
reader.readAsDataURL(file)
```
Canvas 生成图片
- Canvas本质上是一个位图图像，它有提供 toDataURL() 方法，将画布导出生成为一张图片，该图片将以Base64编码的格式进行保存
- ```
const dataUrl = canvasEl.toDataURL()
```
其它
- 特殊数据传输、简单编码和加密、代码混淆

关注