利用canvas合并两个海报

图片1 是个海报，图片2是个二维码，把这个二维码镶嵌到图片1 的指定位置上

function drawAndShareImage(opt, cb) {
  if (!opt) {
    console.error('没有图片');
    return;
  }
  //imgSrc1 背景图片（二维码）链接
  //imgSrc2 小图片（头像）链接
  var canvas = document.createElement('canvas');

  canvas.width = opt.width;
  canvas.height = opt.height;

  var context = canvas.getContext('2d');


  var bgImage = new Image();

  bgImage.src = opt.bgImage;
  bgImage.crossOrigin = 'Anonymous';

  bgImage.onload = function (){
    context.drawImage(bgImage, 0, 0, opt.width, opt.height);

    var index = 0;
    for (var i = 0; i < opt.images.length; i++) {
      var img = opt.images[i];
      var imgDom = new Image();
      imgDom.src = img.src; //背景图片  你自己本地的图片或者在线图片
      imgDom.crossOrigin = 'Anonymous';
      imgDom.onload = function () {
        context.drawImage(imgDom, img.x, img.y, img.width, img.height);
        index++;
        if (index == opt.images.length) {
          var base64 = canvas.toDataURL('image/png');
          cb(base64);
        }
      };
    }
  }
}

//调用
drawAndShareImage(
              {
                width: 700,
                height: 1300,
                bgImage: bgImage,//图片资源
                images: [
                  {
                    src: src,//图片资源
                    x: x,
                    y: y,
                    width: width,
                    height: height,
                  },
                ],
              },
              function (res) {
                var myImg = document.getElementById(MyImg);
                myImg.src = res;
              }
          );

<img style="width: 100%;display: block;" id="MyImg" src="" alt="" srcset="" />