Base64 图片转换工具

以前在写asp的后台的时候，有一个上传功能是必须的，那时候进行的图片预览（未上传前）其实就是获取本地的图片路径来显示图片，但是随着HTML5的出现，可以把图片通过编码来实现预览。

在雅虎的36条速度优化里面其中有一条就是减少HTTP请求数，而内联图像是使用 data:URL scheme的方法把图像数据加载页面中，从而达到减少请求数的目的。这可能会增加页面的大 小。把内联图像放到样式表（可缓存）中可以减少 HTTP请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的 支持。

所以对于一些icon或者小背景，可以通过Base64图片转换工具来把图片编码，下面要带来就是这个工具的实现细节：

实现技术：HTML5里面的本地预览（FileReader）

FileReader提供的具体方法

readAsBinaryString(file)      //将文件读取二进制码 通常我们将它传送到后端，后端可以通过这段字符串存储文件
readAsText(file,[encoding])   //将文件读取文本 第二个参数是文本的编码方式，默认UTF-8
readAsDataURL(file)           //将文件读取为DataURL 将文件读取为一串Data URL字符串，将小文件以一种特殊格式的URL地址直接读入页面。小文件                               
                              //指图像与html等格式的文件。

　　

FileReader提供的事件

onabort        //数据读取中断时触发
onerror        //数据读取出错时触发
onloadstart    //数据读取开始时触发
onprocess      //数据读取中
onload         //数据读取成功完成时触发
onloadend      //数据读取完成时触发，无论成功失败

　　

调用FileReader的readAsDataURL接口，将启动异步加载文件内容，通过给reader监听一个onload事件，将数据加载完毕后，在onload事件处理中，通过reader的result属性即可获得文件内容

核心代码

var file = this.files[0],    //上传的文件
        r = new FileReader();
        r.readAsDataURL(file);    //转换成Base64
        r.onload = function(){
            console.log(r.result); //得到具体的Base64
    }

　　

工具DEMO  http://www.w3cmark.com/a/tools/base64.html