js多張圖片合成一張圖，canvas(海報圖，將二維碼和背景圖合並) -----vue

思路：vue中圖片合並

　　首先准備好要合並的背景圖，和請求后得到的二維碼，

        canvas畫圖，將兩張背景圖和一張二維碼用canvas畫出來，

        將canvas再轉為img

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

       開始時canvas是隱藏的，兩張背景圖時顯示的，當canvas畫完后再轉為img的時候，隱藏canvas和背景圖，顯示canvas轉完的圖片（也就是合並后的圖片）

       這個適配方式可能有些瑕疵，所以會加了很多設備的判斷

代碼：

　　html

    

<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>
    <img  v-if="!infactQrCode"  src="../../../assets/imgs/posterbg.jpg" id="bgImg" alt="" style="width: 100%;height:100%;">
    <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">
    <img :src="infactQrCode" alt="" v-if="infactQrCode" style="width: 100%;height:100%">
  </div>

 

 

      js<script>

 import html2canvas from  'html2canvas' export default { name: 'Poster', data() { return { qrCodeImg: "", infactQrCode:"", } }, created(){
　　　　
 //二維碼圖片后台返回 this.qrCodeImg="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568183940&di=49b7187fdb7fee3e30c20583150f09b6&imgtype=jpg&er=1&src=http%3A%2F%2Fdown.admin5.com%2Fuploads%2Fallimg%2F170630%2F2160_170630144656_1.jpg"; }, 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"; } }, } </script>