vue使用canvas完成二维码与图片的合成与下载(两张图片同理)

  

    下载
  
  

    
    
    
  

//画布画店铺码
toShopCode (rowData) {
  this.shopNameBgImg = "";
  this.title = '店铺码';
  this.shopCodeShow = true;
  this.unable = false;
  this.shopPicCode = rowData.CommonQRcode;
  this.paylogoSrc = require('../../../assets/aggLogo.png');
  this.shopNameBgImg = rowData.Name;

  this.$nextTick(function () {//等待加载完成
    // 获取Canvas 画图
    let myCanvas = this.$refs.myCanvas
    var ctx = myCanvas.getContext('2d');
    // 在Canvas画布 添加图片
    var img = this.$refs.shopPicImg;
    img.setAttribute("crossorigin","anonymous");
    img.setAttribute("src","url"+'?time=' + new Date().valueOf())
    img.onload = () => {
      ctx.drawImage(img, 0, 0, 300, 450);
    }
  })
},

//店铺二维码回调
f_shopPicCode(dataUrl,id){
  var shopNameBgImg = this.shopNameBgImg
  this.shopPicCodeUrl = dataUrl;
  let myCanvas = this.$refs.myCanvas
  var ctx = myCanvas.getContext('2d')
  ctx.clearRect(0,0,300,450);
  // 在Canvas画布 添加图片
  // var shopPicCodeImg = this.$refs.shopPicCodeImg;
  var shopPicCodeImg = new Image();
  shopPicCodeImg.src = dataUrl;
  // shopPicCodeImg.setAttribute("src",dataUrl)
  shopPicCodeImg.onload = () => {
    ctx.drawImage(shopPicCodeImg, 65, 120, 170, 170);
    ctx.globalCompositeOperation = "destination-over";//层级关系，二维码放在上层
    ctx.font = "14px bold 黑体";
    ctx.fillStyle = "#ffffff";
    ctx.textAlign = "center";
    // 设置垂直对齐方式
    ctx.textBaseline = "middle";
    // 绘制文字
    ctx.fillText(shopNameBgImg, 140, 90);
  }
},
//下载店铺码
downLoadShopPic(){
  var myCanvasShopPic  = document.getElementById("myCanvasShopPic");
  var dataURL = myCanvasShopPic.toDataURL("image/png");
  var saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
  saveLink.href = dataURL;
  saveLink.download = 'downLoad.png';
  saveLink.click();
},