1.1.23 • Published 2 months ago

blinked-qr v1.1.23

Weekly downloads
-
License
MIT
Repository
github
Last release
2 months ago

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

base

frames frames frames frames frames frames frames frames frames frames

Installation

Install blinked-qr from npm:

npm install blinked-qr --save

Add wanted package to NgModule imports:

import { NgxQrcodeStylingModule } from 'blinked-qr';

@NgModule({
    imports: [
        NgxQrcodeStylingModule
    ]
})

Add component to your page:

import { Options } from 'blinked-qr';

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
    }
  };
}
<blinked-qr [config]="config"></blinked-qr>

Or

<blinked-qr
  #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'">
</blinked-qr>
import { NgxQrcodeStylingComponent, Options } from 'blinked-qr';

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

Or

<div #canvas></div>
import { NgxQrcodeStylingService, Options } from 'blinked-qr';

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

Or

<div id="canvas"></div>
import { NgxQrcodeStylingService, Options } from 'blinked-qr';

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!
        });
    }
}
import { Options } from 'blinked-qr';

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

Or

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

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

Or
```html
<blinked-qr
  [template]="'bitcoin'"
  [data]="'blinked-qr'"
  [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}">
</blinked-qr>

API Documentation

Input

PropertyTypeDefault ValueDescription
typestring (canvas, svg)'canvas'The type of the element that will be rendered
shapestring (square, circle)'square'The type of the element that will be rendered
widthnumber300Size of canvas
heightnumber300Size of canvas
marginnumber0Margin around canvas
datastringThe date will be encoded to the QR code
imagestringThe image will be copied to the center of the QR code
templatestring (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
frameOptionsobjectOptions will be passed to qrcode-generator lib
qrOptionsobjectOptions will be passed to qrcode-generator lib
imageOptionsobjectSpecific image options, details see below
dotsOptionsobjectDots styling options
cornersSquareOptionsobjectSquare in the corners styling options
cornersDotOptionsHelperobjectDots in the corners styling options
backgroundOptionsobjectQR background styling options

Models in Config

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

Model Details

PropertyTypeDefault Value
stylestring(style1, ... style150)'style1'
widthnumber(0 - max)300
heightnumber(0 - max)300
xnumber(0 - max)50
ynumber(0 - max)50
PropertyTypeDefault Value
typeNumbernumber (0 - 40)0
modestring ('Numeric' 'Alphanumeric' 'Byte' 'Kanji')
errorCorrectionLevelstring ('L' 'M' 'Q' 'H')'Q'
PropertyTypeDefault ValueDescription
hideBackgroundDotsbooleantrueHide all dots covered by the image
imageSizenumber0.4Coefficient of the image size. Not recommended to use ove 0.5. Lower is better
marginnumber0Margin of the image in px
crossOriginstring('anonymous' 'use-credentials')Set "anonymous" if you want to download QR code from other origins.
PropertyTypeDefault ValueDescription
colorstring'#000'Color of QR dots
gradientobjectGradient of QR dots
typestring ('rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded')'square'Style of QR dots
PropertyTypeDefault Value
colorstring'#fff'
gradientobject
PropertyTypeDefault ValueDescription
colorstringColor of Corners Square
gradientobjectGradient of Corners Square
typestring ('dot' 'square' 'extra-rounded')Style of Corners Square
PropertyTypeDefault ValueDescription
colorstringColor of Corners Dot
gradientobjectGradient of Corners Dot
typestring ('dot' 'square')Style of Corners Dot

dotsOptions.gradient

backgroundOptions.gradient

cornersSquareOptions.gradient

cornersDotOptions.gradient

PropertyTypeDefault ValueDescription
typestring ('linear' 'radial')"linear"Type of gradient spread
rotationnumber0Rotation of gradient in radians (Math.PI === 180 degrees)
colorStopsarray of objectsGradient colors. Example [{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }]

dotsOptions.gradient.colorStops[]

backgroundOptions.gradient.colorStops[]

cornersSquareOptions.gradient.colorStops[]

cornersDotOptions.gradient.colorStops[]

PropertyTypeDefault ValueDescription
offsetnumber (0 - 1)Position of color in gradient range
colorstringColor of stop in gradient range

Support versions

Author Information

Vietnam

MIT License. Copyright (c) 2021 DaiDH