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);
    }