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

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

1.引入qrcanvas模块

cnpm install --save qrcanvas

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

2.前端vue页面展示

 <el-button
            size="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.troubleListName
      this.popQrcode(uuids)
    },

    // 点击下载按钮下载二维码图片
    downLoadQrcode() {
      let imgSrc, canvas
      if (document.getElementById('shareQrcode').childNodes[0]) {
        canvas = document.getElementById('shareQrcode').childNodes[0]
        imgSrc = this.CanvasToImage(canvas).getAttribute('src')
        const alink = document.createElement('a')
        alink.href = imgSrc
        alink.download = this.troubleListName + 'Qrcode.png'
        alink.click()
      }
    },
    // canvas 转换成图片, 从canvas中提取图片image
    CanvasToImage(canvas) {
      // 新Image对象，可以理解为DOM
      var image = new Image()
      // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
      // 指定格式PNG
      image.src = canvas.toDataURL('image/png')
      return image
    },
    popQrcode(uuid) {
      this.qrcodeDialogVisible = true
      const 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)
        //生成logo
        let myCanvas = this.qrcode
        let 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)/2
          let codeHeight = (this.canvasHeight-70)/2
          ctx.drawImage(img, codeWidth, codeHeight,this.canvasWidth*0.25,this.canvasHeight*0.25)
        }
      })
    },

我是一个后端开发人员，前端写的有什么问题，欢迎大家来指点我一下。。。。。。