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.
![Logo](https://raw.githubusercontent.com/id1945/ngx-scanner-qrcode/master/ngx-scanner-qrcode.png)
Install ngx-scanner-qrcode
from npm
:
npm install ngx-scanner-qrcode --save
Add 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 |
![Vietnam](https://raw.githubusercontent.com/id1945/id1945/master/vietnam.gif)
MIT License. Copyright (c) 2021 DaiDH