Skip to content
Use HTML5 canvas draw QRCode
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
CHANGELOG.md
LICENSE
README.md
index.js
package.json
yarn.lock

README.md

QR-Code

Use HTML5 canvas draw QRCode

npm npm npm

Table of Contents

Installation

npm install @puckwang/qr-code

// or

yarn add @puckwang/qr-code

Usage

Example;

Example 1

import QrCode from "@puckwang/qr-code";

var qrCode = new QRCode();

qrCode.create('qrcode1', "Test123", {
    styleOptions: {
        fill: "#123456"
    },
    qrCodeOptions: {
        errorCorrectionLevel: "H"
    }
});

Imgur

Example 2

import QrCode from "@puckwang/qr-code";

var qrCode = new QRCode();

qrCode.create('qrcode1', "Puck go go", {
    styleOptions: {
        shape: 'roundedRect',
        fillType: 'linearGradient',
        fillGradient: {
            type: 'single',
            startPoint: {x: 0, y: 0},
            endPoint: {x: 300, y: 300},
            colorStops: [0, 'red', 1, 'green']
        }
    },
    qrCodeOptions: {
        errorCorrectionLevel: "H"
    }
});

Imgur

Example 3

import QrCode from "@puckwang/qr-code";

var qrCode = new QRCode();

qrCode.create('qrcode1', "Test123", {
    styleOptions: {
        backgroundColor: "#00f900",
        fill: "#008f00"
    }
});

Imgur

API

create(elemelt, text, [options])

elemelt

  • Type: String
  • Description: Id of div element

text

  • Type: String
  • Description: String to be converted to QR code

options

  • Type: Object
  • Description: This is use to setting QR code options and style options. see options

Options

qrCodeData

Setting QR code transform options.

Please refer to https://www.npmjs.com/package/qrcode#qr-code-options.

styleOptions

Setting render QR code options.

backgroundColor
  • Type: String
  • Description: Color of background of QR code.
  • Default: "#FFFFFF" (Withe)
fill
  • Type: String
  • Description: Color of dark of QR code.
  • Default: "#000000" (Black)
fills
  • Type: String[]
  • Description: Color array of dark of QR code, Use to fillRandom fill type.
  • Default: ["#000000", "#252525", "#3e3e3e", "#434343"]
fillType
  • Type: Enum(fill, linearGradient, circkeGradient, fillRandom)
  • Description: fill type of dark of QR code.
    • fill: fill with a color.
    • fillRandom: Random fill with multi color. (You need set fills)
    • linearGradient: Fill linear gradient color. (You need set fillGradient)
    • circkeGradient: Fill radial gradient color. (You need set fillGradient)
  • Default: "fill"
size
  • Type: Integer
  • Description: QR code size, it will automatically fine-tune according to the actual situation.
  • Default: 300
borderSize
  • Type: Integer
  • Description: Size of border of QR code, it will automatically fine-tune according to the actual situation.
  • Default: 15
shape
  • Type: Enum(rect, roundedRect, circle, leaf)
  • Description: Shape of drak of QR code.
  • Default: "rect"
fillGradient
  • Type: Object
    • type: singlemulti
    • startPoint: {x: 0, y: 0}
    • `startRadius: 0
    • endPoint: {x: 0, y: 0}
    • endRadius: 0
    • colorStops: [0, 'red', 1, 'green']
  • Description: Fill gradient color options. see Canvas Linear Gradient and Canvas Radial Gradient
  • Default:
{
   type: 'single',
   startPoint: {x: 0, y: 0},
   startRadius: 0,
   endPoint: {x: 0, y: 0},
   endRadius: 0,
   colorStops: [0, 'red', 1, 'green']
}

download(name, [pixelRatio])

name

  • Type: String
  • Description: Name of file
  • Example: qrcode.png

pixelRatio

Support

Please open an issue for support.

Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.

You can’t perform that action at this time.