HerbLuo / Qr Code With Logo

带Logo的QR Code(二维码)生成工具

注：当前版本的node-qrcode已支持调整大小，大家可以直接往生成的二维码上覆盖Logo即可。

对node-qrcode的再封装，支持Logo，支持调整大小

一、支持列表

• 支持npm方式引用，
• 支持直接<script>方式引用
• 支持vue
• 支持react
• 支持IE9+
• 等

二、使用方法：

1.npm:

npm i --save qr-code-with-logo

import QrCodeWithLogo from 'qr-code-with-logo'
import LocalImage from './Avatar.png'

const myCanvas = document.createElement('canvas')
document.body.appendChild(myCanvas)

QrCodeWithLogo.toCanvas({
  canvas: myCanvas,
  content: 'https://cdn.blog.cloudself.cn',
  width: 380,
  logo: {
    src: LocalImage,
    // src: 'https://cdn.blog.cloudself.cn/images/avatar.png',
    radius: 8
  }
})

更多示例代码参见此处

2.<script>标签形式, 点此处下载该文件

<canvas id="canvas"></canvas>

<!-- 有对 promise的依赖，如不考虑兼容，可尝试删除该依赖 -->
<script src="//www.promisejs.org/polyfills/promise-6.1.0.js"></script>
<!-- 将上方下载的文件放置于js文件夹下 -->
<script src="./js/qr-code-with-logo.browser.min.js"></script>
<script>
  QrCodeWithLogo.toCanvas({
    canvas: document.getElementById('canvas'), // 换成你的canvas节点
    content: 'https://cdn.blog.cloudself.cn/',
    width: 380,
    logo: {
      src: 'https://cdn.blog.cloudself.cn/images/avatar.png',
    }
  })
</script>

三、API

目前只能将QrCode转换成Canvas输出

QrCodeWithLogo.toCanvas({/* CanvasOptions */})
  .then(_ => console.log('success'))

或者将QrCode转换成Image输出，不过它也是基于Canvas的

QrCodeWithLogo.toImage({/* ImageOptions */})
  .then(_ => console.log('success'))

其中toCanvas的参数为一个对象，它包含特有的属性 CanvasOptions，以及公共的属性 BaseOptions

toImage的参数同为一个对象，它包含特有的属性 ImageOptions，以及公共的属性 BaseOptions

1. CanvasOptions

canvas

Type: DOMElement

配置dom节点，只允许为<canvas>，不可为<div>等

2. ImageOptions

image

Type: DOMElement

可选的，配置dom节点，只允许为<image>，不可为<div>等

download

Type: boolean
Default: false

可选，为true的时候，以文件的形式输出

downloadName

Type: string
Default: qr-code.png

可选，下载时，图片的文件名

3. BaseOptions

content

Type: string

二维码的内容

width

Type: number
Default: 0

可选，二维码的宽度(默认会随二维码内容的长度自动调整大小)

logo

Type: string | Logo Logo为js对象

可选，可以为字符串（代表src），也可以为对象，其中Logo对象的具体属性有

• src

  Type: string

  Logo地址，（可以是远程的，也可以是本地的base64图片）当存在跨域时，该二维码（canvas）无法 toDataURL，亦无法使用JS转换成 image

• crossOrigin

  Type: string
  Default: 'Anonymous'

  可选，一般不必修改，默认为 'Anonymous'

• logoRadius

  Type: number

  可选，logo的 radius，如果配置了它，存在跨域时，Logo可能会加载失败

• logoSize

  Type: number Default: 0.15

  可选，logo的 大小，范围在 0-1之间，代表logo在二维码中的比例 与 borderSize 共同组成了 logo的大小，他们的关系相当于标准盒模型

• borderRadius

  Type: number Default: 8

  可选，logo的边框的 radius

• borderSize

  Type: number Default: 0.05

  可选，border的 大小，范围在 0-1之间，代表border在二维码中的比例 与 logoSize 共同组成了 logo的大小，他们的关系相当于标准盒模型

• bgColor

  Alias: borderColor
  Type: string
  Default: '#ffffff'

  可选，logo的背景色，可以为 'transparent'(透明)

nodeQrCodeOptions

Type: NodeQrCodeOptions node-qrcode的参数，参见

可选，本项目基于node-qrcode，并对其配置参数兼容，其中常用参数的有

• margin

  Type: number
  Default: 4

  可选，二维码的外边框大小，单位是单块二维码的像素

• errorCorrectionLevel

  Type: 'L' | 'M' | 'Q' | 'H'

  二维码容错率，
  默认情况下，
  当二维码文本长度大余36字符，采用 M(中)，
  小于16，采用 H(高)，
  否则采用Q

• color.dark

  Type: string
  Default: '#000000ff' RGBA, IE下仅支持RGB

  可选，二维码的前景色

• color.light

  Type: string
  Default: '#000000ff'

  可选，二维码的背景色

四：其它

1. 如果控制台报错 “Promise”未定义
   添加如下代码即可

   import Promise from 'es6-promise'
   if (typeof window.Promise === 'undefined') {
     window.Promise = Promise
   }