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コンテナの原理の分析

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

推薦する

VirtualBox6上のCentOS7で静的IPを設定する方法と注意点

VirtualBox をインストールした後、CentOS 7 をインストールします。ここでは詳細には...

MySQL explain クエリ命令情報の取得原理と例

explain はクエリ実行プラン情報を取得するために使用されます。 1. 文法次のように、sele...

React refsの詳細な紹介

1. 何ですかRefs 、コンピューターでは Resilient File System (ReF...

ネイティブJSで禁止すべきメソッドの記述

目次ブロックレベル関数オブジェクトのプロトタイプを直接変更すると呼び出された人発信者評価ブロックレベ...

my.cnf (my.ini) 重要なパラメータの最適化設定手順

MyISAM ストレージエンジンMyISAM ストレージ エンジンは、書き込みよりも読み取りが多く、...

MYSQL SERVER のログファイルを縮小する方法

トランザクション ログには、関連するデータベースに対する操作が記録され、データベースの回復に関連する...

vue3を使用してAppleシステムのサイドメッセージプロンプト効果を模倣する

目次アニメーションプレビューその他のUIライブラリ始めるコンポーネントディレクトリ構造トーストおおよ...

jsはタイトルと説明のキーワードを検出し、見つかった場合は置換するか他のページにジャンプします。

キーワード 一般タイトルには、クラック、キー、シリアル番号、キージェネレータなどの単語を含めることは...

Reactのコンポーネント共同利用実装

目次ネスティング親子コンポーネント通信ブラザーコンポーネント通信撤回するReact の Linked...

docker を使用してコード サーバーをデプロイする方法

画像をプルする # docker pull codercom/code-server # Docke...

Win10 での MySQL 8.0.16 のインストールと設定のチュートリアル

1. MySQL 8.0.16を解凍する次の図に示すように、解凍後にdadaフォルダとmy.ini構...

DockerでSpringbootプロジェクトを実行する方法

1. IDEAの下にあるターミナルをクリックし、mvn clean installと入力します。 次...

CSS3 で作成したホバーズーム効果

結果:実装コード: html <link href='https://fonts.go...

VueはTodoListの例をカプセル化し、ブラウザのローカルキャッシュのアプリケーションを実装します。

この記事では主に、Vue で TodoList をカプセル化するケースと、ブラウザのローカル キャッ...

MySQLのパラメータについてお話しましょう

序文:以前の記事では、特定のパラメータの機能についてよく紹介してきました。しかし、MySQL パラメ...