亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

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下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消