@liquid-js/qr-code-styling
    Preparing search index...

    Interface Options

    interface Options {
        document: Document;
        imageTools?: {
            toDataURL: (
                url: string | Buffer<ArrayBufferLike> | Blob,
            ) => Promise<string>;
            getSize: (
                src: string | Buffer<ArrayBufferLike> | Blob,
                crossOrigin?: string,
            ) => Promise<{ width: number; height: number }>;
        };
        data: string;
        image?: string
        | Buffer<ArrayBufferLike>
        | Blob;
        shape: "square" | "circle";
        qrOptions: {
            typeNumber: TypeNumber;
            mode?: "numeric" | "alphanumeric" | "byte" | "kanji" | "unicode";
            errorCorrectionLevel: "L" | "M" | "Q" | "H";
        };
        imageOptions: {
            mode: "center"
            | "overlay"
            | "background";
            fill: { color: string; gradient?: Gradient };
            imageSize: number;
            margin: number;
            crossOrigin?: string;
        };
        dotsOptions: {
            size: number;
            color: string;
            gradient?: Gradient;
            type: | "dot"
            | "random-dot"
            | "rounded"
            | "extra-rounded"
            | "vertical-line"
            | "horizontal-line"
            | "classy"
            | "classy-rounded"
            | "square"
            | "small-square"
            | "tiny-square"
            | "diamond"
            | "wave"
            | "heart"
            | "star"
            | "weave"
            | "pentagon"
            | "hexagon"
            | "zebra-horizontal"
            | "zebra-vertical"
            | "blocks-horizontal"
            | "blocks-vertical";
        };
        cornersSquareOptions?: {
            color?: string;
            gradient?: Gradient;
            type?: | "dot"
            | "random-dot"
            | "rounded"
            | "extra-rounded"
            | "vertical-line"
            | "horizontal-line"
            | "classy"
            | "classy-rounded"
            | "square"
            | "small-square"
            | "tiny-square"
            | "diamond"
            | "wave"
            | "heart"
            | "star"
            | "weave"
            | "pentagon"
            | "hexagon"
            | "zebra-horizontal"
            | "zebra-vertical"
            | "blocks-horizontal"
            | "blocks-vertical"
            | "inpoint"
            | "outpoint"
            | "center-circle";
        };
        cornersDotOptions?: {
            color?: string;
            gradient?: Gradient;
            type?: | "dot"
            | "random-dot"
            | "rounded"
            | "extra-rounded"
            | "vertical-line"
            | "horizontal-line"
            | "classy"
            | "classy-rounded"
            | "square"
            | "small-square"
            | "tiny-square"
            | "diamond"
            | "wave"
            | "heart"
            | "star"
            | "weave"
            | "pentagon"
            | "hexagon"
            | "zebra-horizontal"
            | "zebra-vertical"
            | "blocks-horizontal"
            | "blocks-vertical"
            | "inpoint"
            | "outpoint";
        };
        backgroundOptions?: | false
        | { round?: number; color?: string; gradient?: Gradient; margin?: number };
        stringToBytesFuncs?: { [encoding: string]: (s: string) => number[] };
        plugins?: Plugin[];
    }
    Index

    Properties

    document imageTools? data image? shape qrOptions imageOptions dotsOptions cornersSquareOptions? cornersDotOptions? backgroundOptions? stringToBytesFuncs? plugins?

    Properties

    document: Document

    Use a custom DOM domplementation

    imageTools?: {
        toDataURL: (
            url: string | Buffer<ArrayBufferLike> | Blob,
        ) => Promise<string>;
        getSize: (
            src: string | Buffer<ArrayBufferLike> | Blob,
            crossOrigin?: string,
        ) => Promise<{ width: number; height: number }>;
    }

    Use a custom image fetching & serializaton implementation

    data: string

    The data will be encoded in the QR code

    image?: string | Buffer<ArrayBufferLike> | Blob

    The image will be copied to the center of the QR code

    shape: "square" | "circle"

    QR code shape

    ShapeType.square
    qrOptions: {
        typeNumber: TypeNumber;
        mode?: "numeric" | "alphanumeric" | "byte" | "kanji" | "unicode";
        errorCorrectionLevel: "L" | "M" | "Q" | "H";
    }

    Options will be passed to @liquid-js/qrcode-generator lib

    Type Declaration

    • typeNumber: TypeNumber
    • Optionalmode?: "numeric" | "alphanumeric" | "byte" | "kanji" | "unicode"
    • errorCorrectionLevel: "L" | "M" | "Q" | "H"
      ErrorCorrectionLevel.Q
    imageOptions: {
        mode: "center" | "overlay" | "background";
        fill: { color: string; gradient?: Gradient };
        imageSize: number;
        margin: number;
        crossOrigin?: string;
    }

    Type Declaration

    • mode: "center" | "overlay" | "background"

      Image mode

      ImageMode.center
    • fill: { color: string; gradient?: Gradient }

      Fill blank areas of the code with selected color

      • color: string

        Color of QR dots

        "rgba(255,255,255,0.75)"
      • Optionalgradient?: Gradient

        Gradient of Corners Dot

    • imageSize: number

      Coefficient of the image size

      0.4
    • margin: number

      Margin of the image (in blocks)

      0
    • OptionalcrossOrigin?: string

      MDN Reference

    dotsOptions: {
        size: number;
        color: string;
        gradient?: Gradient;
        type:
            | "dot"
            | "random-dot"
            | "rounded"
            | "extra-rounded"
            | "vertical-line"
            | "horizontal-line"
            | "classy"
            | "classy-rounded"
            | "square"
            | "small-square"
            | "tiny-square"
            | "diamond"
            | "wave"
            | "heart"
            | "star"
            | "weave"
            | "pentagon"
            | "hexagon"
            | "zebra-horizontal"
            | "zebra-vertical"
            | "blocks-horizontal"
            | "blocks-vertical";
    }

    Type Declaration

    • size: number

      QR dot size (in pixels)

      10
    • color: string

      Color of QR dots

      "#000"
    • Optionalgradient?: Gradient

      Gradient of QR dots

    • type:
          | "dot"
          | "random-dot"
          | "rounded"
          | "extra-rounded"
          | "vertical-line"
          | "horizontal-line"
          | "classy"
          | "classy-rounded"
          | "square"
          | "small-square"
          | "tiny-square"
          | "diamond"
          | "wave"
          | "heart"
          | "star"
          | "weave"
          | "pentagon"
          | "hexagon"
          | "zebra-horizontal"
          | "zebra-vertical"
          | "blocks-horizontal"
          | "blocks-vertical"

      Style of QR dots

      DotType.square
    cornersSquareOptions?: {
        color?: string;
        gradient?: Gradient;
        type?:
            | "dot"
            | "random-dot"
            | "rounded"
            | "extra-rounded"
            | "vertical-line"
            | "horizontal-line"
            | "classy"
            | "classy-rounded"
            | "square"
            | "small-square"
            | "tiny-square"
            | "diamond"
            | "wave"
            | "heart"
            | "star"
            | "weave"
            | "pentagon"
            | "hexagon"
            | "zebra-horizontal"
            | "zebra-vertical"
            | "blocks-horizontal"
            | "blocks-vertical"
            | "inpoint"
            | "outpoint"
            | "center-circle";
    }

    Corners Square options, omitted values match dots

    Type Declaration

    • Optionalcolor?: string

      Color of Corners Square

    • Optionalgradient?: Gradient

      Gradient of Corners Square

    • Optionaltype?:
          | "dot"
          | "random-dot"
          | "rounded"
          | "extra-rounded"
          | "vertical-line"
          | "horizontal-line"
          | "classy"
          | "classy-rounded"
          | "square"
          | "small-square"
          | "tiny-square"
          | "diamond"
          | "wave"
          | "heart"
          | "star"
          | "weave"
          | "pentagon"
          | "hexagon"
          | "zebra-horizontal"
          | "zebra-vertical"
          | "blocks-horizontal"
          | "blocks-vertical"
          | "inpoint"
          | "outpoint"
          | "center-circle"

      Style of Corners Square

    cornersDotOptions?: {
        color?: string;
        gradient?: Gradient;
        type?:
            | "dot"
            | "random-dot"
            | "rounded"
            | "extra-rounded"
            | "vertical-line"
            | "horizontal-line"
            | "classy"
            | "classy-rounded"
            | "square"
            | "small-square"
            | "tiny-square"
            | "diamond"
            | "wave"
            | "heart"
            | "star"
            | "weave"
            | "pentagon"
            | "hexagon"
            | "zebra-horizontal"
            | "zebra-vertical"
            | "blocks-horizontal"
            | "blocks-vertical"
            | "inpoint"
            | "outpoint";
    }

    Corners Dot options, omitted values match squares

    Type Declaration

    • Optionalcolor?: string

      Color of Corners Dot

    • Optionalgradient?: Gradient

      Gradient of Corners Dot

    • Optionaltype?:
          | "dot"
          | "random-dot"
          | "rounded"
          | "extra-rounded"
          | "vertical-line"
          | "horizontal-line"
          | "classy"
          | "classy-rounded"
          | "square"
          | "small-square"
          | "tiny-square"
          | "diamond"
          | "wave"
          | "heart"
          | "star"
          | "weave"
          | "pentagon"
          | "hexagon"
          | "zebra-horizontal"
          | "zebra-vertical"
          | "blocks-horizontal"
          | "blocks-vertical"
          | "inpoint"
          | "outpoint"

      Style of Corners Dot

    backgroundOptions?:
        | false
        | { round?: number; color?: string; gradient?: Gradient; margin?: number }

    QR background styling options, false to disable background

    Type Declaration

    • false
    • { round?: number; color?: string; gradient?: Gradient; margin?: number }
      • Optionalround?: number

        Background roundnes, from 0 (square) to 1 (circle)

      • Optionalcolor?: string

        Background color

      • Optionalgradient?: Gradient

        Background Gradient

      • Optionalmargin?: number

        Margin (in blocks) between background and the QR code

        0
    stringToBytesFuncs?: { [encoding: string]: (s: string) => number[] }

    import { stringToBytesFuncs } from "@liquid-js/qr-code-styling/kanji"; to add Kanji support

    plugins?: Plugin[]

    Settings

    Member Visibility

    On This Page

    Properties