QRcode.js 生成二维码

拈花ヽ惹草 提交于 2020-11-26 08:27:21

github官方文档指路:https://github.com/soldair/node-qrcode#options
QRcode方法介绍:
image.png
这里只介绍后三种常用方法的使用:

1、toCanvas 顾名思义是讲二维码生成canvas
用法实例:

//1、引入QRcode.js
<script src='qrcode.js'></script>
//2、具体用法
 QRCode.toCanvas('二维码信息文本', {
            errorCorrectionLevel: "L",//容错率L(低)H(高)
            margin: 1,//二维码内边距,默认为4。单位px
            height: 200,//二维码高度
            width: 200,//二维码宽度
            scal: 177,
            color: {
                dark: '#000', // 二维码背景颜色
                // light: '#000' // 二维码前景颜色
            },
            rendererOpts: {
                quality: 0.9
            }
        }).then(canvas => {
            console.log(canvas)
            document.getElementById('myqrcode').append(canvas)
        }).catch((err) => {
            console.log(err)
        })

背景和前景颜色不可以相近,不然有的设备上会识别不出来二维码

2、toDataURL()生成base64字符串 用法实例:

QRCode.toDataURL('sss', {
            errorCorrectionLevel: "L",
            margin: 1,
            height: 200,
            width: 200,
            type: "10",
            scal: 177,
            type: "10",
            color: {
                dark: '#000', // 二维码背景颜色
                // light: '#000' // 二维码前景颜色
            },
            rendererOpts: {
                quality: 0.9
            }
        }).then(base64 => {
            console.log(base64);//base64字符串
        }).catch((err) => {
            console.log(err)
        })

3、toString()生成svg二进制字符

 QRCode.toString('sss', {
            errorCorrectionLevel: "L",
            margin: 1,
            height: 200,
            width: 200,
            type: "10",
            scal: 177,
            type: "10",
            color: {
                dark: '#000', // 二维码背景颜色
                // light: '#000' // 二维码前景颜色
            },
            rendererOpts: {
                quality: 0.9
            }
        }).then(canvas => {
            console.log(canvas)
            document.getElementById('myqrcode').append(canvas)
        }).catch((err) => {
            console.log(err)
        })

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!