使用canvas将多张图片合并为一张

一、可用于生成一个类似于微信的个人名片或做一些海报

drawAndShareImage(imgSrc1, imgSrc2) { 
    //imgSrc1 背景图片（二维码）链接
    //imgSrc2 小图片（头像）链接
    var canvas = document.createElement("canvas");
    canvas.width = 700;
    canvas.height = 700;
    var context = canvas.getContext("2d");

    context.rect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "#fff";
    context.fill();

    var myImage = new Image();
    myImage.src = imgSrc1; //背景图片  你自己本地的图片或者在线图片
    myImage.crossOrigin = 'Anonymous';

    myImage.onload = () => {
        context.drawImage(myImage, 0, 0, 700, 700);
        var myImage2 = new Image();
        myImage2.src = imgSrc2; //你自己本地的图片或者在线图片
        myImage2.crossOrigin = 'Anonymous';

        myImage2.onload = () => {
            // 设置填充的颜色
            context.fillStyle = "white";
            // 绘制填充的矩形
            context.fillRect(250, 250, 210, 210);
            context.drawImage(myImage2, 260, 260, 190, 190);
            var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
            // 获取图片容器
            var myImg = document.getElementById('myImg');
            myImg.src = base64;
        }
    }
}

二、合成多张图片

示例：如果是这样有规律的合成图片，可以直接用示例代码中的数组循环。如果是想要自由调整位置，就需要一个一个去新建，然后调整