网络图片转base64格式

在最近几个月的微信生态下的推广拉新活动中，每次都会将宣传海报和带有用户属性的二维码合并生成一张个性海报，用于在微信里传播。

其中有一个重要的点就是 canvas.toDataURL 的跨域问题，跨域的解决方案还是很多的。网络上给出的大部分方案是给提供图片的服务器增加控制头 Access-Control-Allow-Origin 配置通配符，还有一种方法是 img.crossOrigin = 'anonymous'。
那么现在需要解决的就是 如何将图片转成base64?

之前小伙伴的办法是将海报图手动转化成base64格式，然后将代码放到一个js文件中引用。这样做的好处就是省去程序转换的过程，但是缺点嘛，就比较多了

• 手动生成，流程复杂(先替换海报，再手动转成base64,在上线，以后需要维护对应的js文件)
• 这种硬编码的方式不易扩展
• 需要多维护一个js文件

其实可以先把海报图放到线上后，我们可以拿到该图片的绝对地址，然后使用canvas.toDataURL('image/jpeg') 将绘制在canvas内部的图片转成base64.

// 定义网络图转base64的方法
function getBase64(url, ext, callback) {
    var canvas = document.createElement("canvas");   //创建canvas DOM元素
    var ctx = canvas.getContext("2d");
    var img = new Image;
    img.crossOrigin = 'Anonymous';
    img.src = url;
    img.onload = function () {
        canvas.width = img.width; //指定画板的宽度，自定义
        canvas.height = img.height; //指定画板的高度,自定义
        ctx.drawImage(img, 0, 0, img.width, img.height); //参数可自定义
        var dataURL = canvas.toDataURL("image/" + ext);
        callback.call(this, dataURL); //回掉函数获取Base64编码
        canvas = null;
    };
}

在需要调用的地方是用

// 方法的调用
var imgUrl = 'http://www.xxx.com/aaa.png';
getBase64(imgUrl, 'png', function(base64){
    // 给原生img对象的src属性赋值
    img.src = base64;
})