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

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-b​​rowser' から 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript+html はフロントエンドページでランダム QR コード検証を実装します
  • js QRコードスキャンログインの原理についての簡単な説明
  • js を使用して QR コードを生成するサンプル コード
  • 動的 QR コードを作成するための Three.js サンプル コード
  • QRコードを生成するときにqrcode.jsが空のdivを定義する必要があるという問題を解決する
  • WeChatのQRコードスキャン機能をjsで呼び出す実装コード
  • JSはバーコードスキャナでQRコードをスキャンする機能を実現します
  • ネイティブ JavaScript に基づいて画像付きの QR コードを生成する方法

<<:  Dockerコンテナの原理の分析

>>:  ウェブページサイズに関する調査

推薦する

CentOS7.4 起動時の緊急モードへようこそメッセージに対する解決策

今日は仮想マシンを使って実験をしました。システムをインストールし、いくつかのオプションを最適化した後...

JavaScript の便利な配列トリック 12 選

目次アレイ重複排除1. from() を新しい Set() メソッドに重ねる2. スプレッド演算子 ...

MySQL 8.0 の新機能 - チェック制約の紹介

目次序文チェック制約作成、削除、表示制限要約する序文MySQL 8.0 では、チェック制約という非常...

Trash-Cli: Linux のコマンドラインごみ箱ツール

ゴミ箱は Linux ユーザー、Windows ユーザー、Mac ユーザーにとって非常に一般的なので...

MySQLテーブルを削除する方法

MySQL でテーブルを削除するのは非常に簡単ですが、削除コマンドを実行するとすべてのデータが消えて...

Vueモバイル端末の適応化問題の詳細説明

1. vue uiでプロジェクトを作成する 2. 基本設定項目を選択する 3. プロジェクトを実行す...

MySQLデータベース監視binlogを有効にする手順

序文多くの場合、ユーザーが自分のデータに対して実行する操作に基づいて何かを行う必要があります。たとえ...

vue フロントエンド HbuliderEslint リアルタイム検証 自動修復設定

目次HBuilderX での ESLint プラグインのインストールカスタム eslint-js ル...

Docker Swarmの概念と使用法の詳細な説明

Docker Swarm は、Docker によって開発されたコンテナ クラスター管理サービスです。...

CSS でハートを描く 3 つの方法

以下では、CSS を使用してハートの形を描く 3 つの方法を紹介します。実装プロセスは非常にシンプル...

MySQL のスロークエリの方法と例

1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...

VUEはFlappy Birdゲームのサンプルコードを実装します

Flappy Bird は、誰もがアプリでプレイしたことがある非常にシンプルな小さなゲームです。ここ...

Linux C ログ出力コード テンプレート サンプル コード

序文この記事は主に Linux C でのログ出力コード テンプレートに関する関連コンテンツを紹介し、...

MySQL のロングトランザクション例の詳細な説明

序文: 「MySQL 入門」シリーズの記事は終了しました。今後も引き続き MySQL に焦点を当て、...

CSS で実装された円形のプログレスバー

成果を達成する 実装コードhtml <div class="wrap"&g...