摘要：一编码在聊图片编码之前，先来说说编码，其实这一块已经有很多例子了。一次连接又是域名解析，开启连接，发送请求，等待网络延迟和服务器处理时间，下载资源较小是几个意思
一、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:[
];[ =chartset];[ ],
/**
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...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/86927.html
摘要：前言由于博主最近又闲下来了，之前觉得的官方文档比较难啃一直放到现在。文章会逐步分析每个处理的用意当然是博主自己的理解，不足之处欢迎指出沟通交流。后续将会补上构建生产的配置分析，案例参考。前端临床手札构建逐步解构下 前言 由于博主最近又闲下来了，之前觉得webpack的官方文档比较难啃一直放到现在。细心阅读多个webpack配置案例后觉得还是得自己写个手脚架，当然这个案例是基于vue的，...
摘要：前面介绍了导出到的代码实现，详见这里，里面有一部分涉及导出图片到，在这里我再另外做一个详细的介绍。在前台用将生成的图片转成编码，提交给后台。 前面介绍了导出到word的代码实现，详见这里，里面有一部分涉及导出图片到word，在这里我再另外做一个详细的介绍。是这样的，我项目有个功能，里面就涉及到要将echarts形成的柱状图或者地图之类的图表导出到word，在网上找了很久，都是说将图片转...
摘要：前面介绍了导出到的代码实现，详见这里，里面有一部分涉及导出图片到，在这里我再另外做一个详细的介绍。在前台用将生成的图片转成编码，提交给后台。 前面介绍了导出到word的代码实现，详见这里，里面有一部分涉及导出图片到word，在这里我再另外做一个详细的介绍。是这样的，我项目有个功能，里面就涉及到要将echarts形成的柱状图或者地图之类的图表导出到word，在网上找了很久，都是说将图片转...
摘要：体验地址项目地址一个能够把字符串编码成图片，或者从图片中解码出字符串的超轻量级开源库，总代码数甚至不超过行使用方法通过安装通过标签引入值得注意的是，因为使用了的以及其他很棒的特性，这意味着需要你的浏览器提供支持。 showImg(https://segmentfault.com/img/bVC6vf?w=172&h=209); 体验地址：https://jrainlau.github....
阅读 3235·2021-11-24 09:39
阅读 2912·2021-09-09 11:34
阅读 3188·2021-09-07 09:58
阅读 2298·2019-08-30 13:07
阅读 2858·2019-08-29 15:09
阅读 1559·2019-08-29 13:01
阅读 2299·2019-08-26 12:18
阅读 1910·2019-08-26 10:28
