qrLogoCode

功能描述

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

依赖模块

无

快速使用

  1. QrCodeWithLogo.toCanvas({
  2.     canvas: document.getElementById('canvas'),
  3.     content: 'https://www.baidu.com',
  4.     width: document.documentElement.clientWidth / 3 * 2,
  5. })
  6. QrCodeWithLogo.toCanvas({
  7.     canvas: document.getElementById('canvas1'),
  8.     content: 'https://www.baidu.com',
  9.     width: document.documentElement.clientWidth / 3 * 2,
  10.     logo: {
  11.         src: './img/head1.jpg'
  12.     }
  13. })
  14. QrCodeWithLogo.toCanvas({
  15.     canvas: document.getElementById('canvas2'),
  16.     content: 'https://www.baidu.com',
  17.     width: document.documentElement.clientWidth / 3 * 2,
  18.     logo: {
  19.         src: './img/head2.jpg',
  20.         logoSize: 0.2,
  21.         borderSize: 0
  22.     }
  23. })
  24. QrCodeWithLogo.toCanvas({
  25.     canvas: document.getElementById('canvas3'),
  26.     content: 'https://www.baidu.com',
  27.     width: document.documentElement.clientWidth / 3 * 2,
  28.     logo: {
  29.         src: './img/head4.jpg',
  30.         logoSize: 0.22
  31.     }
  32. })

配置项

canvas

  • 类型：HTMLCanvasElement
  • 默认值：null
  • 作用：二维码绘制区

  • 是否必传：是

    content

  • 类型：String

  • 默认值：none
  • 作用：二维码内容

  • 是否必传：是

    width

  • 类型：Number

  • 默认值：0
  • 作用：二维码的宽度，默认会随二维码内容的长度自动调整大小

  • 是否必传：否

    logo

  • 类型：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