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.
を呼び出した後のページ