qrLogoCode

功能描述

qrLogoCode是轻量级二维码生成器,基于原生js,支持logo嵌入

依赖插件

快速使用

QrCodeWithLogo.toCanvas({
    canvas: document.getElementById('canvas'),
    content: 'https://www.baidu.com',
    width: document.documentElement.clientWidth / 3 * 2,
})
QrCodeWithLogo.toCanvas({
    canvas: document.getElementById('canvas1'),
    content: 'https://www.baidu.com',
    width: document.documentElement.clientWidth / 3 * 2,
    logo: {
        src: './img/head1.jpg'
    }
})
QrCodeWithLogo.toCanvas({
    canvas: document.getElementById('canvas2'),
    content: 'https://www.baidu.com',
    width: document.documentElement.clientWidth / 3 * 2,
    logo: {
        src: './img/head2.jpg',
        logoSize: 0.2,
        borderSize: 0
    }
})
QrCodeWithLogo.toCanvas({
    canvas: document.getElementById('canvas3'),
    content: 'https://www.baidu.com',
    width: document.documentElement.clientWidth / 3 * 2,
    logo: {
        src: './img/head4.jpg',
        logoSize: 0.22
    }
})

配置项

canvas

  • 类型:HTMLCanvasElement
  • 默认值:null
  • 作用:二维码绘制区
  • 是否必传:是

content

  • 类型:String
  • 默认值:none
  • 作用:二维码内容
  • 是否必传:是

width

  • 类型:Number
  • 默认值:0
  • 作用:二维码的宽度,默认会随二维码内容的长度自动调整大小
  • 是否必传:否
  • 类型:Object
  • 默认值:无
  • 作用:logo配置
  • 是否必传:否

logo.src

  • 类型:String
  • 默认值:无
  • 作用:logo路径(支持远程和本地)
  • 是否必传:否

logo.logoSize

  • 类型:Number
  • 默认值:0.15
  • 作用:logo的 大小,范围在 0-1之间
  • 是否必传:否

logo.borderSize

  • 类型:Number
  • 默认值:0.05
  • 作用:border的 大小,范围在 0-1之间
  • 是否必传:否

特别说明

更多配置和用法,请参考qr-code-with-logo

是否仍需要帮助? 请保持联络!
最后更新于 2024/10/21