目录 什么是 Base64 图片的 Base64 编码 图片转 Base64 的代码 Base64 图片编码并不完美 总结 什么是 Base64 Base64 是网络中存储和传输的二进制数据的普遍用法。Base64 一个字节只能表示 64 种情
目录
- 什么是 Base64
- 图片的 Base64 编码
- 图片转 Base64 的代码
- Base64 图片编码并不完美
- 总结
什么是 Base64
Base64 是网络中存储和传输的二进制数据的普遍用法。Base64 一个字节只能表示 64 种情况，且编码格式每个字节的前两位都只能是 0，使用剩下的 6 位表示内容。
Base64 最早是应用在邮件传输协议中的。当时邮件传输协议只支持 ASCII 字符传递，使用 ASCII 码来表示所有的英文字符。但是如果要在文件中传输图片、视频等资源的话，这些资源转成 ASCII 的时候会出现非英文数字的情况。而且邮件中还存在很多控制字符，这些控制字符又会成为不可见字符。而且，非英文字符和控制字符在传输过程中很容易产生错误，影响邮件的正确传输。为此才有了诞生了一个新的编码规则：
把二进制以 3 个字节为一组，再把每组的 3 个字节（24 位）转换成 4 个 6 位，每 6 位根据查表对应一个 ASCII 符号。
图片的 Base64 编码
我们都知道图片在网页中的使用方法通常是使用 img 标签的形式，而 img 标签的 src 属性会指定一个远程服务器上的资源。在网页加载到浏览器中时，浏览器会针对每个外部资源都向服务器发送一次拉取资源请求。但是这是非常占用网络资源的。 而我们经常所说的 Base64 存储展示，则是使用了Data URL 技术。
我们选择 Data URL 技术优势在于：
- 减少 HTTP 请求；
- 避免跨域问题；
- 可像单独图片一样使用，也可以结合CSS Sprites（雪碧图）使用
Data URL:
Data URLs，即前缀为
data:协议的 URL，其允许内容创建者向文档中嵌入小文件。Data URLs 由四个部分组成：前缀 (
data:)、指示数据类型的 MIME 类型、如果非文本则为可选的base64标记、数据本身：data:[<mediatype>][;base64],<data>
图片转 Base64 的代码
由前端程序员来将图片转为 Base64 编码的场景还是非常多的，而且网上搜索的方法好多都没法用