nuri-qr-style
TypeScript icon, indicating that this package has built-in type declarations

1.1.5 • Public • Published

QR Code Styling

Version

JavaScript library for generating QR codes with a logo and styling.

Try it here https://qr-code-styling.com

If you have issues / suggestions / notes / questions, please open an issue or contact me. Let's create a cool library together.

Examples

Installation

npm install nuri-qr-style

Usage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QR Code Styling</title>
    <script type="text/javascript" src="https://unpkg.com/nuri-qr-style@1.1.4/lib/nuri-qr-style.js"></script>
</head>
<body>
<div id="canvas"></div>
<script type="text/javascript">

    const qrCode = new NuriQRStyle({
        width: 300,
        height: 300,
        type: "svg",
        data: "https://www.facebook.com/",
        image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
        dotsOptions: {
            color: "#4267b2",
            type: "rounded"
        },
        backgroundOptions: {
            color: "#e9ebee",
        },
        imageOptions: {
            crossOrigin: "anonymous",
            margin: 20
        }
    });

    qrCode.append(document.getElementById("canvas"));
    qrCode.download({ name: "qr", extension: "svg" });
    const qrCodeImage = qrCode.toData({  extension: "png" });
</script>
</body>
</html>


API

append(...)

append(container?: HTMLElement) => void
Param Type Description
container HTMLElement This container will be used for appending of the QR code

Returns: void


getRawData(...)

async getRawData(extension: Extension = "png") => Promise<Blob >
Param Type Default Value Description
extension string ('png' 'jpeg' 'webp' 'svg') 'png' Blob type on browser, Buffer type on Node

Returns: Promise< Blob >


update(...)

update(options?: Partial<Options>) => void
Param Type Description
options object The same options as for initialization

Returns: void


download(...)

async download(downloadOptions?: Partial<DownloadOptions> | string) => Promise<string>
Param Type Description
downloadOptions { name: "testtest", extension: "png" } Options with extension and name of file (not required)

Promise returned will resolve into the data URI of the QR code image. Returns: Promise< string >


toData(...)

async toData(downloadOptions?: Partial<DownloadOptions> | string) => Promise<string>
Param Type Description
downloadOptions { extension: "png" } Options with extension and name of file (not required)

The returned Promise returns the data of the QR code image as Base64Image. Returns: Promise< string >


API Documentation

NuriQRStyle instance

new NuriQRStyle(options) => NuriQRStyle

Param Type Description
options object Init object

options structure

Property Type Default Value Description
width number 300 Size of canvas
height number 300 Size of canvas
type string ('canvas' 'svg') canvas The type of the element that will be rendered
data string The date will be encoded to the QR code
image string The image will be copied to the center of the QR code
margin number 0 Margin around canvas
qrOptions object Options will be passed to qrcode-generator lib
imageOptions object Specific image options, details see below
dotsOptions object Dots styling options
cornersSquareOptions object Square in the corners styling options
cornersDotOptions object Dots in the corners styling options
backgroundOptions object QR background styling options
nodeCanvas node-canvas Only specify when running on a node server for canvas type, please refer to node section below
jsDom jsdom Only specify when running on a node server for svg type, please refer to node section below

options.qrOptions structure

Property Type Default Value
typeNumber number (0 - 40) 0
mode string ('Numeric' 'Alphanumeric' 'Byte' 'Kanji')
errorCorrectionLevel string ('L' 'M' 'Q' 'H') 'Q'

options.imageOptions structure

Property Type Default Value Description
hideBackgroundDots boolean true Hide all dots covered by the image
imageSize number 0.4 Coefficient of the image size. Not recommended to use ove 0.5. Lower is better
margin number 0 Margin of the image in px
crossOrigin string('anonymous' 'use-credentials') Set "anonymous" if you want to download QR code from other origins.
saveAsBlob boolean false Saves image as base64 blob in svg type, see bellow

When QR type is svg, the image may not load in certain applications as it is saved as a url, and some svg applications will not render url images for security reasons. Setting saveAsBlob to true will instead save the image as a blob, allowing it to render correctly in more places, but will also increase the file size.

options.dotsOptions structure

Property Type Default Value Description
color string '#000' Color of QR dots
gradient object Gradient of QR dots
type string ('rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded') 'square' Style of QR dots

options.backgroundOptions structure

Property Type Default Value
color string '#fff'
gradient object

options.cornersSquareOptions structure

Property Type Default Value Description
color string Color of Corners Square
gradient object Gradient of Corners Square
type string ('dot' 'square' 'extra-rounded') Style of Corners Square

options.cornersDotOptions structure

Property Type Default Value Description
color string Color of Corners Dot
gradient object Gradient of Corners Dot
type string ('dot' 'square') Style of Corners Dot

Gradient structure

options.dotsOptions.gradient

options.backgroundOptions.gradient

options.cornersSquareOptions.gradient

options.cornersDotOptions.gradient

Property Type Default Value Description
type string ('linear' 'radial') "linear" Type of gradient spread
rotation number 0 Rotation of gradient in radians (Math.PI === 180 degrees)
colorStops array of objects Gradient colors. Example [{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }]

Gradient colorStops structure

options.dotsOptions.gradient.colorStops[]

options.backgroundOptions.gradient.colorStops[]

options.cornersSquareOptions.gradient.colorStops[]

options.cornersDotOptions.gradient.colorStops[]

Property Type Default Value Description
offset number (0 - 1) Position of color in gradient range
color string Color of stop in gradient range


Node Support

You can use this on a node server by passing through the node-canvas or jsdom object depending if your creating a non-svg or svg respectively. You must pass both if using imageOptions.saveAsBlob.

Calling getRawData in node will return a Buffer instead of a Blob.

const { NuriQRStyle } = require("nuri-qr-style/lib/nuri-qr-style.common.js");
const nodeCanvas = require("canvas");
const { JSDOM } = require("jsdom");
const fs = require("fs");

const options = {
  width: 300,
  height: 300,
  data: "https://www.facebook.com/",
  image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
  dotsOptions: {
    color: "#4267b2",
    type: "rounded"
  },
  backgroundOptions: {
    color: "#e9ebee"
  },
  imageOptions: {
    crossOrigin: "anonymous",
    margin: 20
  }
};

// For canvas type
const qrCodeImage = new NuriQRStyle({
  nodeCanvas, // this is required
  ...options
});

qrCodeImage.getRawData("png").then((buffer) => {
  fs.writeFileSync("test.png", buffer);
});

// For svg type
const qrCodeSvg = new NuriQRStyle({
  jsdom: JSDOM, // this is required
  type: "svg",
  ...options
});

qrCodeSvg.getRawData("svg").then((buffer) => {
  fs.writeFileSync("test.svg", buffer);
});

// For svg type with the inner-image saved as a blob
// (inner-image will render in more places but file will be larger)
const qrCodeSvgWithBlobImage = new NuriQRStyle({
  jsdom: JSDOM, // this is required
  nodeCanvas, // this is required
  type: "svg",
  ...options,
  imageOptions: {
    saveAsBlob: true,
    crossOrigin: "anonymous",
    margin: 20
  }
});

qrCodeSvgWithBlobImage.getRawData("svg").then((buffer) => {
  fs.writeFileSync("test_blob.svg", buffer);
});

const imgData = await qrCodeSvgWithBlobImage.toData({ extension: "png" });

License

MIT License. Copyright (c) 2021 Denys Kozak

Package Sidebar

Install

npm i nuri-qr-style

Weekly Downloads

1

Version

1.1.5

License

MIT

Unpacked Size

172 kB

Total Files

44

Last publish

Collaborators

  • softnuri