在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;
以上代码均为原创,望广大前辈指出不足,欢迎指正。