This library is built to provide a solution scanner QR code.
This library takes in raw images and will locate, extract and parse any QR code found within.
This demo stackblitz.
Install ngx-scanner-qrcode from npm:
npm install ngx-scanner-qrcode --saveAdd wanted package to NgModule imports:
import { NgxScannerQrcodeModule } from 'ngx-scanner-qrcode';
@NgModule({
imports: [
NgxScannerQrcodeModule
]
})In the Component:
<!-- For camera -->
<ngx-scanner-qrcode #action="scanner"></ngx-scanner-qrcode>
<!-- data -->
<p class="data">{{ action.data | async }}</p>
<!-- Loading -->
<p *ngIf="action.isLoading">⌛ Loading...</p>
<!-- start -->
<button (click)="action.start()">{{action.isStart ? 'Stop' : 'Start'}}</button>For image src
<!-- For image src -->
<ngx-scanner-qrcode [isAuto]="true" #action="scanner" [src]="'https://domain.com/test.png'"></ngx-scanner-qrcode>
<span>{{action.data | async}}</span>For select files
<!-- For select files -->
<input #file type="file" (change)="onSelects(file.files)" [multiple]="'multiple'" [accept]="'.jpg, .png, .gif, .jpeg'"/>
<ol>
<li *ngFor="let row of selectedFiles">
<img [src]="row.urlQR" [alt]="row.name">
<!-- <ngx-scanner-qrcode #action="scanner" [src]="row.url || ''">{{action.data | async}}</ngx-scanner-qrcode> -->
</li>
</ol>import { Component } from '@angular/core';
import { NgxScannerQrcodeService, SelectedFiles } from 'ngx-scanner-qrcode';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public selectedFiles: SelectedFiles[] = [];
constructor(private qrcode: NgxScannerQrcodeService) { }
public async onSelects(files: any) {
// toPromise
this.selectedFiles = await this.qrcode.toBase64(files, this.selectedFiles).toPromise() || [];
// subscribe
// this.qrcode.toBase64(files, this.selectedFiles).subscribe(res => this.selectedFiles = res);
}
}| Field | Description | Type | Default |
|---|---|---|---|
| [src] | image url | string | - |
| [isAuto] | auto camera | boolean | false |
| [config] | config | BaseConfig | {src:... ,isAuto:... ,text:... ,frame:... ,style:... ,medias:...} |
| [text] | style for text | CanvasRenderingContext2D | {font:'15px serif',fillStyle:'#008000'} |
| [frame] | style for frame | CanvasRenderingContext2D | {lineWidth:4,strokeStyle:'#008000'} |
| [style] | style for canvas | Style attribute canvas | {width:'100%',height:'100%',background:'#000'} |
| [medias] | setting video | MediaStreamConstraints | {audio:false,video:{width:{ideal:1280},height:{ideal:720},facingMode:'environment'}} |
| Field | Description | Type | Default |
|---|---|---|---|
| (event) | data response | string | - |
| (error) | error | any | - |
| Field | Description | Type | Default |
|---|---|---|---|
| isStart | status | boolean | false |
| isLoading | status | boolean | false |
| data | data response | BehaviorSubject | null |
| --- | --- | --- | --- |
| (start) | start camera | AsyncSubject | - |
| (stop) | stop camera | AsyncSubject | - |
| (play) | play video | AsyncSubject | - |
| (pause) | pause video | AsyncSubject | - |
| (loadImage) | load image from src | AsyncSubject | - |
| (download) | download image form video | AsyncSubject | - |
| Field | Description | Type | Default |
|---|---|---|---|
| (loadFiles) | Scanner from files | AsyncSubject<SelectedFiles[]> | [] |
BaseConfig
interface BaseConfig {
src?: string;
isAuto?: boolean;
text?: UnknownObject;
frame?: UnknownObject;
style?: UnknownObject;
medias?: UnknownObject;
}UnknownObject
interface UnknownObject {
[key: string]: any;
}SelectedFiles
interface SelectedFiles {
file: any;
name: string;
url?: string;
base64?: string;
urlQR?: string;
dataQR?: string;
base64QR?: string;
}| Support versions | |
|---|---|
| Angular 9 | 1.0.18 |
| Angular 8 | 1.0.17 |
| Author Information | |
|---|---|
| Author | DaiDH |
| Phone | +84845882882 |
MIT License. Copyright (c) 2021 DaiDH
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent