Vue合成广告图片+二维码图片

主要用到两个库：

qrcanvas和

html2canvas

 

1.先生成二维码覆盖在广告图上面

2.html转canvas canvas转成base64图片

3.广告图src替换为base64

注意：微信内不支持保存canvas为图片，所以多了第三步

 

    async generateQrcode() {
      this.showQr = true;
      let canvas1 = qrcanvas({
        data: decodeURIComponent(
          "http://xiaoshuiw.com/jxjy_app/user/register?code=188"
        ),
        size: 80
      });
      setTimeout(() => {
        this.$refs.ttt.appendChild(canvas1);
        html2canvas(this.$refs.qrmain,{backgroundColor: null}).then(canvas => {
          this.$refs.ttt.innerHTML=""
          this.$refs.img.src=canvas.toDataURL("image/png")
      
        });
      }, 100);
    }