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 + "/images/bank-guangda.png", public_url + "/images/bank-zhaosang.png", public_url + "/images/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是有损压缩。

本文出自 “shuizhongyue” 博客，谢绝转载！