1、base64百科

Base64是收集上最多见的用于传输8Bit字节代码的编码方法之一，可用于正在HTTP情况下通报较少的标识疑息。

或人： 唉，我完全兴柴了，为什么上里明显是中文，洒家却看没有懂嘞，为何？

好吧，我也没有喜好专业术语的注释。您只要晓得，base64编码便是少得像上面那模样的代码：

thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==

上里代码各人皆熟习吧，迅雷下载链接哦（咳咳，该地点很纯真），便是base64编码后的地点，以是当前看到那种：一堆持续字母，最初有1~2个“=”的代码便是base64。

base64:URL便是URL地点是base64编码的。

比方上面那个：

<img src="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs=" />

2、base64取文件数据编码

正在收集中，经由过程HTTP传输的文件借能够经由过程base64对数据停止编码停止传输。便如上里的那个base64的gif格局图片。固然，能够base64编码的文件不只仅是图片，也能够是字体文件，比方（中心出缺省）：

@font-face{

font-family: forTest;

src:url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAh4 ... RFERuENEGADl7JlY=) format('woff');

}

天然，关于background-image图片，我们也能够利用base64编码停止传输，比方：

background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);

而利用base64编码做为background-image图片便是本文要偏重论述的。

3、怎样得到图片的base64编码

实在正在我之前“基于HTML5的可预览多图片Ajax上传”和“zSlide-基于CSS3/HTML5演示文档jQuery插件”实践上便取图片的base64编码的获得挨过交讲了。以下当地图片转换成可预览的base64编码的中心剧本：

var reader = new FileReader(), htmlImage;

reader.onload = function(e) {

htmlImage = '<img src="'+ e.target.result +'" />'; // 那里e.target.result便是base64编码

}

reader.readAsDataURL(file);

上里道的您只需求理解，实践上，今朝base64编码东西很多，关于我们前端造做，上面那个当地图片 base64编码获得页里是值得保举的：Encode Data URL By PuterJam

间接将桌里图片拖到条条里便有了呼应的background-image url属性可用的base64地点了：

该转换页里的本理便是上里所道的HTML5 文件当地预览本理，详细能够本人查阅材料。

四、利用base64:URL的劣缺陷

小我私家以为base64:URL传输图片文件的益处正在于：

1.削减了HTTP恳求

2.某些文件能够制止跨域的成绩

3.出有图片更新要从头上传，借要清算缓存的成绩

不敷正在于：

1.阅读器撑持

利用base64编码图片做为布景图片的那种手艺IE6/IE7阅读器是没有撑持的（IE9阅读器IE7形式下撑持，那里被@前真个那面破事鄙夷了 ）。关于今朝PC页里，兼容性成绩使出有文件上传和无需更新缓存的长处没有存正在了。

2.删减了CSS文件的尺寸

base64编码图片素质上是将图片的两进造巨细以一些字母的情势展现，比方一个1024字节的图片，base64编码后最少1024个字符，那个巨细会被完整嵌进到CSS文件中（不外荣幸的是也能够被gzip了，而图片文件被gzip结果没有较着）。

3.编码本钱

图片完成后借需求base64编码，今朝估量脚工完成的多，因而，删减了必然的事情量，固然没有多。

注：相干网站建立本领浏览请移步到建站教程频讲。