JavaScript を使用して QR コードを解析する 3 つの方法

npm に QR コード パーサーを追加します

'qrcode-parser' から qrcodeParser をインポートします

img = '' とします。
qrcodeParser().then(res =>{
    コンソール.log(res)
})

npm に ngx-qrcode2 を追加します

'@angular/platform-b​​rowser' から BrowserModule をインポートします。
'@angular/core' から NgModule をインポートします。
'ngx-qrcode2' から { NgxQRCodeModule } をインポートします。

'./app.component' から { AppComponent } をインポートします。

@Ngモジュール({
  宣言: [
    アプリコンポーネント
  ]、
  輸入: [
    ブラウザモジュール、
    NgxQRコードモジュール
  ]、
  プロバイダー: [],
  ブートストラップ: [AppComponent]
})
クラス AppModule をエクスポートします { }

<div style="text-align:center">
  <h1>ngx-qrcode2 デモ</h1>
</div>

<ngx-qrコード
      [qrc-element-type]="要素タイプ"
      [qrc-value] = "値"
      qrc-class = "aclass"
      qrc-errorCorrectionLevel = "L">
</ngx-qrcode>

'@angular/core' から Component をインポートします。

@成分（{
  セレクタ: 'app-root',
  テンプレート URL: './app.component.html',
  スタイル URL: ['./app.component.css']
})
クラスAppComponentをエクスポートします。
  タイトル = 'アプリ';
  要素タイプ = 'url';
  値 = 'Techiediaries';
}

npm をインストール @techiediaries/ngx-qrcode --save

'@angular/core' から NgModule をインポートします。
'@angular/common' から CommonModule をインポートします。
'ngx-qrcode-all' から QrCodeAllModule をインポートします。
'./app.component' から { AppComponent } をインポートします。

@Ngモジュール({
    輸入: [
        共通モジュール、
        Qrコード全モジュール
    ]、
    宣言: [
        アプリコンポーネント
    ]
})
クラスAppModuleをエクスポートする{
    コンストラクタ() {}
}

<div id="qrcodeid">
 <qr-code-all [qrCodeType]="url"
     [qrCodeValue]="'SKは世界一だ！'"
     [qrコードバージョン]="'1'"
     [qrCodeECLevel]="'M'"
     [qrCodeColorLight]="'#ffffff'"
     [qrCodeColorDark]="'#000000'"
     [幅]="11"
     [余白]="4"
     [スケール]="4"
     [スキャンQrコード]="false">
 </qr-code-all>
</div>

<div id="qrcodeid">
 <qr-code-all [キャンバス幅]="640"
     [キャンバスの高さ]="480"
     [デバッグ]="false"
     [stopAfterScan]="true"
     [更新時間]="500"
     (onCapture)="キャプチャ画像($event)"
     [スキャンQrコード]="true">
 </qr-code-all>
</div>