각도 바코드 QR 코드 스캔 라이브러리를 만드는 방법

ngx-바코드-qrcode-sdk 다운로드

npm i ngx-barcode-qrcode-sdk

Dynamsoft JavaScript SDK용 Angular 라이브러리를 생성하는 단계

ng new my-workspace --no-create-application
cd my-workspace
ng generate library my-lib

git clone https://github.com/yushulx/angular-barcode-qr-code-scanner.git
cd angular-barcode-qr-code-scanner
ng generate library ngx-barcode-qrcode-sdk

"peerDependencies": {
    ...
    "dynamsoft-javascript-barcode": "^9.0.2"
  },

export * from './lib/ngx-barcode-qrcode-sdk.service';
export * from './lib/ngx-barcode-reader/ngx-barcode-reader.component';
export * from './lib/ngx-barcode-scanner/ngx-barcode-scanner.component';
export * from './lib/ngx-barcode-qrcode-sdk.module';

import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
import { NgxBarcodeReaderComponent } from './ngx-barcode-reader/ngx-barcode-reader.component';
import { NgxBarcodeScannerComponent } from './ngx-barcode-scanner/ngx-barcode-scanner.component';
import { BarcodeQrcodeSdkServiceConfig } from './ngx-barcode-qrcode-sdk.service';

@NgModule({
  declarations: [
    NgxBarcodeReaderComponent,
    NgxBarcodeScannerComponent,
  ],
  imports: [
  ],
  exports: [
    NgxBarcodeReaderComponent,
    NgxBarcodeScannerComponent,
  ]
})
export class NgxBarcodeQrcodeSdkModule {
  constructor(@Optional() @SkipSelf() parentModule?: NgxBarcodeQrcodeSdkModule) {
    if (parentModule) {
      throw new Error(
        'GreetingModule is already loaded. Import it in the AppModule only');
    }
  }

  static forRoot(config: BarcodeQrcodeSdkServiceConfig): ModuleWithProviders<NgxBarcodeQrcodeSdkModule> {
    return {
      ngModule: NgxBarcodeQrcodeSdkModule,
      providers: [
        { provide: BarcodeQrcodeSdkServiceConfig, useValue: config }
      ]
    };
  }
}

import { Injectable, Optional } from '@angular/core';
import { BarcodeReader } from 'dynamsoft-javascript-barcode';

export class BarcodeQrcodeSdkServiceConfig {
  licenseKey = '';
  resourcePath = '';
}

@Injectable({
  providedIn: 'root'
})
export class NgxBarcodeQrcodeSdkService {

  constructor(@Optional() config?: BarcodeQrcodeSdkServiceConfig) { 
    if (config) { 
      BarcodeReader.license = config.licenseKey;
      BarcodeReader.engineResourcePath = config.resourcePath;
    }
  }
}

export class NgxBarcodeReaderComponent implements OnInit {
  @Output() result = new EventEmitter<string>();
  ...

  this.reader.decode(file).then((results: any) => {
          console.log(results);
          let txts: any = [];
          try {
            let localization;
            if (results.length > 0) {
              for (var i = 0; i < results.length; ++i) {
                txts.push(results[i].barcodeText);
                localization = results[i].localizationResult;
                this.overlayManager.drawOverlay(
                  localization,
                  results[i].barcodeText
                );
              }

              this.result.emit(txts.join(', '));
            } else {
              this.result.emit(txts.join(', '));
            }
          } catch (e) {
            alert(e);
          }
        });
  ...
}

export class NgxBarcodeScannerComponent implements OnInit {
  @Output() result = new EventEmitter<string>();
  ...

  this.scanner.onFrameRead = results => {
        ...

        let txts: any = [];
        try {
          let localization;
          if (results.length > 0) {
            for (var i = 0; i < results.length; ++i) {
              txts.push(results[i].barcodeText);
              localization = results[i].localizationResult;
              this.overlayManager.drawOverlay(localization, results[i].barcodeText);
            }
            this.result.emit(txts.join(', '));
          }
          else {
            this.result.emit(txts.join(', '));
          }

        } catch (e) {
          alert(e);
        }
      };
  ...
}

라이브러리로 각도 바코드 QR 코드 스캐너를 구축하는 방법

npm i ngx-barcode-qrcode-sdk

"build": {
    "builder": "@angular-devkit/build-angular:browser",
    ...
    "assets": [
        "src/favicon.ico",
        "src/assets",
        {
        "glob": "**/*",
        "input": "./node_modules/dynamsoft-javascript-barcode/dist",
        "output": "assets/dynamsoft-javascript-barcode"
        }
    ],
    ...
}

import { NgxBarcodeQrcodeSdkModule } from 'ngx-barcode-qrcode-sdk';

...
@NgModule({
  ...
  imports: [
    ...
    NgxBarcodeQrcodeSdkModule.forRoot({ licenseKey: "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==", resourcePath: "assets/dynamsoft-javascript-barcode/" }),
  ],
  ...
})

...

import { NgxBarcodeQrcodeSdkService } from 'ngx-barcode-qrcode-sdk';
...
export class FooComponent implements OnInit {
  barcodeResult: string = '';
  constructor(private barcodeQrCodeSdkService: NgxBarcodeQrcodeSdkService) {
  }

  ngOnInit(): void {
  }

  onResultReady(result: string): void {
    this.barcodeResult = result;
  }
}

그런 다음 해당 HTML 파일에 ngx-barcode-reader 또는 ngx-barcode-scanner를 포함합니다.

바코드 리더

<div>
  <a>Barcode QR code decoding results: {{barcodeResult}}</a>
</div>

<ngx-barcode-reader
(result)="onResultReady($event)"
></ngx-barcode-reader>

바코드 스캐너

<div>
  <a>Barcode QR code decoding results: {{barcodeResult}}</a>
</div>

<ngx-barcode-scanner
(result)="onResultReady($event)"
></ngx-barcode-scanner>

소스 코드