ngx-qrcode-styling

This library is built for the purpose for generating QR codes with a logo and styling.

Usage no npm install needed!

<script type="module">
  import ngxQrcodeStyling from 'https://cdn.skypack.dev/ngx-qrcode-styling';
</script>

README

ngx-qrcode-styling

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

Logo

Logo

Installation

Install ngx-qrcode-styling from npm:

npm install ngx-qrcode-styling --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>

Or

<ngx-qrcode-styling 
  [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>

Or

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

Or

<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'))
    }
}

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: 'style36',
              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: 'style36', height: 300, width: 300, x: 60, y: 60}">
</ngx-qrcode-styling>

API Documentation

export declare type Options = {
    type?: DrawType;
    shape?: ShapeType;
    width?: number;
    height?: number;
    margin?: number;
    data?: string;
    image?: string;
    template?: string;
    frameOptions?: {
        style?: string;
        height?: number;
        width?: number;
        x?: number;
        y?: number;
    };
    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;
    };
};
Property Type Default Value Description
type string (canvas, svg) 'canvas' The type of the element that will be rendered
shape string (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
template string (classic, ocean, sunflower, luxury, bitcoin, starbucks, angular, facebook, jungle, green, sky, mosaic, coffee, vintage, stamp, chess) 'classic' 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
cornersDotOptionsHelper object Dots in the corners styling options
backgroundOptions object QR background styling options

frameOptions

Property Type Default Value
style string(style20, style21, style22, style23, style24, style25, style26, style27, style28, style29, style30, style31, style32, style33, style34, style35, style36, style37, style38, style39, style40, style41, style42, style43, style44, style45, style46, style47, style48, style49, style50, style51, style52, style53, style54, style55, style56, style57, style58, style59, style60, style61, style62, style63, style64, style65, style66, style67, style68, style69, style70, style71, style72, style73, style74, style75, style76, style77, style78, style79, style80) 'style20'
width number(0 - max) 300
height number(0 - max) 300
x number(0 - max) 50
y number(0 - max) 50

qrOptions

Property Type Default Value
typeNumber number (0 - 40) 0
mode string ('Numeric' 'Alphanumeric' 'Byte' 'Kanji')
errorCorrectionLevel string ('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 string('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 string ('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 string ('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 string ('dot' 'square') Style of Corners Dot
Gradient

dotsOptions.gradient

backgroundOptions.gradient

cornersSquareOptions.gradient

cornersDotOptions.gradient

Property Type Default Value Description
type string ('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 number (0 - 1) Position of color in gradient range
color string Color of stop in gradient range

QRCodeStyling methods

NgxQrcodeStylingService.create(config, container) => void

Param Type Description
container DOM element This container will be used for appending of the QR code

NgxQrcodeStylingService.getRawData(config, extension) => Promise<Blob>

Param Type Default Value Description
extension string ('png' 'jpeg' 'webp' 'svg') 'png' Blob type

NgxQrcodeStylingService.update(config, options) => void

Param Type Description
options object The same options as for initialization

NgxQrcodeStylingService.download(config, downloadOptions) => Promise<void>

Param Type Description
downloadOptions object Options with extension and name of file (not required)

downloadOptions

Property Type Default Value Description
name string 'qr' Name of the downloaded file
extension string ('png' 'jpeg' 'webp' 'svg') 'png' File extension

Support versions

Versions Ngx-qrcode-styling
Angular 12 -
Angular 11 -
Angular 10 -
Angular 9 -
Angular 8 1.0.9


Author: DaiDH, Tel: 0845882882

License

MIT License. Copyright (c) 2021 DaiDH