Nifty Procrastination Machine

npm

Need private packages and team management tools?Check out npm Orgs. »

@puckwang/qr-code

1.0.5 • Public • Published

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.

Keywords

install

npm i @puckwang/qr-code

Downloadsweekly downloads

6

version

1.0.5

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability