思路：vue中图片合并

　　首先准备好要合并的背景图，和请求后得到的二维码，

        canvas画图，将两张背景图和一张二维码用canvas画出来，

        将canvas再转为img

        注意canvas和图片的清晰图和图片的尺寸位置

       开始时canvas是隐藏的，两张背景图时显示的，当canvas画完后再转为img的时候，隐藏canvas和背景图，显示canvas转完的图片（也就是合并后的图片）

       这个适配方式可能有些瑕疵，所以会加了很多设备的判断

代码：

　　html

    

 

 

      js<script>

import html2canvas from  'html2canvas'  export default {    name: 'Poster',    data() {      return {        qrCodeImg: "",        infactQrCode:"",      }    },    created(){
     　　　　       //二维码图片后台返回      this.qrCodeImg="";    },    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)     //图片清晰度解决办法，缩放2倍后，其他图片的宽高也要比ui设计的宽高乘以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(){
     　　　　　　　　　　　　//img1为第2张背景图，开始画第2张图，图片的的定位，left为整个屏幕-ui设计图片的宽*图片的适配比例，最后除以2保证图片居中， 　　　　　　　　　　　　//图片的left  top   width  height都是这样计算的， if(img1.complete){                    var left =  (window.screeWidth-600*window.rateWidth)/2;                    if(window.screeHeight>=812&&window.screeWidth<768){   //iphonx的计算方式                      context.drawImage(img1,left,200*window.rateWidth,600*window.rateWidth,890*window.rateHeight);                    }else{                      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){
     　　　　　　　　　　　　　　//二维码图片的画图left top widht height                        var left =  (window.screeWidth-290*window.rateWidth)/2;                        if(window.screeWidth==600&&window.screeHeight==1024){   //ipad                           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");                          return                        }                        if(window.screeWidth>=768&&window.screeHeight>812){   //其他设备                          var left =  (window.screeWidth-230*window.rateWidth)/2;                          context.drawImage(img2,left,430*window.rateHeight,230*window.rateWidth,230*window.rateWidth);                        }else if (window.screeHeight>=812&&window.screeWidth<768){                          context.drawImage(img2,left,410*window.rateHeight,290*window.rateWidth,290*window.rateWidth);                        }else{                          context.drawImage(img2,left,410*window.rateHeight,290*window.rateWidth,290*window.rateWidth);                        } 　　　　　　　　　　　　　　//以上为2张背景图和一张二维码画合并后图画到canvas的结果，下面为将canvas转为图片的方法                        var image = new Image();                        _self.infactQrCode=canvas.toDataURL("image/png");                      }                    }                  }                }              }            }          }        },1)      },    },    mounted(){      this.drawImg();  //主要代码再该方法，将图片转为canvas，再将canvas转为图片，因为canvas是无法长按保存和识别二维码的      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";      }    },  }