Base64编码
Base64是一种十分流行的编码方式,仅仅使用 64 个字符加等号(=) 就可以以文本的形式表示所有的二进制数据了,因为它能够把二进制格式通过编码转换成可见字符,所有我们就可以通过的把二进制格式比如图片,文件等通过 base64编码然后通过文本的形式共享出去,是不是很神奇呀。不知道什么是base64编码吗?简单地说它把一些 8-bit 数据翻译成标准 ASCII 字符,往上有很多免费的 base64 编码和解码的工具,你也可以用 PHP 的 base64_encode() 进行编码:
echo base64_encode(file_get_contents('check.png'));
编码流程
- 把输入的数据转换成 二进制的形式
- 每 3 个 8bit 为一组拆分为 4 个 6bit 8*3=6*4=24
- 拆分后的 6bit 的高位补两个 0 组成新的 8bit
- 把新的 8bit 转化为 10进制,然后查表得到最终的字符串
- 如果最后不够 3 个 8bit,分两种情况
- 有 2 个 8bit 差 1 个 8bit,由于 8*2=6+6+4=16,可以拆出来 2 个 6bit 和 一个不完整的 4bit,base64 编码规定给不足 6bit 的差几个 bit 补几个0,4bit 低位补 2 个0,组成了 6bit,由于一共需要 4个 6bit,前面一共产生了 3 个,还差 1 个,base64 编码规定 差几个 6bit 补几个 '=',这里差一个,所以在最后补一个 =,这也是为什么有时候能看到 base64 最后以等号结束
- 有 1 个 8bit 差 2 个 8bit,由于 8=6+2,可以拆出来 1 个 6bit 和一个不完整的 2bit,先给 2bit 低位补 4 个 0 组成 6bit,然后还差 2 个 6bit 组成 4 个 6bit,因此在最后添两个 =
编码表
base64的编码表如下:
![base64编码表](https://img-blog.csdnimg.cn/20200709232638322.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NvZGluZ1l1YW4=,size_16,color_FFFFFF,t_70)
下面来举例说明:
有一个字符串”abcd”
a b c d
ASCII: 0x61 0x62 0x63 0x64
8bit: 01100001 01100010 01100011 0110 0100
6bit: 011000 010110 001001 100011 011001 000000 = =
十进制: 24 22 9 35 25 0
查码表得: Y W J j Z A = =
最终结果:YWJjZA==
看这个动画演示吧:
![bae64编码过程](https://img-blog.csdnimg.cn/20200709232743312.gif)
什么是data URI scheme
网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数,例如通过合并多个JS文件,合并CSS样式文件。除此之外,还有一个data URL 的密技,让我们直接把图像的内容崁入网页里面,这个密技的官方名称是data URI scheme 。
data URI scheme如何使用?
假设你有以下的图像:
A
把它在网页上显示出来的标准方法是:
<img src="http://www.cnccpa.cn/images/A.png"/>
这 种取得资料的方法称为 http URI scheme ,同样的效果使用data URI scheme 可以写成:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA 7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />
换句话说我们把图像档案的内容内置在 HTML 档案中,节省了一个 HTTP 请求。
Data URI scheme 的语法
我们来分析一下这句 img 标签的语法:
<img src="data:image/png;base64,iVBOR....>
它包含一下部分:
- data - 取得数据的协定名称
- image/png - 数据类型名称
- base64 - 数据的编码方法
- iVBOR.... - 编码后的数据
: , ; - data URI scheme 指定的分隔符号
在 CSS 中使用 data URL
Data URI scheme 也可以在 CSS 中使用,例如:
body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");}
浏览器会缓存这种图像吗?
不会,Data URL 虽然节省 HTTP 请求,但是倘若这个图像要在网页多个地方显示的话,便会加大网页的内容,延长了下载的时间,其中一个解决办法是在一个 CSS class 中加入data URL,在需要显示图像的区块调用这个class,例如:
.logobg {
background: url(data:…)
}
<div class=”navigation logobg”>..
helo, hello
<div class=”footer logobg”>…
又是IE 来搞破坏(浏览器兼容问题)
任何精采的技巧都可能受到 IE 的排挤,这次也有这种情况,IE8之前的版本都不支援 data URI scheme。
解决这个问题的办法有:使用MHTML 解决data URI scheme 的浏览器兼容问题
具体做法看代码(肯定是用css hack来实现)
/*
Content-Type: multipart/related; boundary="_ANY_STRING_WILL_DO_AS_A_SEPARATOR"
--_ANY_STRING_WILL_DO_AS_A_SEPARATOR
Content-Location:the9
Content-Transfer-Encoding:base64
/9j/4AA....+b0//2Q== (这里是base64编码)
*/
#the9{
background-image: url("data:image/png;base64/9j/4AA....+b0//2Q=="); /* normal */
*background-image: url(mhtml:http://www.zhangjingwei.com/demo/scheme/style.css!the9);
width:300px;
height:300px;
color:#F00;
font-weight:900;
}