canvas toDataURL转base64实现多张图片合成一个图片

前端时间，作穿搭助理时遇到这样一个问题；多张图片合成一张图片的问题

业务背景是这样的：

  后台会根据不一样天气，根据某种规则；推荐给用户不一样的衣服搭配。咱们姑且将每一套咱们称之为    一个模板;

   而后，还要求模板的布局按照衣服的类型，模板不一样的布局方案

   如今大概模板类型有以下几个（后期还会加）

  原本，计算，定位这个模板已经够头疼了的；如今产品说这个加入衣橱操做要把整个模板合成一张图，放到衣橱图片库中

还好之间简单看过《H5高级程序设计》貌似提到了，能够直接将canvas转成图片的方法；

wsc上也有说明，可是一笔带过了  http://www.w3school.com.cn/tags/html_ref_canvas.asp

$("canvas")[0].toDataURL();

目前模板的效果以下图所示：

如今我把上面的业务所有剥离出去，关键代码以下：

    $("canvas").attr({
        "width": $(window).width() + "px",
        "height": "400px"
    });

    var img = [public_url + "/p_w_picpaths/bank-guangda.png", public_url + "/p_w_picpaths/bank-zhaosang.png", public_url + "/p_w_picpaths/Assist_man.png"]
    var canvas = $("canvas")[0].getContext('2d');
    var imgobj = {};


    var imgin = function() {
        for (var i = 0; i < img.length; i++) {
            var $img = new Image();
            $img.src = img[i];

            var loadImg = function($img, i) {
                $img.onload = function() {
                    canvas.drawImage($img, i * 50, i * 50, 50, 50);
                }
            };
            loadImg($img, i);
        }
        var base64 = $("canvas")[0].toDataURL();
        console.log(base64);
    }
    imgin();

须要说明一点就是：

   要监听img的load事件，保证图片加载成功以后，再在画布上画出来；

   转base64的方法是$("canvas")[0].toDataURL();不是

   $("canvas")[0].getContext('2d').toDataURL();  本人刚开始没注意，搞了半天才发现问题出在这里。

最后转出的效果大概以下，注意base64是有损压缩。