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
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
#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!
});
}
}
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).subscribe((res) => {
// TO DO something!
});
}
}
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')).subscribe((res) => {
// TO DO something!
});
}
}
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>
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>
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 |
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' }] |
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 |
1.1.0 >= Angular 9
1.0.13 >= Angular 8
Author: DaiDH
, Tel: 0845882882
MIT License. Copyright (c) 2021 DaiDH