在vue中使用QRCode和html2canvas生成海報以及二維碼

在vue項目中，有時候會用到生成海報，掃描二維碼的功能，大部分都是用到canvas,在vue中有現成的依賴可用，即須要QRCode、html2canvas等，如下是一個小案例的真實使用過程，如有不足，歡迎指正。

在vue中使用QRCode生成二維碼：如下是生成二維碼的代碼片斷

1  <div class="code">
2             <img :src="imgUrl" id="qs" alt />
3   </div>

如下是生成二維碼的方法

 Change() {
      let img = $("#qs");
      let canvas = document.createElement("canvas");
      canvas.width = "100%";
      canvas.height = "100%";
      QRCode.toCanvas(canvas, this.qrCodeUrl, error => {
        if (error) {
          console.log(error);
        } else {
          this.imgUrl = canvas.toDataURL("image/jpeg");
        }
      });
    },

　　以上代碼是在該頁面的created中調用

也在created中調用

  <img :src="dataURL"  id='poster' alt />

  toImage() {
      html2canvas(this.$refs.courseInfo, {
        // backgroundColor: null
      }).then(canvas => {
        let dataURL = canvas.toDataURL("image/png");
        this.dataURL = dataURL;
      });
    }
//以上代碼是將整個頁面轉換成圖片

　　整個代碼片斷以下：

<template>
  <div class="bycourse">
    <div class="alert" ref="courseInfo"  >
      <div class="pic">
        <div class="pic_center">
          <div class="nickname">{{text}}</div>
          <div class="code">
            <img :src="imgUrl" id="qs" alt />
          </div>
        </div>
      </div>
    </div>
    <img :src="dataURL"  id='poster' alt />
  </div>
</template>

　　其中定義的data:

 data() {
    return {
        dataURL: ""//整個頁面生成的圖片,
      	qrCodeUrl:"  "//掃描二維碼以後跳轉的頁面,
        imgUrl:'',//二維碼
        text:'個人暱稱'
    };
  }，　　

在使用生成二維碼功能的時候，須要注意的是：

若出現如下錯誤，則通常是使用到三元表達式，而且不可以使用v-if 以及v-else等指令，而且爲了截圖功能的完整，儘可能避免使用overflow:hidden;

 

以上代碼均爲原創，望廣大前輩指出不足，歡迎指正。