今日、私の上司から、ハイブリッド開発を使用し、H5 を使用してローカル カメラを呼び出して QR コードをスキャンする必要があるというリクエストがありました。以前、主に zxing プラグインを呼び出して、ネイティブ Android QR コード スキャンを実行しました。フラッシュも入手しましたが、純粋な H5 に出会ったことがなかったので、何をすればよいのかわかりませんでした。そこで、夜に家に帰り、オンラインで解決策を探し始めました。以下は、H5 スキャン QR のコードです。コードとローカルカメラの呼び出し。
人気の科学ウェブサイト:
H5 が Android コンポーネント オブジェクトを生成する方法
H5 は Android ローカル カメラ API を呼び出します
オンライン QR コード画像ジェネレーター
QR コードのスキャン: (mui フレームワークを使用、以下は HTML コードです)
<!doctype html> <html> <head> <meta charset=UTF-8> <title></title> <meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1 ,maximum-scale=1,user-scalable=no /> <link href=css/mui.min.css rel=stylesheet /> <script src=js/mui.min.js></script> <style type=text/css> #bcid{ width: 100%; height: 100%; } html, body ,div; { 高さ: 100%; 幅: 100%; } .fbt{ カラー: #0E76E1; #ffffff; フロート: 左; テキスト整列: センター; </style> </head> <body> <header class=mui-bar-nav style=> mui-action-back mui-icon mui-icon-left-nav mui-pull-left></a> <h1 class=mui-title style=color: #0E76E1;>H5webapp QR コード スキャン</h1> <span class=mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right id=turnTheLight></span> </header> <div id = bcid> <!--スキャン コントロールを保持する div--> </div> <div class=mui-bar mui-bar-footer style=padding: 0px;> <div class=fbt onclick=scanPicture();>アルバムから QR コードを選択</div> <div class=fbt mui-action-back>キャンセル</div> </div> <script type=text / javascript> var height = window.innerHeight + 'px';//ページの実際の高さを取得します var width = window.innerWidth + 'px'; document.getElementById(bcid).style.height= height; document.getElementById(bcid).style.width= width; scan = null;//スキャンオブジェクト mui.plusReady(function () { //mui を介してスキャン mui を初期化します。 init(); startRecognize(); }); function startRecognize(){ //スキャンをオンにする try{ //カスタマイズされたスキャン コントロール スタイル = {frameColor: #29E52C,scanbarColor: #29E52C,background: } //スキャン制御構築 scan = new plus.barcode.Barcode('bcid',filter,styles); //スキャン エラー; scan.start(); //フラッシュ処理のオンとオフを切り替えます var flag = false; document.getElementById(turnTheLight).addEventListener('tap',function(){ if(flag == false){ scan.setFlash(true); flag = true; }else{ scan.setFlash(false); flag = false; } }); }catch(e){ アラート(エラーが発生しました:/n+e) } }; //エラーポップアップアラート(e); }; function onmarked( type, result ) { //これはQRコードをスキャンするためのコールバック関数です、typeはQRコードをスキャンするためのコールバックのタイプです var text = ''; (type ){ //QR、EAN13、EAN8 はすべて QR コードのエンコード形式であり、result は返される結果です。 case plus.barcode.EAN13:テキスト = 'EAN13: '; Break; case plus.barcode.EAN8: text = 'EAN8: '; alert( text + : + result ) }; // アルバム関数 scanPicture(); QR コード画像を直接識別する plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(この画像を認識できません); }); },function(err){ plus.nativeUI.alert(失敗: +err.message) }); </script> </body> </html>パッケージ構造は次のとおりです。開発ツールは hbuilder です。
mui.plusReady 関数は主に初期化用です。
startRecognize() は QR コードをスキャンする機能を有効にします
onerror はエラーメッセージです
onmarked がキーポイントで、QR コードがスキャンされた後のコールバック関数、type は QR コード認識タイプ、result は QR コード コールバックの内容です。scanPicture() はローカルの QR コード画像を直接識別して分析できます
H5 はローカル カメラを呼び出します
<!DOCTYPE html><html><head> <meta charset=utf-8> <meta name=viewport content=width=デバイス幅,initial-scale=1,minimum-scale=1,maximum-scale=1, user-scalable=no /> <title></title> <script src=js/mui.min.js></script> <link href=css/mui.min.css rel=stylesheet/> <script type=text/javascript charset=utf-8> document.addEventListener( plusready, function(){ mui.init(); }); { var cam = plus.camera.getCamera(); //文字列配列、カメラがサポートするカメラ解像度 var Resolutions = cam.supportedImageResolutions[0]; //文字列配列、カメラでサポートされている写真ファイル形式 var Formats = cam.supportedImageFormats[0] //写真が完了した後、写真の保存先のアドレスを呼び出す //capturedFile .captureImage( function(capturedfile){ //写真撮影に成功しましたalert(capturedfile); //印刷します}, function(){ //写真撮影に失敗しました},{ //写真パラメータの形式:フォーマット、インデックス: 1//1 はメイン カメラを表し、2 は補助カメラを表します}); var Resolutions = cam.supportedImageResolutions[0] //文字列配列、カメラでサポートされている写真ファイル形式 var Formats = cam.supportedImageFormats[ 0] ; //撮影メソッド //capturedFile を呼び出します。撮影が完了すると、写真の保存アドレス cam.captureImage(function(capturedFile){ //写真が正常に撮影されましたalert(capturedFile); //印刷します //写真のアドレスに従って写真を取得するシステム メソッドを呼び出します plus.io.resolvLocalFileSystemURL(capturedFile, //成功したコールバック関数 //エントリ ファイル関連情報 function(エントリ){ var img = document.createElement(img); img.src = document.documentElement.appendChild(img); },function(){ //コールバック関数が失敗しました}) }); </script></head><body> <button onclick=getCamera()>写真</button></body></html >mui.init(); mui フレームワークの初期化です。
getCamera() メソッドは、最初にカメラ オブジェクトを生成し、次に写真を撮り、写真を撮った後に生成された画像パスを印刷します。
要約する上記は、編集者が紹介した HTML5 ハイブリッド開発 QR コードのスキャンとローカル カメラの呼び出しです。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！