JS 的二进制家族三

Base64：

Base64 是一种数据编码方式，基于 64 个可打印字符来表示二进制数据，将二进制数据转换为可打印的 ASCII 字符串。所谓 Base64，就是说选出 64 个字符作为一个基本字符集，然后，其他所有符号都转换成这个字符集中的字符。

64 个字符包括小写字母 a-z、大写字母 A-Z、数字 0-9、符号"+“、”/“，再加上作为垫字的”="，实际上是65个字符。

编解码方法：

1. btoa()：编码，将 url 编码为 Base64 格式。
2. atob()：解码：将 Base64 格式解码为 url。

let url = "http://webxiaoma.com/assets/images/manong.jpg"

let btoaStr = btoa(url) // aHR0cDovL3dlYnhpYW9tYS5jb20vYXNzZXRzL2ltYWdlcy9tYW5vbmcuanBn
let atobStr = atob(btoaStr) // http://webxiaoma.com/assets/images/manong.jpg

如果将中文编码 Base64 格式后，再进行解码会导致乱码，甚至在谷歌浏览器上会直接报错。这是由于 btoa() 仅支持 ASCII 字符序列，可以通过 encodeURIComponent 将中文字符编码成 ASCII 字符序列，再通过 btoa 进行 Base64 编码。

let url = "你好"

let btoaStr = encodeURIComponent(btoa(url)) // 编码: JUU0JUJEJUEwJUU1JUE1JUJE
let atobStr = decodeURIComponent(atob(btoaStr)) // 解码: 你好

文件格式：

图片：

有损压缩：压缩比高，图像质量会相应的下降。
无损压缩：压缩比低，不会影响文件内容。

1. .jpeg格式：image/jpeg。

   有损压缩，会降低图像质量，但尺寸会小一些；不支持透明，图片透明的地方会被填白，也就是说如果源文件里有透明区域，导出的图片相应位置自动转变成白色导出。
   适用于色彩丰富、渐变色且不需要透明图片的场景。

2. .png格式： image/png。

   无损压缩，不会降低图像质量，但尺寸会大一些；支持透明，图片透明部分会被保留下来，也就是说如果源文件里有透明区域，导出的图片相应位置就是透明的。
   适用于大部分需要透明图片的场景。

3. .gif格式： image/gif。

   支持动画。

4. webp 格式：：image/webp、

   支持有损压缩、无损压缩、透明和动画。
   与 jpg、png 相比，相同的视觉体验下，图像更小。理论上完全可以代替 jpg、png、gif 等图片格式，但是存在一定的兼容性问题，条件允许的情况下更推荐使用这种格式。

5. .svg格式：image/svg。

   矢量图片。

图片的分辨率与大小：

1. 图片的分辨率：是由其水平和垂直方向上的像素数决定的，分辨率越高图片越清晰。例如，一个分辨率为 1920x1080 的图片表示它在水平方向上有 1920 个像素，在垂直方向上有 1080 个像素。
2. 图片的大小：是指图片在存储设备上所占用的字节数。这个大小与图片的分辨率、颜色深度、压缩算法等因素有关。

   1KB = 1024B，一千字节等于 1024 字节。
   1MB = 1024KB，一兆等于 1024 千字节。

音频：

1. .mp3格式：audio/mpeg

视频：

1. .mp4格式：video/mp4
2. .m3u8格式：application/x-mpegURL
3. .mov格式：video/x-ms-wmv
4. .avi格式：video/x-msvideo
5. .flv格式：video/x-flv
6. .wmv格式：video/x-ms-wmv

文本：

1. .xls格式：application/vnd.ms-excel
2. .xlsx格式：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
3. .doc格式：application/msword
4. .docx格式：application/vnd.openxmlformats-officedocument.wordprocessingml.document
5. .txt格式：text/plain
6. .pdf格式：application/pdf
7. .ppt格式：application/vnd.ms-powerpoint
8. .zip格式：application/zip
9. .rar格式：application/x-rarJS 的二进制家族 二