Base64码简介

栏目: CSS · 发布时间: 6年前

内容简介:base64是一个保存二进制数据的工具,将多种形式的二进制数据或其构成的文件以ASCII的形式保存,因为很多地方不支持直接的二进制文件保存或呈现,比如可以将图片直接转换成base64码嵌入HTML文档中,而避免使用网络http加载图片;假设一个 .png 图片转换得到的base64码为

简介

base64是一个保存二进制数据的工具,将多种形式的二进制数据或其构成的文件以ASCII的形式保存,因为很多地方不支持直接的二进制文件保存或呈现,比如可以将图片直接转换成base64码嵌入HTML文档中,而避免使用网络http加载图片;

组成

A-Z a-z 0-9 + / 共64个字符(不信自己数一下);

转换

  1. 如果是图片直接转换成二进制文件,字符先转换成ASCII字符码,再转换成二进制;网上直接搜“base64转换工具”就会出来很多在线转换网站,上传图片或者输入文本,一键转换;

  2. 将上面的64个字符按上面顺序排列得到64个索引,索引从 0 开始, 63 结束;

  3. 因为 64 = 2^6,所以要使二进制包含64种不同情况,需要取6比特位,即 000000 这种,把之前文件转换得到的二进制数据按每 6比特位 取一次,然后得到一个6位二进制数再转换成相应十进制数,这个数就是索引,然后按照索引取相应的64字符中的某一个,最后把所有取得的字符连接就是base64码;

  4. 编码需要原文本总字节数(字符数)能 被3整除 (字节数除以3无余数),因此取到最后的字符时如果凑不够,缺位全部用 0 补齐,最后的只要是 全为0的6比特位 ,全部转换成字符 = ,所以最多会出现 2个 =

使用

假设一个 .png 图片转换得到的base64码为 abcdefg ,标准格式为:

data:image/png;base64,abcdefg

在浏览器地址栏输入以上字符串回车就能看见图片了,一般浏览器都支持解析base64码(里面的base64码换成自己的);

或者用在html的 img 标签中:

<img alt="" src="data:image/png;base64,abcdefg" />

再或者用在markdown格式文本中:

![base64](data:image/png;base53,abcdefg)

可以把 data: 看成像 http: 一样的一种协议,下面是其他格式,根据格式应该就能猜到其用途:

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

效果

例如下面的星星图标:

其实它的base64码是这样的:

iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAA
 AA2UlEQVR4AZWSAQZCQRCGv05QgXpQqCggukAgQeSpEwRE
 oO4Qqg5RoYA6T6GqIIACvKqMMdZK9C1r5t+dmbE7/E+SKj
 26nz3BV9IseTlrSQqPHGc9jIjUOlPAIeBiGdZszD4SYCyc
 MjXqjjdHifM0cUuMGAfzn8QRQnGGdAgpAlAipMNQgtsIfY
 nZkcUly070PsJAU18pg1LmquoAoWUdjEAZm9byG28AFSpA
 028cZioFTHkQMSGjysx/zBsnK3Li/tkvpHDI2wVb7MnjEb
 D6+cFGQkalZ6PyD2/u1Ikpara+FgAAAABJRU5ErkJggg==

为了显示方便所以进行了换行,理论上是很长的 一行 连续文本,中间不能有空格或者换行,这个图片仅有274字节(Byte)大,所以base64码还算短,几十上百K的图片就很长了, 100K 图片就有 13万 多个字符;

如果是文本的话,例如:

Hello World

以字符串 Hello 举例,后面类推,先将每个字符转换成ASCII码,再转换成二进制: | 字符 | H | e | l | l | o | 空格 | |:——–:|:——:|:——:|:——:|:——:|:——:|:——:| | ASCII | 72 | 101 | 108 | 108 | 111 | 32 | | 二进制 |01001000|01100101|01101100|01101100|01101111|01000000|

以字符串 Hel 为例,将二进制转化成base64码:

字符 H e l
二进制 0 1 0 0 1 0 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0
Base64补0 0 1 0 0 1 0 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0
Base64结果 S G V s

上面是不用补码的情况,即字符总数是3的倍数;下面是最后剩两个字符需要补码的情况:

字符 H e
二进制 0 1 0 0 1 0 0 0 0 1 1 0 0 1 0 1
Base64补0 0 1 0 0 1 0 0 0 0 1 1 0 0 1 0 1 0 0 0 0 0 0 0 0
Base64结果 S G T =

然后是最后只剩一个字符的例子:

字符 H
二进制 0 1 0 0 1 0 0 0
Base64补0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Base64结果 S A = =

值得注意的是base64码 A 的二进制也是 000000 ,上面例子中 A 的二进制码是部分补全后全为0,只有6个0全是补全的时候才都转换为字符 =


以上所述就是小编给大家介绍的《Base64码简介》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Text Processing in Python

Text Processing in Python

David Mertz / Addison-Wesley Professional / 2003-6-12 / USD 54.99

Text Processing in Python describes techniques for manipulation of text using the Python programming language. At the broadest level, text processing is simply taking textual information and doing som......一起来看看 《Text Processing in Python》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

MD5 加密
MD5 加密

MD5 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具