DOCSEARCHbyAlgolia
Submit Docs

qr-code-styling

repository·master·Indexed 25 days ago

https://github.com/kozakdenys/qr-code-styling

A JavaScript library for generating highly customizable QR codes. It supports adding logos, custom shapes, gradients, and various styling options for dots and corners. The library allows rendering as canvas or SVG and provides methods for updating, downloading, and exporting QR codes in formats such as PNG, JPEG, WebP, and SVG. It is compatible with both browser and Node.js environments (requiring jsdom and node-canvas for the latter).

Tokens
3.3K
Snippets
4
Records
23
Agent score
82%

What's inside qr-code-styling

  1. Use QRCodeStyling in Node.js

    master

    To use qr-code-styling on a Node.js server, you must provide jsdom and node-canvas. If using imageOptions.saveAsBlob, you must provide both. getRawData will return a Buffer instead of a Blob in Node.js.

    const { QRCodeStyling } = require("qr-code-styling/lib/qr-code-styling.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 QRCodeStyling({
    jsdom: JSDOM, // this is required
    nodeCanvas, // this is required
    ...options,
    imageOptions: {
        saveAsBlob: true,
        crossOrigin: "anonymous",
        margin: 20
    },
});

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

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

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

  4. Configure dotsOptions

    master

    The dotsOptions object defines the styling for the QR code dots:

    • color (string, default: '#000'): Color of QR dots
    • gradient (object): Gradient of QR dots
    • type (string, default: 'square'): Style of QR dots. Options: 'rounded', 'dots', 'classy', 'classy-rounded', 'square', 'extra-rounded'
    • roundSize (boolean, default: true): Whether to round dots size to integer.

  5. Configure imageOptions

    master

    The imageOptions object controls how the center image is rendered:

    • hideBackgroundDots (boolean, default: true): Hide all dots covered by the image
    • imageSize (number, default: 0.4): Coefficient of the image size (not recommended above 0.5)
    • margin (number, default: 0): Margin of the image in px
    • crossOrigin (string: 'anonymous' | 'use-credentials'): Set to 'anonymous' to download QR codes from other origins
    • saveAsBlob (boolean, default: true): If true, saves image as a base64 blob in SVG type. This helps render images in more applications that block external URLs in SVGs, but increases file size.

  7. Configure cornersDotOptions

    master

    The cornersDotOptions object defines the styling for the dots in the corners:

    • color (string): Color of Corners Dot
    • gradient (object): Gradient of Corners Dot
    • type (string): Style of Corners Dot. Options: 'dot', 'square', 'rounded', 'dots', 'classy', 'classy-rounded', 'extra-rounded'

  8. Configure gradient

    master

    Gradients can be applied to dotsOptions, backgroundOptions, cornersSquareOptions, and cornersDotOptions. A gradient object contains:

    • type (string, default: 'linear'): Type of gradient spread ('linear' or 'radial')
    • rotation (number, default: 0): Rotation of gradient in radians
    • colorStops (array of objects): Array of color stops. Each object contains:
      • offset (number, 0 - 1): Position of color in gradient range
      • color (string): Color of stop

    Example colorStops: [{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }]

  9. Configure cornersSquareOptions

    master

    The cornersSquareOptions object defines the styling for the squares in the corners:

    • color (string): Color of Corners Square
    • gradient (object): Gradient of Corners Square
    • type (string): Style of Corners Square. Options: 'dot', 'square', 'extra-rounded', 'rounded', 'dots', 'classy', 'classy-rounded'

  10. Configure QRCodeStyling options

    master

    The QRCodeStyling constructor accepts an object with the following top-level properties:

    • width (number, default: 300): Size of canvas
    • height (number, default: 300): Size of canvas
    • type (string: 'canvas' | 'svg', default: 'canvas'): The type of the element that will be rendered
    • shape (string: 'square' | 'circle', default: 'square'): The shape of the qr-code; circle shape adds random extra dots around
    • data (string): The data to be encoded
    • image (string): The image URL to be copied to the center
    • margin (number, default: 0): Margin around canvas
    • qrOptions (object): Options passed to the qrcode-generator library
    • imageOptions (object): Specific image options
    • 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): Required for Node.js environments (canvas type)
    • jsDom (jsdom): Required for Node.js environments (svg type)

  11. Initialize QRCodeStyling with options

    master

    Create a new instance of QRCodeStyling by passing an options object. This object allows you to configure the size, type (canvas or svg), data, image, and various styling options for dots, corners, and backgrounds.

    const qrCode = new QRCodeStyling({
    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
    }
});

  12. Use QRCodeStyling methods

    master

    The QRCodeStyling instance provides several methods for interaction:

    • append(container): Appends the QR code to a specified DOM element.
    • update(options): Updates the QR code with new options (same structure as initialization).
    • download(downloadOptions): Downloads the QR code. downloadOptions can include name (default: 'qr') and extension ('png', 'jpeg', 'webp', 'svg'). Returns a Promise.
    • getRawData(extension): Returns a Promise resolving to a Blob (browser) or Buffer (Node) of the specified extension ('png', 'jpeg', 'webp', 'svg').
    • applyExtension(extension): Applies a custom extension function to the SVG. The extension is a function (svg, options) => void that modifies the SVG.
    • deleteExtension(): Removes the last applied extension.