为了账号安全,请及时绑定邮箱和手机立即绑定

QRcode.js 生成二维码

2019.01.09 13:48 1824浏览

github官方文档指路:https://github.com/soldair/node-qrcode#options
QRcode方法介绍:
图片描述
这里只介绍后三种常用方法的使用:
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)
        })

图片描述

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

4人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消