base64编码以及在图片中的使用详解
1、概念：base64是指用64个基本的ASCII码字符对数据进行重新编码
2、编码字符表ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/，包括26个大写英文字母、26个小写英文字母、10个数字、加号“+”、斜杠“/”共64个字符，而等号“=”则用来作为后缀用途
3、编码规则
（1）base64将需要编码的数据拆分成字节数组，以3个字节为一组
（2）按顺序排列24位（1byte=8bit）数据
（3）把24位数据分成4组，每组6位，并在每组的最高位前补两个0凑足一个字节。这样就把一个3字节为一组的数据重新编码成了4个字节
（4）当所要编码的数据的字节数不是3的整倍数时，即在分组时最后一组不够3个字节，这时就在最后一组填充1到2个全0字节，并在最后编码完成后在结尾添加1到2个“=”，因此常常看到编码后输出的文本末尾可能会出现1或2个“=”
4、解码规则
解码过程就是把4个字节再还原成3个字节，再根据不同的数据形式把字节数据重新整理成数据
5、举个栗子
对ABC进行base64编码，步骤如下：
（1）首先取ABC对应的ASCII码值：A（65）、B（66）、C（67）
（2）再取二进制值：A（01000001）B（01000010）C（01000011）
（3）把3个字节的二进制码链接起来作为一组：010000010100001001000011
（4）再以6位为一组，分成4组数据，并在最高位前补两个0凑足一个字节：（00010000）（00010100）（00001001）（00000011），其中加粗部分为真实数据
（5）再把4个字节数据转换成10进制数：（16）（20）（9）（3）
（6）最后根据base64字符表，查找对应的ASCII码字符：（Q）（U）（J）（D），这里的值实际就是数据在字符表中的索引，且索引从0开始
6、base64支持的图片格式：PNG、GIF、JPG、BMP、ICO
7、base64对于图片编码的使用：
（1）在CSS中的使用：background-image: url("data:image/jpg;base64,/9j/4QMZR...")
（2）在HTML中的使用：<img src="data:image/jpg;base64,/9j/4QMZR..." />
8、base64图片编码与原始图片大小关系
Base64编码要求把3个8位字节（38=24）转化为4个6位的字节（46=24），之后在6位的前面补两个0，形成8位一个字节的形式。 如果剩下的字符不足3个字节，则用0填充，输出字符使用’=’，因此编码后输出的文本末尾可能会出现1或2个’=’，由base64编码原理我们知道，base64的图片字符流中的每8个字符就有两个是用0补充，而且字符流的末尾还可能存在‘=’号，我们可以通过这个原理计算图片的文件流大小。，以下面base64编码为例详解编码后图片与原始图片的大小关系，如：
data:image/png;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAAAAAAAAB9SR//fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/6mHbP+LXDf/fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/31JH/99SR//i104/5lwT/+RZkP/fksh/6eFaP/8/Pv/mG9N/31JH/99SR//fUkf/31JH/99SR//fUkf/31JH/+tjHL/6uHb//7+/v////////////Xx7v/8+/r//////6N/Yv99SR//fUkf/31JH/99SR//fUkf/35LIf/PvK3///////////////////////////////////////////+vj3b/fUkf/31JH/99SR//fUkf/31JH/++pI/////////////08Oz/vqSQ/8y3p///////////////////////u6CK/31JH/99SR//fUkf/31JH/+IWDL/+vn3///////s5d//iVo1/6B7XP/6+ff/8Orl/9TDtv+5nYb/nXZX/4NRKf9+SyL/fUkf/31JH/99SR//sJF3////////////onxe/35LIv+ge1z/ils1/31JH/99SR//fUkf/6qIbf/dz8T/1MK0/31JH/99SR//fUkf/8WunP///////Pv7/39MIv99SR//fUkf/31JH/99SR//fUkf/31JH//ay7///////+ri2/99SR//fUkf/31JH//Frpv///////38+/9/TCP/fUkf/31JH/99SR//fUkf/31JH/99SR//2szA///////q4dv/fUkf/31JH/99SR//r491////////////pIBi/31JH/99SR//fUkf/31JH/99SR//hVUt//j29P//////1MK1/31JH/99SR//fUkf/4dXMP/59/b//////+7o4/+MXjn/fUkf/31JH/99SR//gE0k/9XFuP///////////6aDZ/99SR//fUkf/31JH/99SR//up+I////////////9vPw/8OrmP+si3D/uZ2G/+ri2////////////97Rx/99SiD/fUkf/31JH/99SR//fUkf/31KIP/KtqX//v7+/////////////////////////////////+Xb0/+HWDH/fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/6eFaP/l2tL//v7+////////////8evn/7yhi/+BTyb/fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/4dXMP+Uakf/jV86/31JH/99SR//fUkf/31JH/99SR//fUkf/31JH/9/SyH/f0sh/39LIf9/SyH/f0sh/39LIf9/SyH/f0sh/39LIf9/SyH/f0sh/39LIf9/SyH/f0sh/39LIf9/SyH/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==
（1）把上述base64编码存放在变量str中，计算文件流大小需要去掉头部data:image/png;base64,（注意有逗号）
str = str.substring(22) // 1536
或是：
str = str.split(",")[1] // 1536
（2）找到等号“=”，把等号去掉
var equalIndex = str.indexOf('=');
if(str.indexOf('=') > 0){
str = str.substring(0, equalIndex);
}
（3）编码后字符流大小，单位为字节（一个英文字符为一个字节）
var strLength = str.length(); // 1534
（4）编码后文件流大小，单位为字节
var fileLength = parseInt(strLength*3/4); // 1150，可以通过 strLength/fileLength = 4/3 进行推导，并且注意1150只是字节数，并不是所谓的文件大小表示方式中的KB
或是：
var fileLength = parseInt(strLength-(strLength/8)*2); // 1150，编码后的数据中每8位中就有2位是添加的0补位，因此所有的0补位总数为：(strLength/8)*2
9、总结
从以上编码规则可以得知，通过base64编码，原来的3个字节编码后将成为4个字节，即字节增加了33.3%，数据量相应变大。所以10M的数据通过base64编码后大小大概为10M*133.3%=13.33M。
