这个img引用的就是以 base64 编码的 dataURL 了，只要浏览器支持，就可以被解码成 gif 图片并渲染出来。

.toDataURL()

FileReader对象也有类似的方法，比如.readAsDataURL() ，然而它只接受file或blob类型，而这两种类型一般只能通过元素的files属性获取，或者用Blob()构造函数手工创建一个新的对象。尴尬的是我们当前只有图片路径，受制于浏览器的安全策略， 的files属性是只读的，而Blob()构造函数只接受文件内容，两种方式都无法通过图片路径直接获取。上文中假设的应用场景迫使我们必先考虑如何通过路径获取到图片内容。是可以的，并且可以被绘制到中，而正巧拥有.toDataURL()方法。

万事具备，我们只需要把获取到的图片放到里再通过.toDataURL()方法转化下，就可以得到以 base64 编码的 dataURL。来看这个方法的语法：

canvas.toDataURL([type, encoderOptions]);

canvas是DOM元素对象；参数type指定图片类型，如果指定的类型不被支持则以默认值image/png替代；encoderOptions可以为image/jpeg或image/webp类型的图片设置图片质量，取值0-1，超出则以默认值0.92替代。

需要注意的是：在转换成 dataURL 前必须先确保图片成功加载到，于是.toDataURL()方法应该写在的onload异步事件中。现在就来实现一个功能函数：

function getBase64(url){

//通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 省去了 append()，也就避免了文档冗余和污染

var Img = new Image(),

dataURL='';

Img.src=url;

Img.onload=function(){ //要先确保图片完整获取到，这是个异步事件

var canvas = document.createElement("canvas"), //创建canvas元素

width=Img.width, //确保canvas的尺寸和图片一样

height=Img.height;

canvas.width=width;

canvas.height=height;

canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中