vue把几张图片logo。二维码。背景合成一个海报并下载,使用canvas

 

 data() {

    return {

      logoimg:'',//logo图片

      ctx:'',

     qrBase64:'',//二维码地址

  }

}

//点击下载按钮访问

downloadposterPicture(){
         var canvas = document.createElement('canvas');
        this.ctx = canvas.getContext('2d');
        
         canvas.width =750 ;
         canvas.height =1624 ;
           

//使用箭头函数解决this烦人指向问题
            this.drawImg('/static/api/img/share/posterbg.png','bg',0,0,750,1624,()=>{
                this.drawImg(this.logoimg,'logo',43,30,120,120,()=>{
                    this.drawImg(this.qrBase64,'qr',200,1090,367,367,()=>{
                        this.fileDownload(canvas.toDataURL(), "海报.jpg");
                        // console.log(canvas.toDataURL())
                    })
                })
            })
    },
    // 绘制图片
     drawImg(src,type,left,top,width,height,fun){
      var img=new Image();    
      img.crossOrigin = 'Anonymous'; // 重点!设置image对象可跨域请求
      img.οnlοad=()=>{    
          this.ctx.drawImage(img,left,top,width,height);    
          fun&&fun();    
      };
 
        img.src =src+ "?timeStamp=" + new Date().getTime(); //解决缓存引起访问失败需要添加          
    },
   //下载二维码
    createPicture() {
      let domObj = document.getElementById("poster-qr");
      html2canvas(domObj, {
        backgroundColor: null,
      }).then((canvas) => {
        var imgData = canvas.toDataURL("image/jpeg");
        this.fileDownload(imgData, "二维码.jpg");
      });
    },

おすすめ

転載: blog.csdn.net/qq_33769914/article/details/119930624