HTML5 は QR コードのスキャンと解析を実装します _html5 チュートリアルのスキル

はじめに:
最近、Weibo クライアントで、h5 ページのボタンがネイティブと対話してカメラを呼び出し、QR コードをスキャンして解析できるという要件があります。 Weibo 以外のクライアント (WeChat または Safari などのネイティブ ブラウザ) では、システムの写真または写真のアップロード ボタンを呼び出し、写真を撮るかアップロードすることで QR コードを解析します。
2 番目の解決策では、フロントエンド js で QR コードを解析する必要があります。これは、サードパーティの解析ライブラリ jsqrcode に依存しています。このライブラリはブラウザ側でカメラを呼び出す操作をすでにサポートしていますが、getUserMedia と呼ばれるプロパティに依存しています。モバイル ブラウザはこの属性を十分にサポートしていないため、QR コードは画像をアップロードすることによって間接的にのみ解析できます。
GetUserMedia 属性対応ブラウザリスト:

まず、QR コードを解析するための優れたコードを提供してくれた jsqrcode の開発者に感謝したいと思います。これにより、私の作業負荷が大幅に軽減されました。 jsqrcode アドレス: クリックしてください
私のコード ライブラリ アドレス: クリックしてください
1. 解決された問題:
1.クライアントはカメラを呼び出して QR コードをスキャンし、解析します。
2. ネイティブ ブラウザと WeChat クライアントで QR コードをスキャンして解析できます。
Web 側または H5 側で QR コードのスキャン作業を直接完了できます。
3. 欠点:
画像が不鮮明で、解析に失敗しやすい (写真の撮影)。画像をスキャンするには、レンズを QR コードから遠ざける必要があります (非常に近い距離)。ネイティブの通話カメラ分析と比較して 1 ～ 2 秒の遅延が発生します。
注:
このプラグインは zepto.js または jQuery.js で使用する必要があります
使用説明:
1使用する必要がある場所 このページでは、lib ディレクトリ内の js ファイルを次の順序でインポートします

コードをコピーしますコードは次のとおりです:

2. ボタンの HTML スタイルをカスタマイズします。

プラグインは を使用する必要があるため、HTML 構造の表示スタイルは固定されています。 Web ページでボタンのスタイルをカスタマイズするには、次のサンプル コード構造に従ってコードをネストできます。

コードをコピーします コードは次のとおりです:

QR コードをスキャン 1

次に入力の CSS を設定します。ボタンを非表示にするには、たとえば属性セレクターを使用します

コードをコピー

コードは次のとおりです:

input[node-type=jsbridge ]{

visibility: hidden;

}


ここでは class="qr のスタイルを定義するだけです。 -btn」を必要に応じて指定します。

3. ページ上の Qrcode オブジェクトを初期化します

コードをコピーします

は次のとおりです:

// QR コードのスキャン ボタンを初期化し、カスタム ノード タイプ属性を渡します

$(function() {

Qrcode.init($('[ノードタイプ = jsbridge]'));
});
メインコード分析

コードをコピー

コードは次のとおりです。

(function($) {
var Qrcode = function(tempBtn) {
//このオブジェクトは Weibo ドメインでの解析のみをサポートします。つまり、Weibo のページだけを対象とするわけではありません。 2 番目のソリューションは、QR コードを解析するために使用できます。
if (window.WeiboJSBridge) {
$(tempBtn).on('click', this.weiBoBridge); else {
$( tempBtn).on('change', this.getImgFile);
}
};
Qrcode.prototype = {
weiBoBridge: function() {
WeiboJSBridge.invoke( 'scanQRCode' , null, function(params) {
//QR コードのスキャン結果を取得します
location.href=params.result;
},
getImgFile : function() {
var _this_ = this;
var imgFile = $(this)[0].files;
var oFile = imgFile[0]; ;
var rFilter = /^(?:image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png| image/svg xml|image /tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable -graymap|image/x -portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i;
if (imgFile.length ===) 0) {
return;
}
if (!rFilter.test(oFile.type)) {
alert("正しい画像形式を選択してください!"); >}
/ /画像の読み取りに成功した後に実行されるコード
oFReader.onload = function(oFREvent) {
qrcode.decode(oFREvent.target.result);
qrcode.callback = function(data) ) {
//QR コードのスキャン結果を取得します
location.href = data;
};
oFReader.readAsDataURL(oFile); 🎜>destory: function() {
$(tempBtn).off('click');
}
};
//初期化
Qrcode.init = function(tempBtn) {
var _this_ = this;
var inputDom;
tempBtn.each(function() {
new _this_($(this));
$('[ node-type=qr-btn] ').on('click', function() {
$(this).find('[node-type=jsbridge]')[0].click();
});
};
window.Qrcode = Qrcode;
})(window.Zepto : jQuery);



>
1. 前のページに電話します

2.
を呼び出した後のページ

関連ラベル：

h5实现二维码扫描 h5扫描二维码

ソース：php.cn

前の記事：HTML5 の歴史の新機能、pushState、replaceState、および 2 つの _html5 チュートリアル スキルの違い 次の記事：HTML5 メタタグの応用例を説明する _html5 チュートリアル スキル

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

2

1780

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

10

1925

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1638

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1547

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1580

関連トピック

詳細>

• HTMLのスペースコードとは何ですか
• location.hash
• トップ10の仮想通貨の最新価格
• フロア関数の使用法
• parseint関数の使用法
• xdata と data の違い
• DNS 解決が失敗する原因は何ですか?
• スイングのチュートリアル