js手札--图片的Base64编码

1、Base64编码

在聊图片编码以前，先来讲说Base64编码，其实这一块已经有不少例子了。

Base64编码么，其实就是一个招待好6爷，伺候好8爷的过程

Base64是把字符串转为二进制，而后末尾补零，使总长度能除尽24

24这个太上皇怎么来的：是6爷与8爷的公倍数

6爷怎么来的: Base64是一个对照表，有64个符号，大小写字母，数字，加号，斜杠（/）。特殊字符（=）除外能够用6个二进制位来表示这个64个字符

8爷怎么来的：一个字符8位(ASCII码对应二进制)

1.Base64是由于有64个字符来作对照，因此，能够用6个二进制位数来表示（编码事后的字符）：如：

『000000』表明A，『111111』表明/

2.因此嘛，咱们须要作的就是把要编码的字符（一个字符8位，对照ASCII）6等分，这样好用Base64来表示，如：

A => 『01000001』=>（6等分）  『010000』『01』

3.但你也看到了，最后的不足6位啊，那没问题，补零，就好了

『010000』『010000』

4.这样的东东，在Base64中是能找到对应的值，可是，我要把他在转换成正确的字符A就不行了

『010000010000』=> A『0000』

5.缺了4位，那咋办，那就再添加4位咯

『010000010000』=> 『010000』『010000』『0000』

6.但加了4位又不能用Base64来表示了，少了2位，唉，既要伺候好6爷，又得服侍好8爷真心不容易啊，其实添了2仍是不行的，反正就是这么补0下去，最后就变成了

『010000』『010000』『000000』『000000』

用Base64一对照看到是（0用=表示）QQ==

OK

图片的Base64编码

例如：url：data:text/jpeg;base64,XXXXXXX==

data:[<mime-type>];[<chartset>=chartset];[<encoding>],<encoded_data>

/**
  data:font/woff，字体
  data:text/plain,文本数据
  data:text/html,HTML代码
  data:text/css;base64,css代码
  data:text/javascript;base64,javascript代码
  data:image/x-icon;base64,base64编码的icon图片数据
  data:image/gif;base64,base64编码的gif图片数据
  data:image/png;base64,base64编码的png图片数据
  data:image/jpeg;base64,base64编码的jpeg图片数据
*/
body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");}

特色

• 不像访问图片地址那样缓存起来，而是直接存在css/js中,随着css/js缓存的

• 因为是base64编码的，通常都比原图片要大1/3（故而通常得配合gzip压缩）

解决啥？

• 减小对服务器的请求（这里带出一个问题--为何要减小对服务器的请求？）

缺点

• IE8以前都不会支持（须要hack技术，但IE9的IE7兼容模式能够）

适用

• 图片比较小（这个较小又是几个意思？），若是图片过大，会致使css或者js文件过大，而致使阻塞

同类

• Image maps

• css sprites

题外话

为何要减小对服务器的请求？

• 1.请求头420byte和返回头600多比特确定少不了的，此外请求还可能会携带。

• 2.一次http链接又是：域名解析，开启TCP链接，发送请求，等待（网络延迟和服务器处理时间），下载资源

较小是几个意思

http://www.jianshu.com/p/486f...