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

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

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

 <div class="code">
            <img :src="imgUrl" id="qs" alt />
  </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;

 

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