canvas圖片合並，多張圖合並成一張圖，圖片與二維碼圖片合成

<template>
  <div class="wap-poster" ref="imageWrapper" id="target" style="width: 100%;">
    <canvas id="mycanvas" width="100%" height="100%" v-if="!infactQrCode" style="transform: scale(2);display: none"></canvas>
    <!-- 背景圖1 -->
    <img  v-if="!infactQrCode"  src="../../../assets/imgs/posterbg.jpg" id="bgImg" alt="" style="width: 100%;height:100%;">
    <!-- 背景圖2 -->
    <img  v-if="!infactQrCode"  src="../../../assets/imgs/poster0.png" id="poster" alt="" style="position: absolute;">
    <!-- 二維碼圖片 -->
    <img  v-if="!infactQrCode" id="qrcode" :src="qrCodeImg" alt="" style="position: absolute;top:247px;width: 140px;height: 140px;display: none">
    <!-- canvas畫圖轉成的圖片 -->
    <img :src="infactQrCode" alt="" v-if="infactQrCode" style="width: 100%;height:100%">
  </div>
</template>

<script>


  export default {
    name: 'Poster',
    data() {
      return {
        qrCodeImg: "",
        screenWidth:"",
        agentUserId:'',
        infactQrCode:"",
        curUrl:''
      }
    },
    created(){
      var host=window.location.href.slice(0,window.location.href.indexOf("/#/"));
      var url=this.$route.query.qrCodeImg;
      var curUrl=url.slice(url.indexOf('mp.weixin.qq.com')+16);
      this.curUrl=curUrl;
      this.qrCodeImg=host+''+curUrl;
    },
    methods: {
      drawImg(){
        let _self=this;
        var canvas = document.getElementById("mycanvas");
        var a = setInterval(() =>{
          // 重復獲取
          canvas = document.getElementById("mycanvas");
          if(!canvas){
            return false
          } else {
            clearInterval(a);
            var context = canvas.getContext('2d');
            context.scale(2,2)
            var img = new Image();
            img.setAttribute('crossOrigin', 'anonymous');
            let bgUrl=document.getElementById("bgImg").src;
            img.src=bgUrl;
            img.onload = function(){
              if(img.complete){
                context.drawImage(img,0,0,window.screeWidth,window.screeHeight);
                var img1 = new Image();
                let bgUrl1=document.getElementById("poster");
                img1.src=bgUrl1.src;
                img1.setAttribute('crossOrigin', 'anonymous');
                img1.onload = function(){
                  if(img1.complete){
                    var left =  (window.screeWidth-660*window.rateWidth)/2;                                       context.drawImage(img1,left,110*window.rateWidth,600*window.rateWidth,1100*window.rateHeight);
         

                    var img2 = new Image();
                    img2.src=document.getElementById("qrcode").src;
                    img2.crossOrigin="*";
                    img2.onload = function(){
                      if(img2.complete){
                        var left =  (window.screeWidth-290*window.rateWidth)/2;

                          var left =  (window.screeWidth-240*window.rateWidth)/2;
                          context.drawImage(img2,left,460*window.rateHeight,240*window.rateWidth,240*window.rateWidth);
                          var image = new Image();
                          _self.infactQrCode=canvas.toDataURL("image/png");
                      
                      }
                    }
                  }
                }
              }
            }
          }
        },1)
      },
    },
    mounted(){
      this.drawImg();
      const that = this;
      window.screeWidth=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      window.screeHeight= window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      var left =  (window.screeWidth-140)/2;
      var qrcode=document.getElementById("qrcode");
      qrcode.style.left=left+'px';
      this.screeWidth=window.screeWidth;
      var canvas = document.getElementById("mycanvas");
      window.rateWidth = window.screeWidth/ 750;
      window.rateHeight = window.screeHeight/1334;
      canvas.setAttribute("width",window.screeWidth*2);
      canvas.setAttribute("height",window.screeHeight*2);

      let bgUrl1=document.getElementById("poster");
      var left =  (window.screeWidth-600*window.rateWidth)/2;
      if(window.screeHeight>=812&&window.screeWidth<768){
        bgUrl1.style.left=left+"px";
        bgUrl1.style.top=200*window.rateWidth+"px";
        bgUrl1.style.width=600*window.rateWidth+"px";
        bgUrl1.style.height=890*window.rateHeight+"px";
      }else{
        bgUrl1.style.left=left+"px";
        bgUrl1.style.top=110*window.rateWidth+"px";
        bgUrl1.style.width=600*window.rateWidth+"px";
        bgUrl1.style.height=1100*window.rateHeight+"px";
      }

    },
  }
</script>
<style lang="scss">
  button {
    position: absolute;
    top: 10px;
  }
</style>

圖片合成，多張圖片的合成，通過canvas將多張圖片及二維碼合成一張圖片，然后再轉換成圖片展示

完整代碼

canvas畫圖主要代碼

    drawImg(){
        //  window.screeWidth,window.screeHeight 適配比例
        let _self=this;
        var canvas = document.getElementById("mycanvas");
        var a = setInterval(() =>{
          // 重復獲取
          canvas = document.getElementById("mycanvas");
          if(!canvas){
            return false
          } else {
            clearInterval(a);
            var context = canvas.getContext('2d');
            context.scale(2,2)
            var img = new Image();
            img.setAttribute('crossOrigin', 'anonymous');
            let bgUrl=document.getElementById("bgImg").src;
            img.src=bgUrl;
            img.onload = function(){
              if(img.complete){
                // 畫第一張背景圖
                context.drawImage(img,0,0,window.screeWidth,window.screeHeight);
                //畫第二章背景圖
                var img1 = new Image();
                let bgUrl1=document.getElementById("poster");
                img1.src=bgUrl1.src;
                img1.setAttribute('crossOrigin', 'anonymous');
                img1.onload = function(){
                  if(img1.complete){
                    var left =  (window.screeWidth-660*window.rateWidth)/2;
                    drawImage("圖片對象","x軸位置","y軸位置","圖片的寬度","圖片的高度")
                    context.drawImage(img1,left,110*window.rateWidth,600*window.rateWidth,1100*window.rateHeight);
                    //畫二維碼
                    var img2 = new Image();
                    img2.src=document.getElementById("qrcode").src;
                    img2.crossOrigin="*";
                    img2.onload = function(){
                      if(img2.complete){
                        var left =  (window.screeWidth-240*window.rateWidth)/2;
                        context.drawImage(img2,left,460*window.rateHeight,240*window.rateWidth,240*window.rateWidth);
                        // var image = new Image();
                        // 將兩張背景圖和一張二維碼畫完的canvas再轉換成圖片
                        _self.infactQrCode=canvas.toDataURL("image/png");
                      }
                    }
                  }
                }
              }
            }
          }
        },1)
      },