图片的Base64编码

一：真正认识这玩意

在做支付宝服务窗开发过程中，用到支付宝自带的头像上传插件。其中支付宝返回的图片结果是以Base64编码处理的。于是便做了深入的了解，想到之前见过个各个框架中，也采用 这种方式处理。。。。才恍然大悟！

二：理解

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。

三：写法

 

//在html代码img标签里的写法
<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">

//在css里的写法
#fkbx-spch, #fkbx-hspch {
  background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;
}

 

四：先进之处

 

• 无额外请求
• 对于极小或者极简单图片
• 可以被gzip。（通过gzip对base64数据的压缩能力通常和图片文件差不多或者更强）
• 降低css维护难度
• 可像单独图片一样使用，比如背景图片重复使用等
• 没有跨域问题，无需考虑缓存、文件头或者cookies问题 
  
  

（基本不考虑使用雪碧图（CssSprites）图标有自定义字体图标的使用。图片可以使用这个）

五：得到base64 

1、百度有好多在线转换的。。。。。。。

2、利用 Chrome 浏览器：在 chrome 下新建一个窗口，然后把要转化的图片直接拖入浏览器，打开控制台，点 Source，如下图所示，点击图片，右侧就会显示该图片的 base64 编码

六：待深入的问题：此格式图片上传！！！（暂不研究）