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

1. JavaScriptを使用してQRコードを解析する

1. QR コードとは何ですか?

QR コードには、人間が理解できるテキスト言語が機械言語の形式で保存されています。黒い四角は 1 を表し、白い四角は 0 を表し、白黒のパターンは実際にはコードの文字列です。コードをスキャンするプロセスは、これらのコードを変換するプロセスです。注目すべきもう 1 つの点は、側面に 3 つの大きな四角形があり、主に位置決め機能として機能することです。 3 つのポイントで表面を判断できるため、コードをスキャンすると、携帯電話の配置に関係なく特定の情報を取得できます。

2.qrコードパーサー

これは依存関係のない QR コードフロントエンド解析ツールです。利点は、小型パッケージで軽量なツールであることです。欠点は、カメラを呼び出せないことです。カメラを呼び出すためのコードを記述する必要があります。

1. インストール方法

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

2. 使用方法

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

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

3. ngx-qrcode2

angularに統合された QR コード生成ツール。生成のみ可能で、読み取ることはできません。

1. インストール方法

npm に ngx-qrcode2 を追加します

2. 使用方法

Appmodule にモジュールをインポートします。

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

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

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

app.component.html 挿入されたテンプレート:

<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>

app.component.ts に次のコードを追加します。

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

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

4. フロントエンドでQRコードを生成する

1. インストール方法

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

2. 使用方法

Appmodule にモジュールをインポートします。

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

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

3. ケース1: QRコードを生成するためのコードテンプレート

<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>

4. ケース2: QRコードの読み取り

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

これで、JavaScript を使用して QR コードを解析する 3 つの方法についての記事は終了です。JavaScript による QR コードの解析の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: