vue中qrcanvas生成二维码并且下载二维码

vue中qrcanvas生成带logo二维码并且下载二维码

1.引入qrcanvas模块

cnpm install --save qrcanvas

//parkage.json 中引入 
"qrcanvas": "^3.1.2"
import { qrcanvas } from 'qrcanvas'

2.前端vue页面展示

 <el-buttonsize="mini"type="text"icon="el-icon-tickets"@click="generateQRCode(scope.row)">二维码</el-button>
<!--
展示二维码窗口
--><el-dialog:visible.sync="qrcodeDialogVisible"title="二维码"width="30%"center><div id="shareQrcode" ref="shareQrcode" class="share-qrcode" style="width:256px;margin:0 auto;"/><span slot="footer" class="dialog-footer"><el-button @click="qrcodeDialogVisible = false">关 闭</el-button><el-button type="primary" @click="downLoadQrcode">下载二维码</el-button></span></el-dialog>

3.js生成

设置属性

export default {name: 'ParkLot',props:{canvasWidth:{default:200,type:Number},canvasHeight:{default:200,type:Number}},data () {return {}}

js代码：

 //生成二维码generateQRCode(row){const uuids = "123456";/* getGenerateQrCode(uuids).then(response => {});*/this.troubleListName = row.troubleListNamethis.popQrcode(uuids)},// 点击下载按钮下载二维码图片downLoadQrcode() {let imgSrc, canvasif (document.getElementById('shareQrcode').childNodes[0]) {canvas = document.getElementById('shareQrcode').childNodes[0]imgSrc = this.CanvasToImage(canvas).getAttribute('src')const alink = document.createElement('a')alink.href = imgSrcalink.download = this.troubleListName + 'Qrcode.png'alink.click()}},// canvas 转换成图片, 从canvas中提取图片imageCanvasToImage(canvas) {// 新Image对象，可以理解为DOMvar image = new Image()// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持// 指定格式PNGimage.src = canvas.toDataURL('image/png')return image},popQrcode(uuid) {this.qrcodeDialogVisible = trueconst colorFore = '#0d0d0e'const colorOut = '#181717'const colorIn = '#111113'this.qrcode = ''this.$nextTick(() => {this.qrcode = qrcanvas({cellSize: 8,data: uuid,effect: { round: 0.4 },correctLevel: 'M',width: this.canvasWidth,//宽height: this.canvasHeight,//高foreground: [// 前景色{ style: colorFore },// 外方块位置{ row: 0, rows: 7, col: 0, cols: 7, style: colorOut },{ row: -7, rows: 7, col: 0, cols: 7, style: colorOut },{ row: 0, rows: 7, col: -7, cols: 7, style: colorOut },// 内方块位置{ row: 2, rows: 3, col: 2, cols: 3, style: colorIn },{ row: -5, rows: 3, col: 2, cols: 3, style: colorIn },{ row: 2, rows: 3, col: -5, cols: 3, style: colorIn }],background: '#f5f5f5',padding: 12})// 判断是否有子节点，如果已经有则删除原有的，然后再新增子节点if (document.getElementById('shareQrcode').childNodes[0]) {this.$refs.shareQrcode.removeChild(document.getElementById('shareQrcode').childNodes[0])}this.$refs.shareQrcode.appendChild(this.qrcode)console.log(this.qrcode)//生成logolet myCanvas = this.qrcodelet ctx = myCanvas.getContext('2d')// 在Canvas画布 添加图片let img = new Image()img.crossOrigin = 'Anonymous';//解决Canvas.toDataURL 图片跨域问题//图片路径img.src =  require('@/logo/123.png');img.onload = ()=>{//第一个设置的元素，第二三是位置，后面两个是宽和高let codeWidth = (this.canvasWidth-70)/2let codeHeight = (this.canvasHeight-70)/2ctx.drawImage(img, codeWidth, codeHeight,this.canvasWidth*0.25,this.canvasHeight*0.25)}})},