Skip to content

id1945/ngx-qrcode-styling

Repository files navigation

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

frames frames frames frames frames

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',
        ...
    }
}

Or

<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
        }
        ...
    }
}

Or

<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 Default Value 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 Default Value 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

Vietnam

MIT License. Copyright (c) 2021 DaiDH