GithubHelp home page GithubHelp logo

qr-code-with-logo's Introduction

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

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

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

Example Picture


一、支持列表

  • 支持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
    }

qr-code-with-logo's People

Contributors

HerbLuo avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.