canvas合并图片并长按保存

代码实现

<div class="pho-bg">
   <img src="../../assets/images/FeedbackActivity/poster1.png" alt="" id="main2">
   <img src="" alt="" id="main1">
</div>
<div class="share-photos" v-show="drawShow">
  <div class="posters-photos">
    <canvas id="myCanvas" width="300" height="500" ref="index" v-show="false"></canvas>
    <div class="photo" id="captureId"></div>
    <div class="saveBtn" @click='savePic'>保存图片</div>
               
   </div>        
 </div>
<div id="qrcode" ref="qrcode" style="margin-bottom: 1.2rem;" v-show="false"></div>//绘制二维码

 

实现原理，找到X轴，Y轴位置及大小控制

 downLoad(){

  document.getElementById('qrcode').innerHTML = ''

  let qrCode='http://www.XXX.com/'//图片路径

  let url=qrCode

  let qrcode = new QRCode('qrcode', {

     width: 60,

     height: 60,

     text:'',

     colorDark: "#000",

     colorLight: "#fff",

     correctLevel : QRCode.CorrectLevel.H 

   })

    qrcode.clear()

    qrcode.makeCode(url) 

 },

 shareShow() {

   let qrcode = $('#qrcode')

   let canvas = qrcode.find('canvas').get(0)

   $('#main1').attr('src', canvas.toDataURL('image/jpg')) //某一状态将绘制的二维码赋给要拼接的图片中

 },

saveImg(){//拼接图片
   let main1 = document.getElementById('main1')
   let main2 = document.getElementById('main2')
   var canvas = document.getElementById('myCanvas'); 
   var ctx = canvas.getContext('2d'); 
   canvas.width = 280
   canvas.height = 500
   //main1.setAttribute('crossOrigin', 'anonymous')//图片是否跨域，服务器亲测有效，当然这可以不用也能保存
   ctx.rect(0, 0, 280, 500);
   ctx.drawImage(main2, 0, 0, 280, 500)
   ctx.drawImage(main1, 14, 437, 50, 50)
   var newImg = new Image();
   var dataUrl = canvas.toDataURL();
   newImg = document.createElement("img");
   newImg.src = dataUrl;
   $('.photo').append(newImg);
},

 savePic(){

     let myCanvas = document.getElementsByClassName('savaImg')[0].getElementsByTagName('canvas');

     let Url = myCanvas[0].toDataURL('image/png')//用手机点击保存无效，得图片上传到服务器

     var blob=new Blob([''], {type:'application/octet-stream'}); 

     var url = URL.createObjectURL(blob); 

     var a = document.createElement('a'); 

     a.href = Url; 

     a.download = "下载的图片"; 

     var e = document.createEvent('MouseEvents'); 

     e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 

     a.dispatchEvent(e); 

     URL.revokeObjectURL(url); 

 },