canvas加载多张图片后再操做

//加载多张图片方法
var preloadImg = function (list, imgs) { //预加载
        var def = $.Deferred(),
            len = list.length;
        $(list).each(function (i, e) {
            var img = new Image();
            //img.crossOrigin = ""; //跨域请求资源
            img.setAttribute('crossOrigin', 'anonymous');
            img.onload = (function (j) {
                return function () {
                    imgs[j] = img
                    len--;
                    if (len == 0) {
                        def.resolve();
                    }
                };
            })(i);
            img.onerror = function () {
                len--;
               // alert('fail to load image');
            };
            img.src = e; // 确保缓存的图片也触发 load 事件
        });
        console.log(def.promise())
        return def.promise();
    }
复制代码

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = document.body.clientWidth;
c.height = document.body.clientHeight;
var list = ['../images/bg_result.jpg',...];//待加载的图片列表
var imgs = []; //生成后可以使用的图片列表
$.when(preloadImg(list, imgs)).done(
    function () {
        //draw
        var rimg = c.toDataURL("image/png");
        $(".canvasImg").html("<img src='" + rimg + "' alt='from canvas' />");
    });
复制代码