ngx-qrcode-styling

This library is built for the purpose generating QR codes with a logo and styling.
Demo on the Github or Stackblitz or Codesandbox
Generating styled QRcodes Online

Installation

Install ngx-qrcode-styling from npm:

npm install ngx-qrcode-styling@<version> --save

Add wanted package to NgModule imports:

import { NgxQrcodeStylingModule } from 'ngx-qrcode-styling';

@NgModule({
    imports: [
        NgxQrcodeStylingModule
    ]
})

Add component to your page:

import { Options } from 'ngx-qrcode-styling';

export class AppComponent {
  public config: 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",
    margin: 5,
    dotsOptions: {
      color: "#1977f3",
      type: "dots"
    },
    backgroundOptions: {
      color: "#ffffff",
    },
    imageOptions: {
      crossOrigin: "anonymous",
      margin: 0
    }
  };
}

<ngx-qrcode-styling [config]="config"></ngx-qrcode-styling>

Multi input

<ngx-qrcode-styling
  #qrcode
  [config]="config" 
  [type]="'canvas'"
  [shape]="'square'"
  [width]="200"
  [height]="200"
  [margin]="5"
  [data]="'Angular QRCode'"
  [image]="'https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg'">
</ngx-qrcode-styling>

import { NgxQrcodeStylingComponent, Options } from 'ngx-qrcode-styling';

export class AppComponent {
    @ViewChild('qrcode', { static: false }) public qrcode!: NgxQrcodeStylingComponent;

    onUpdate(): void {
        this.qrcode.update(this.qrcode.config, {
          // height: 300,
          // width: 300,
          frameOptions: {
            height: 600,
            width: 600,
          },
          ...
        }).subscribe((res) => {
          // TO DO something!
        });
    }
    
    onDownload(): void {
        this.qrcode.download("file-name.png").subscribe((res) => {
          // TO DO something!
        });
    }
}

Element reference

<div #canvas></div>

import { NgxQrcodeStylingService, Options } from 'ngx-qrcode-styling';

export class AppComponent implements AfterViewInit {
    @ViewChild("canvas", { static: false }) canvas: ElementRef;
    public config: Options = {...};
    
    constructor(private qrcode: NgxQrcodeStylingService) {}

    ngAfterViewInit(): void {
        // Create QRCode by Service and ElementRef 
        this.qrcode.create(this.config, this.canvas.nativeElement).subscribe((res) => {
          // TO DO something!
        });
    }
}

Element id

<div id="canvas"></div>

import { NgxQrcodeStylingService, Options } from 'ngx-qrcode-styling';

export class AppComponent implements AfterViewInit {
    public config: Options = {...};
    
    constructor(private qrcode: NgxQrcodeStylingService) {}
   
    ngAfterViewInit(): void {
        // Create QRCode by Service and HTMLElement 
        this.qrcode.create(this.config, document.getElementById('canvas')).subscribe((res) => {
          // TO DO something!
        });
    }
}

Using a template

import { Options } from 'ngx-qrcode-styling';

export class AppComponent {
    public config: Options = {
        template: 'bitcoin',
        ...
    }
}

<ngx-qrcode-styling [template]="'bitcoin'" [data]="'ngx-qrcode-styling'"></ngx-qrcode-styling>

Using a frame

import { Options } from 'ngx-qrcode-styling';

export class AppComponent {
    public config: Options = {
        frameOptions: {
              style: 'F_036',
              width: 300,
              height: 300,
              x: 50,
              y: 50
        }
        ...
    }
}

<ngx-qrcode-styling
  [template]="'bitcoin'"
  [data]="'ngx-qrcode-styling'"
  [width]="280"
  [height]="280"
  [image]="'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/BTC_Logo.svg/60px-BTC_Logo.svg.png'"
  [frameOptions]="{style: 'F_036', height: 300, width: 300, x: 60, y: 60}">
</ngx-qrcode-styling>

API Documentation

Input

frameOptions 🛠️

Property	Type	Default Value	Description
(type)	`canvas`, `svg`	`canvas`	The type of the element that will be rendered
(shape)	`square`, `circle`	`square`	The type of the element that will be rendered
(width)	number	`300`	Size of canvas
(height)	number	`300`	Size of canvas
(margin)	number	`0`	Margin around canvas
(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
(scale)	number	`0`	Scale qrcode
(rotate)	number	`0`	Rotate qrcode
(template)	`default`, `ocean`, `sunflower`, `luxury`, `bitcoin`, `starbucks`, `angular`, `facebook`, `beans`, `green`, `sky`, `mosaic`, `coffee`, `vintage`, `stamp`, `chess`, `jungle` , `arabic` , `tea` , `grape`	`default`	The design of the element that will be rendered
(frameOptions)	object		Options will be passed to `qrcode-generator` lib
(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
(backgroundOptions)	object		QR background styling options

Event

Component and Service 🛠️

Field	Description	Type	Default
(create)	status	AsyncSubject	-
(update)	status	AsyncSubject	-
(download)	status	AsyncSubject	-

Models in Config

Options

export declare type Options = {
    type?: DrawType;
    shape?: ShapeType;
    width?: number;
    height?: number;
    margin?: number;
    data?: string;
    image?: string;
    scale?: number;
    rotate?: number;
    template?: string;
    frameOptions?: {
        style?: string;
        height?: number;
        width?: number;
        x?: number;
        y?: number;
        texts?: UnknownObject[]; // SVG Attribute reference
        contents?: UnknownObject[]; // SVG Attribute reference
        containers?: UnknownObject[]; // SVG Attribute reference
    };
    qrOptions?: {
        typeNumber?: TypeNumber;
        mode?: Mode;
        errorCorrectionLevel?: ErrorCorrectionLevel;
    };
    imageOptions?: {
        hideBackgroundDots?: boolean;
        imageSize?: number;
        crossOrigin?: string;
        margin?: number;
    };
    dotsOptions?: {
        type?: DotType;
        color?: string;
        gradient?: Gradient;
    };
    cornersSquareOptions?: {
        type?: CornerSquareType;
        color?: string;
        gradient?: Gradient;
    };
    cornersDotOptions?: {
        type?: CornerDotType;
        color?: string;
        gradient?: Gradient;
    };
    backgroundOptions?: {
        round?: number;
        color?: string;
        gradient?: Gradient;
    };
};

Model Details

frameOptions

Property	Type	Default Value
style	`F_020`, ... `F_080`, `FE_001`, ... `FE_XXX`	`F_020`
width	number(`0 - max`)	`300`
height	number(`0 - max`)	`300`
x	number(`0 - max`)	`50`
y	number(`0 - max`)	`50`
texts	UnknownObject[]	-
contents	UnknownObject[]	-
containers	UnknownObject[]	-

qrOptions

Property	Type	Default Value
typeNumber	`0`,`40`	`0`
mode	`Numeric`, `Alphanumeric`, `Byte`, `Kanji`
errorCorrectionLevel	`L`, `M`, `Q`, `H`	`Q`

imageOptions

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	`anonymous`, `use-credentials`		Set "anonymous" if you want to download QR code from other origins.

dotsOptions

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

backgroundOptions

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

cornersSquareOptions

Property	Type	Description
color	string	Color of Corners Square
gradient	object	Gradient of Corners Square
type	`dot`, `square`, `extra-rounded`	Style of Corners Square

cornersDotOptions

Property	Type	Description
color	string	Color of Corners Dot
gradient	object	Gradient of Corners Dot
type	`dot`, `square`	Style of Corners Dot

Gradient

dotsOptions.gradient

backgroundOptions.gradient

cornersSquareOptions.gradient

cornersDotOptions.gradient

Property	Type	Default Value	Description
type	`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

dotsOptions.gradient.colorStops[]

backgroundOptions.gradient.colorStops[]

cornersSquareOptions.gradient.colorStops[]

cornersDotOptions.gradient.colorStops[]

Property	Type	Default Value	Description
offset	`0`, `1`		Position of color in gradient range
color	string		Color of stop in gradient range

Support versions

Support versions
Angular 16	1.2.8
Angular 6	1.2.7

Author Information

Author Information
Author	DaiDH
Phone	+84845882882
Country	Vietnam

If you want donate for me!

Bitcoin

muberraduman / ngx-qrcode-styling Goto Github PK