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/11/18