在一些网站的网页中，我们在查看代码时发现有些网页的图片引用地址不是图片的url地址，而是以data:image/png;base64开头的编码，后面一大串超长的无序乱码一样的字符串.那么这是什么呢？
它是在RFC2397中定义的Data URI scheme，支持的类型有text/plain文本以及HTML代码text/html、text/css、text/javascript、image/gif、image/png、image/jpeg、image/x-icon等类型的base64编码数据.
它可以将一些较小的数据不用外部文件的引用载入，直接将数据嵌入到网页中去，这样它就可以减少页面的请求.
为什么这么说呢，比如我们打开一个网页时，加载每个图片都会发送依次http请求来下载到浏览器缓存中，而将图片直接转为base64编码的数据随着html直接下载到浏览器中，不用再发送多余请求,但不会浏览器不缓存该图片.
虽然base64编码能够减少图片的请求，但是会加大css文件的大小，增加css解析时间，所以较大图片一般都采用CssSprites技术,而将图片转为base64编码后对于较小的或用处特殊无法使用CssSprites的图片来说，还是比较好的选择.
Base64是一种最常见的二进制编码方法
那么进入主题，怎样将base64编码的图片转为正常的图片呢？
示例：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAjCAYAAAD48HgiJI=
比如上面那串字符，其实是一张小图片,data代表数据协定名称,数据类型名称是image/png, 数据的编码方法为base64，base64的逗号后面就是该image/png文件的base64编码后完整的字符串数据.
1、我们完全可以将它直接复制到在火狐、谷歌等常用的浏览器上方的地址栏中，然后按下enter键即可打开该图片，在打开的图片上右键选择图片另存为，给图片重命名下即可将base64编码转为图片.
2、新建一个空白文档，然后将其另存为一个html文件，右键选择打开方式-记事本，修改其中的代码
<img src="需要解码base64字符串编码" />
在该代码的src地址处将需要解码的base64编码直接只复制替换到这个地方，然后保存。双击用浏览器打开该html页面，然后就会看到显示出来的图片，然后同理，鼠标指针移动到图片上，右键另存为图片，修改名称保存图片.
3、与第二种保存方法类似，既然直接给html中img标签赋值就可以加载图片，那么我们可以直接利用html5特性，给a标签赋值，给其一个download属性就可以实现直接下载该图片，而无需多余操作.
<a href="base64图片编码" target="_blank" download="下载图片">下载图片</a>
修改代码的href地址为base64编码，将代码写进新建的html文件中去即可.
在很多网站中的图片base64编码互转工具中也是运用了这一个方法.
代码示例：
<input type="file" name="选择图片" id="basefile" />
<textarea id="wqtool-aaa"></textarea>
<button id="wqtool-ccc" onClick=" huanyuan();">base64转为图片</button>
<div id="xzpic"></div>
<script type="text/javascript">
var tupiandizhi = document.getElementById("basefile");
var wqtoolbase= document.getElementById("wqtool-aaa");
var xzpic = document.getElementById("xzpic");
tupiandizhi.addEventListener('change',dqbase,false);
function dqbase(){
var file = this.files[0];
var wqtoolbase= document.getElementById("wqtool-aaa");
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
wqtoolbase.innerHTML = this.result;
}
} ;
function huanyuan(){
var wqtoolbase= document.getElementById("wqtool-aaa").value;
xzpic.innerHTML = '<img src="'+wqtoolbase+'" /> <a href="'+wqtoolbase+'" target="_blank" download="1.png">点击下载</a>';
}
</script>
为了在前端html页面简单实现base64与图片文件相互转换的功能，以上代码主要靠readAsDataURL方法读取指定flie对象中base64编码以及a中的download属性
我们只需要在flie上传组件选择需要转为base64编码的图片即可将readAsDataURL方法方法读取到的base64字符通过 document.getElementById("wqtool-aaa").value显示在id为wqtool-aaa的文本框中。
或者将文本框中的字符串通过js的document.getElementById读取为变量wqtoolbase，将其赋值给img标签的src属性与a标签的href属性，再用html5中新增的download直接对引用的数据进行下载即可得到从base64编码转为图片的文件.
将以上代码复制到按照之前的新建文本另存为html文件的办法后拖入到浏览器中运行该html文件，这样我们就制作了一个简单的功能实用纯前端实现的base64与图片相互转换的在线工具.
除了前端实现方法，在后端代码中，有着许多自带的base64函数或编码库可以直接便捷的实现这样的base64图片编码相互转换效果.