在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;

以上代码均为原创，望广大前辈指出不足，欢迎指正。

标签：canvas,vue,dataURL,生成,html2canvas,二维码,QRCode
来源： https://www.cnblogs.com/bingchenzhilu/p/11362540.html