Interface Options

interface Options {
    document: Document;
    imageTools?: {
        toDataURL: (url: string | Buffer | Blob) => Promise<string>;
        getSize: (
            src: string | Buffer | Blob,
            crossOrigin?: string,
        ) => Promise<{ width: number; height: number }>;
    };
    data: string;
    image?: string
    | Buffer
    | 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";
    };
    cornersSquareOptions?: {
        color?: string;
        gradient?: Gradient;
        type?: | "dot"
        | "extra-rounded"
        | "classy"
        | "square"
        | "outpoint"
        | "inpoint";
    };
    cornersDotOptions?: {
        color?: string;
        gradient?: Gradient;
        type?: | "dot"
        | "extra-rounded"
        | "classy"
        | "square"
        | "heart"
        | "outpoint"
        | "inpoint";
    };
    backgroundOptions?: | false
    | { round?: number; color?: string; gradient?: Gradient; margin?: number };
    stringToBytesFuncs?: { [encoding: string]: (s: string) => number[] };
}

Index

Properties

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

Properties

document

document: Document

Use a custom DOM domplementation

`Optional`imageTools

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

Use a custom image fetching & serializaton implementation

data

data: string

The data will be encoded in the QR code

`Optional`image

image?: string | Buffer | Blob

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

shape

shape: "square" | "circle"

QR code shape

Default

ShapeType.square

qrOptions

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"
Default
```
ErrorCorrectionLevel.Q
```

imageOptions

imageOptions: {
    mode: "center" | "overlay" | "background";
    fill: { color: string; gradient?: Gradient };
    imageSize: number;
    margin: number;
    crossOrigin?: string;
}

Type declaration

mode: "center" | "overlay" | "background"
Image mode
Default
```
ImageMode.center
```
fill: { color: string; gradient?: Gradient }
Fill blank areas of the code with selected color
- color: string
  Color of QR dots
  Default
```
"rgba(255,255,255,0.75)"
```
- Optionalgradient?: Gradient
  Gradient of Corners Dot
imageSize: number
Coefficient of the image size
Default
```
0.4
```
margin: number
Margin of the image (in blocks)
Default
```
0
```
OptionalcrossOrigin?: string
MDN Reference

dotsOptions

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";
}

Type declaration

size: number
QR dot size (in pixels)
Default
```
10
```
color: string
Color of QR dots
Default
```
"#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"
Style of QR dots
Default
```
DotType.square
```

`Optional`cornersSquareOptions

cornersSquareOptions?: {
    color?: string;
    gradient?: Gradient;
    type?:
        | "dot"
        | "extra-rounded"
        | "classy"
        | "square"
        | "outpoint"
        | "inpoint";
}

Corners Square options, omitted values match dots

Type declaration

Optionalcolor?: string
Color of Corners Square
Optionalgradient?: Gradient
Gradient of Corners Square
Optionaltype?: "dot" | "extra-rounded" | "classy" | "square" | "outpoint" | "inpoint"
Style of Corners Square

`Optional`cornersDotOptions

cornersDotOptions?: {
    color?: string;
    gradient?: Gradient;
    type?:
        | "dot"
        | "extra-rounded"
        | "classy"
        | "square"
        | "heart"
        | "outpoint"
        | "inpoint";
}

Corners Dot options, omitted values match squares

Type declaration

Optionalcolor?: string
Color of Corners Dot
Optionalgradient?: Gradient
Gradient of Corners Dot
Optionaltype?: "dot" | "extra-rounded" | "classy" | "square" | "heart" | "outpoint" | "inpoint"
Style of Corners Dot

`Optional`backgroundOptions

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
  Default
```
0
```

`Optional`stringToBytesFuncs

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

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

Interface Options

Index

Properties

Properties

document

OptionalimageTools

data

Optionalimage

shape

Default

qrOptions

Type declaration

typeNumber: TypeNumber

Optionalmode?: "numeric" | "alphanumeric" | "byte" | "kanji" | "unicode"

errorCorrectionLevel: "L" | "M" | "Q" | "H"

Default

imageOptions

Type declaration

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

Default

fill: { color: string; gradient?: Gradient }

color: string

Default

Optionalgradient?: Gradient

imageSize: number

Default

margin: number

Default

OptionalcrossOrigin?: string

dotsOptions

Type declaration

size: number

Default

color: string

Default

Optionalgradient?: Gradient

type: | "dot" | "random-dot" | "rounded" | "extra-rounded" | "vertical-line" | "horizontal-line" | "classy" | "classy-rounded" | "square" | "small-square" | "tiny-square" | "diamond"

Default

OptionalcornersSquareOptions

Type declaration

Optionalcolor?: string

Optionalgradient?: Gradient

Optionaltype?: "dot" | "extra-rounded" | "classy" | "square" | "outpoint" | "inpoint"

OptionalcornersDotOptions

Type declaration

Optionalcolor?: string

Optionalgradient?: Gradient

Optionaltype?: "dot" | "extra-rounded" | "classy" | "square" | "heart" | "outpoint" | "inpoint"

OptionalbackgroundOptions

Type declaration

Optionalround?: number

Optionalcolor?: string

Optionalgradient?: Gradient

Optionalmargin?: number

Default

OptionalstringToBytesFuncs

Settings

On This Page

`Optional`imageTools

`Optional`image

`Optional`mode?: "numeric" | "alphanumeric" | "byte" | "kanji" | "unicode"

`Optional`gradient?: Gradient

`Optional`crossOrigin?: string

`Optional`gradient?: Gradient

type:
| "dot"
| "random-dot"
| "rounded"
| "extra-rounded"
| "vertical-line"
| "horizontal-line"
| "classy"
| "classy-rounded"
| "square"
| "small-square"
| "tiny-square"
| "diamond"

`Optional`cornersSquareOptions

`Optional`color?: string

`Optional`gradient?: Gradient

`Optional`type?: "dot" | "extra-rounded" | "classy" | "square" | "outpoint" | "inpoint"

`Optional`cornersDotOptions

`Optional`color?: string

`Optional`gradient?: Gradient

`Optional`type?: "dot" | "extra-rounded" | "classy" | "square" | "heart" | "outpoint" | "inpoint"

`Optional`backgroundOptions

`Optional`round?: number

`Optional`color?: string

`Optional`gradient?: Gradient

`Optional`margin?: number

`Optional`stringToBytesFuncs