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

在vue中使用QRCode和html2canvas生成海报以及二维码

 

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

 

上一篇:H5 图片裁剪 - cropper 插件使用


下一篇:Vue统一写接口开头