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

QRcode.js 生成二维码

标签:
Html5 JavaScript

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人点赞

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

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
28
获赞与收藏
163

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消