blinked-qr

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

Installation

Install blinked-qr from npm:

1npm install blinked-qr --save

Add wanted package to NgModule imports:

1import { NgxQrcodeStylingModule } from 'blinked-qr';
2
3@NgModule({
4    imports: [
5        NgxQrcodeStylingModule
6    ]
7})

Add component to your page:

1import { Options } from 'blinked-qr';
2
3export class AppComponent {
4  public config: Options = {
5    width: 300,
6    height: 300,
7    data: "https://www.facebook.com/",
8    image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
9    margin: 5,
10    dotsOptions: {
11      color: "#1977f3",
12      type: "dots"
13    },
14    backgroundOptions: {
15      color: "#ffffff",
16    },
17    imageOptions: {
18      crossOrigin: "anonymous",
19      margin: 0
20    }
21  };
22}

1<blinked-qr [config]="config"></blinked-qr>

Or

1<blinked-qr
2  #qrcode
3  [config]="config" 
4  [type]="'canvas'"
5  [shape]="'square'"
6  [width]="200"
7  [height]="200"
8  [margin]="5"
9  [data]="'Angular QRCode'"
10  [image]="'https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg'">
11</blinked-qr>

1import { NgxQrcodeStylingComponent, Options } from 'blinked-qr';
2
3export class AppComponent {
4    @ViewChild('qrcode', { static: false }) public qrcode!: NgxQrcodeStylingComponent;
5
6    onUpdate(): void {
7        this.qrcode.update(this.qrcode.config, {
8          // height: 300,
9          // width: 300,
10          frameOptions: {
11            height: 600,
12            width: 600,
13          },
14          ...
15        }).subscribe((res) => {
16          // TO DO something!
17        });
18    }
19    
20    onDownload(): void {
21        this.qrcode.download("file-name.png").subscribe((res) => {
22          // TO DO something!
23        });
24    }
25}

Or

1<div #canvas></div>

1import { NgxQrcodeStylingService, Options } from 'blinked-qr';
2
3export class AppComponent implements AfterViewInit {
4    @ViewChild("canvas", { static: false }) canvas: ElementRef;
5    public config: Options = {...};
6    
7    constructor(private qrcode: NgxQrcodeStylingService) {}
8
9    ngAfterViewInit(): void {
10        // Create QRCode by Service and ElementRef 
11        this.qrcode.create(this.config, this.canvas.nativeElement).subscribe((res) => {
12          // TO DO something!
13        });
14    }
15}

Or

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

1import { NgxQrcodeStylingService, Options } from 'blinked-qr';
2
3export class AppComponent implements AfterViewInit {
4    public config: Options = {...};
5    
6    constructor(private qrcode: NgxQrcodeStylingService) {}
7   
8    ngAfterViewInit(): void {
9        // Create QRCode by Service and HTMLElement 
10        this.qrcode.create(this.config, document.getElementById('canvas')).subscribe((res) => {
11          // TO DO something!
12        });
13    }
14}

1import { Options } from 'blinked-qr';
2
3export class AppComponent {
4    public config: Options = {
5        template: 'bitcoin',
6        ...
7    }
8}

1<blinked-qr [template]="'bitcoin'" [data]="'blinked-qr'"></blinked-qr>

1import { Options } from 'blinked-qr';
2
3export class AppComponent {
4    public config: Options = {
5        frameOptions: {
6              style: 'style36',
7              width: 300,
8              height: 300,
9              x: 50,
10              y: 50
11        }
12        ...
13    }
14}

1<blinked-qr
2  [template]="'bitcoin'"
3  [data]="'blinked-qr'"
4  [width]="280"
5  [height]="280"
6  [image]="'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/BTC_Logo.svg/60px-BTC_Logo.svg.png'"
7  [frameOptions]="{style: 'style36', height: 300, width: 300, x: 60, y: 60}">
8</blinked-qr>

API Documentation

Input

Models in Config

1export declare type Options = {
2    type?: DrawType;
3    shape?: ShapeType;
4    width?: number;
5    height?: number;
6    margin?: number;
7    data?: string;
8    image?: string;
9    template?: string;
10    frameOptions?: {
11        style?: string;
12        height?: number;
13        width?: number;
14        x?: number;
15        y?: number;
16    };
17    qrOptions?: {
18        typeNumber?: TypeNumber;
19        mode?: Mode;
20        errorCorrectionLevel?: ErrorCorrectionLevel;
21    };
22    imageOptions?: {
23        hideBackgroundDots?: boolean;
24        imageSize?: number;
25        crossOrigin?: string;
26        margin?: number;
27    };
28    dotsOptions?: {
29        type?: DotType;
30        color?: string;
31        gradient?: Gradient;
32    };
33    cornersSquareOptions?: {
34        type?: CornerSquareType;
35        color?: string;
36        gradient?: Gradient;
37    };
38    cornersDotOptions?: {
39        type?: CornerDotType;
40        color?: string;
41        gradient?: Gradient;
42    };
43    backgroundOptions?: {
44        round?: number;
45        color?: string;
46        gradient?: Gradient;
47    };
48};

Model Details

Support versions

Author Information

MIT License. Copyright (c) 2021 DaiDH