前端生成二维码，qrcode使用说明，canvas查看大图

生成二维码

用于vue项目通过字符串转换生成二维码的三方插件

安装插件

npm install --save qrcode

引入使用

import QRCode from "qrcode"

页面

<!-- 放置二维码的容器-->
<canvas :id="'qrCode_id' + stringxxxxx" class="qrCode_style"></canvas>
<!-- 可为二维码添加点击事件（点击查看大图）-->
<!-- @click="qrClick('qrCode_id' + stringxxxxx, 'single')"-->

样式

.qrCode_style {
    width: 100px !important;
    height: 100px !important;
}

方法

通过放置canvas填充内容方式实现

methods:{
    // 生成二维码方法（核心方法）
    qrFunction(id, qrString) {
        console.log('调用', id)
            let opts = {
            errorCorrectionLevel: 'H', //容错级别
            type: 'image/png', //生成的二维码类型
            quality: 1, //二维码质量
            margin: 2, //二维码留白边距
            width: 900, //宽
            height: 900, //高
            text: '', //二维码内容
            color: {
                dark: '#333333', //前景色
                light: '#fff', //背景色
            },
        }
        this.QRCodeMsg = qrString //生成的二维码为URL地址js
            // this.QRCodeMsg = Math.random() + '' //生成的二维码为URL地址js
            let msg = document.getElementById(id)
            // 将获取到的数据（val）画到msg（canvas）上
            QRCode.toCanvas(msg, this.QRCodeMsg, opts, (error) => {
                // this.getBase64Image(id)
            })
    },

    // 点击查看大图方法（可选）
    qrClick(id, ref) {
        this.urls = []
            this.urls.push(this.getBase64Image(id))
        /**查看大图方法
        **
        **       写这里
        **
        */
    },
    // 获取base64格式图片（可选）
    getBase64Image(id) {
        let canvas = document.getElementById(id)
            // 使用画布生成 base64 的方法
            let dataUrl = canvas.toDataURL('image/png')
            return dataUrl
    },
}

方法执行

// 找个地方执行方法
mounted() {
    this.$nextTick(() => {
        this.qrFunction('qrCode_id' + stringxxxxx, 内容)
    })
},

上面的变量需要自己声明，查看大图的方法需要自己根据情况编写