图片的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 编码
六:待深入的问题:此格式图片上传!!!(暂不研究)