Hari ini, supervisor saya memberi saya permintaan, mengatakan bahwa saya perlu menggunakan pengembangan hybrid dan menggunakan H5 untuk memanggil kamera lokal untuk memindai kode QR. Saya telah melakukan pemindaian kode QR Android asli sebelumnya, terutama dengan memanggil plug-in zxing. Saya juga mendapat flash. Tapi saya belum pernah menemukan H5 murni, jadi saya tidak tahu harus berbuat apa, jadi saya pulang ke rumah pada malam hari dan mulai mencari solusi secara online. Berikut pemahaman saya tentang pemindaian QR H5 kode dan memanggil kamera lokal.
Situs web sains populer:
Bagaimana H5 menghasilkan objek komponen Android
H5 memanggil api kamera lokal Android
Generator gambar kode QR online
Pemindaian kode QR: (menggunakan framework mui, berikut kode htmlnya)
<!doctype html> <html> <head> <meta charset=UTF-8> <title></title> <meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1 ,skala maksimum=1,dapat diskalakan pengguna=tidak /> <link href=css/mui.min.css rel=stylesheet /> <skrip src=js/mui.min.js></script> <tipe gaya=teks/css> #bcid{ lebar: 100%; tinggi: 100%; posisi: latar belakang: #000000; { tinggi:100%; lebar: 100%; } .fbt{ warna: #0E76E1; lebar: 50%; #ffffff; float: kiri; tinggi garis: 44px; perataan teks: tengah; } </style> </head> <body> <header class=mui-bar mui-bar-nav style=> <a class= mui-action-back mui-icon mui-icon-left-nav mui-pull-left></a> <h1 class=mui-title style=color: #0E76E1;>Pemindaian kode QR H5webapp</h1> <span class=mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right id=turnTheLight></span> </header> <div id = bcid> <!--Div yang memegang kontrol pemindaian--> </div> <div class=mui-bar mui-bar-footer style=padding: 0px;> <div class=fbt onclick=scanPicture();>Pilih kode QR dari album</div> <div class=fbt mui-action-back>Batal</div> </div> <script type=text / javascript> var height = window.innerHeight + 'px';//Dapatkan tinggi halaman sebenarnya var width = window.innerWidth + 'px'; document.getElementById(bcid).style.height= tinggi; document.getElementById(bcid).style.width= lebar; scan = null;//Pindai objek mui.plusReady(function () {//Inisialisasi pemindaian mui melalui mui. init(); startRecognize(); }); function startRecognize(){ //Aktifkan pemindaian coba{ var filter; //Gaya kontrol pemindaian yang disesuaikan var style = {frameColor: #29E52C,scanbarColor: #29E52C,latar belakang: } //Pemindaian konstruksi kontrol scan = new plus.barcode.Barcode('bcid',filter,styles); scan.start(); //Menghidupkan dan mematikan pemrosesan flash 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){ alert(Terjadi kesalahan:/n+e); //Error popup alert(e }; function onmarked( type, result ) {//Ini adalah fungsi callback untuk memindai kode QR, type adalah jenis callback untuk memindai kode QR var text = ''; (ketik ){ //QR, EAN13, dan EAN8 semuanya merupakan format pengkodean kode QR, dan hasilnya adalah hasil yang dikembalikan case plus.barcode.QR: text = 'QR: '; teks = 'EAN13: '; break; case plus.barcode.EAN8: text = 'EAN8: '; break; } alert( text + : + result }; Identifikasi langsung gambar kode QR plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(Tidak dapat mengenali gambar ini); }); },function(err){ plus.nativeUI.alert(Gagal: +err.message });Berikut ini adalah struktur paketnya: alat pengembangannya adalah hbuilder
Fungsi mui.plusReady terutama untuk inisialisasi
startRecognize() adalah untuk mengaktifkan fungsi pemindaian kode QR
onerror adalah pesan kesalahan
yang ditandai adalah poin kuncinya, ini adalah fungsi panggilan balik setelah kode QR dipindai, jenis adalah jenis pengenalan kode QR, dan hasilnya adalah konten panggilan balik kode QR.scanPicture() dapat langsung mengidentifikasi gambar kode QR lokal dan menganalisisnya
H5 memanggil kamera lokal
<!DOCTYPE html><html><head> <meta charset=utf-8> <meta name=viewport content=width=device-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/> <tipe skrip=teks/javascript charset=utf-8> document.addEventListener( plusready, function(){ mui.init(); }); fungsi getCamera() { var cam = plus.camera.getCamera(); //Array string, resolusi kamera yang didukung oleh kamera var Resolusi = cam.supportedImageResolutions[0]; //Array string, format file foto yang didukung oleh kamera var Formats = cam.supportedImageFormats[0]; //Panggil metode foto //capturedFile, setelah foto selesai, alamat penyimpanan foto cam .captureImage( function(capturedfile){ //Peringatan fotografi berhasil(capturedfile); //Cetaknya}, function(){ //Fotografi gagal},{ //Format parameter fotografi: Format, indeks: 1//1 mewakili kamera utama, 2 mewakili kamera tambahan}); var Resolusi = cam.supportedImageResolutions[0]; //Array string, format file foto yang didukung oleh kamera var Formats = cam.supportedImageFormats[ 0] ; //Panggil metode fotografi //capturedFile. Setelah fotografi selesai, alamat penyimpanan foto cam.captureImage(function(capturedFile){ //Foto berhasil diambil alert(capturedFile); //Cetak //Panggil metode sistem untuk mendapatkan foto sesuai dengan alamat foto plus.io.resolvLocalFileSystemURL(capturedFile, //Fungsi panggilan balik yang berhasil //Masukkan fungsi informasi terkait file( entri){ var img = document.createElement(img); img.src = entri.toLocalURL(); document.documentElement.appendChild(img); },function(){ //Fungsi panggilan balik gagal}); } </script></head><body> <button onclick=getCamera()>Fotografi</button></body></html >mui.init(); adalah inisialisasi kerangka mui
Metode getCamera() pertama-tama menghasilkan objek kamera, kemudian mengambil foto, dan mencetak jalur gambar yang dihasilkan setelah mengambil foto.
MeringkaskanDi atas adalah pemindaian kode QR pengembangan hibrida HTML5 dan panggilan kamera lokal yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!