canvas多张图片合成分享海报，图片不完整解决

最近接触到了生成分享海报需求，有多张动态图片合成一个分享海报，由于是h5需要加载静态资源，很多时候生成的海报图片都不完整，img.onerror又不报错，发现如果是img.onload完成之后，canvas就可以写进去，但是img.οnlοad=function(){  (这里面无法再写img.onload,写了也不生效)  }，找到一个方法，借此记录一下

    let c = document.getElementById('myCanvas') // 画板id
    let p = document.getElementById('poster')
     //尺寸
    c.width = 900;
    c.height = 1755;
    let ctx = c.getContext("2d")
    let img = new Image() // 背景图对象
    var base64 = "" //base64
    //引入线上背景图可能存在跨域问题,解决：
    img.setAttribute("crossOrigin", "anonymous")
    img.src = "" // 背景图路经
    //爱国图标
    let img1 = new Image()
    img1.setAttribute("crossOrigin", "anonymous")
    img1.src = ""

let posterImges = [{ "img": img, "position": [0, 0, 900, 1755] },
            { "img": img3, "position": [503, 165, 240, 230] },
            { "img": img1, "position": [503, 250, 162, 145] },
            { "img": img2, "position": [687, 140, 73, 60] },
            { "img": img4, "position": [650, 1450, 120, 120] },
            { "img": img7, "position": [35, 440, 840, 800] },
            { "img": img9, "position": [560, 580, 179, 147] },
            { "img": img6, "position": [204, 1440, namelen + 4, 40] },
            { "img": img5, "position": [270, 1345, 30, 30] },
            { "img": img10, "position": [96, 1020, 708, 187] },
            ]
for (var i = 0; i <= posterImges.length - 1; i++) {
                let imaa = posterImges[i]["img"]
                let pos = posterImges[i]["position"]
                imaa.onload = function () {
                    num = num + 1
                    if (num == posterImges.length) {
                        console.log("执行");
                        for (var t = 0; t <= posterImges.length - 1; t++) {
                            let imaa1 = posterImges[t]["img"]
                            let pos1 = posterImges[t]["position"]
                            ctx.drawImage(imaa1, pos1[0], pos1[1], pos1[2], pos1[3])
                        }
                        base64 = c.toDataURL("image/png");
                        _this.posterImg = base64;
                    }
                }
            }

核心思想就是把img对象和canvas的需要写的对应坐标放在一个数组里面，然后遍历，onload完了一个就写一个，最后判断onload完了所有的图片，再执行toDataURL方法就可以了，这样可以保证生成的图片是完成的，不会漏写，如果考虑到速度问题，还可以使用离屏canvas，就是使用document.createElement()创建一个canvas，使用这个canvas去执行drawImage，canvas写完之后再通过canvas.drawImage(offcanvas,0,0)的api把离屏canvas写到另一个canvas上然后由另一个canvas去toDataURL。