js 生成二维码_QRcode.js 生成二维码

987cbc0b2a0121decb0b34ae52e056e6.png

github官方文档指路:https://github.com/soldair/node-qrcode#options

QRcode方法介绍:

9a2060475befa94d6db188ddfdc90636.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)
        })

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

b374648d52f6467413ad61b13284f6da.png

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

0aef1fd0ad745349e9cb69c1d0110b31.png

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

2550872664c1b57c028e776ba1d83351.png

作者:zhangfl_go

链接:https://www.imooc.com/article/272781

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值