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

r囧r小猫 2024-02-05 15:53 128阅读 0赞

#### 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)
            }
          })
        },

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