zoukankan      html  css  js  c++  java
  • QRcode.js 生成二维码

    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,//二维码高度
                 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,
                 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,
                 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)
            })
    

  • 相关阅读:
    vue2查看大图vue-preview使用笔记
    promise使用场景
    vue2移动端使用vee-validate进行表单验证
    移动端单位换算理解
    ...
    我的promise学习笔记
    前端本地调试解决跨域的两种方法
    vue2 零星笔记
    vue2.x使用百度地图
    BZOJ 3368 约翰看山(扫描)O(N)
  • 原文地址:https://www.cnblogs.com/angfl/p/10243886.html
Copyright © 2011-2022 走看看