用canvas的toDataURL将图片转化为dataURL（base64）

dataURL：先大致回顾一下正统的dataURL语法，这有助于我们检验转换后的内容是否正确。一个完整的dataURL应该是这样的

data:[<mediatype>][;base64],<data>

其中mediatype声明了文件类型，遵循MIME规则，如“img/png”、"text/plain"；，之后是编码类型，这里我们只涉及base64；紧接着就是文件编码后的内容了，我们常常在HTML里面看到img标签的src会这样写：

src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7"

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

toDataURL()

Filetrader对象也有类型的方法，比如：.readAsDataURL()，然而它只接受file或blob类型，而这两种类型一般只能通过

[type=file]> 元素的file属性获取，或者用Blob()构造函数手工船舰一个新的对象。尴尬的是我们当前只有图片路径，受制于历览器的安全策略， 元素的file属性是只读的，而Blob()构造函数只接受文件内容，两种方式都无法通过文件路径获取。而我们需要通过图片路径获取图片内容，是可以的，并且可以绘制到中，而正巧拥有toDtataURL方法。

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

canvas.toDataURL([type, encoderOptions]);

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

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

    function getBase64(url){
        //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建  省去了 append()，也就避免了文档冗余和污染
        var Img = new Image(),
            dataURL='';        Img.setAttribute('crossOrigin', 'anonymous');        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中
            dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL
        };
    }

一个可供随时调用的转换函数完成了，它会在图片被加载后返回一整个dataURL字符串。

完善：