HTML5 membuka fungsi pemindaian kode ponsel serta kelebihan dan kekurangannya

1. Kemampuan untuk memanggil kamera pada klien Weibo untuk memindai kode QR dan menguraikannya;

2. Mampu memindai dan mengurai kode QR di browser asli dan klien WeChat;

Sisi web atau sisi h5 dapat langsung menyelesaikan pekerjaan pemindaian kode;

Jika gambar tidak jelas, mudah untuk gagal menguraikan (mengambil gambar untuk memindai gambar memerlukan lensa sangat dekat dengan kode QR). Dibandingkan dengan panggilan asli, penguraian kamera akan mengalami penundaan 1- 2 detik.

menjelaskan:

Plug-in ini perlu digunakan dengan zepto.js atau jQuery.js

1. Pada halaman yang ingin digunakan, masukkan file js di direktori lib dengan urutan sebagai berikut

 <skrip src=lib/zepto.js></script> <skrip src=lib/qrcode.lib.min.js></script> <skrip src=lib/qrcode.js></script>

2. Sesuaikan gaya html tombol

Tambahkan atribut khusus untuk tombol khusus, nama atributnya adalah tipe simpul

Tambahkan atribut khusus ke tombol input, nama atributnya adalah tipe simpul

Karena plugin perlu menggunakan <input type=file /> , struktur html memiliki gaya tampilan tetap pada halaman web. Untuk menyesuaikan gaya tombol, kita dapat menyarangkan kode sesuai dengan contoh struktur kode berikut

 <div> <div class=qr-btn node-type=qr-btn>Pindai kode QR 1 <input node-type=jsbridge type=nama file=myPhoto value=Pindai kode QR 1 /> </div> < /div >

Kemudian atur css tombol input untuk menyembunyikan tombol tersebut. Misalnya saya menggunakan atribut selector.

 masukan[tipe-simpul=jsbridge]{ tampilan:tidak ada;}

Di sini kita hanya perlu mendefinisikan gaya class=qr-btn sesuai dengan kebutuhan kita sendiri.

3. Inisialisasi objek Qrcode pada halaman

 //Inisialisasi tombol pindai kode QR dan masukkan atribut tipe simpul khusus $(function() { Qrcode.init($('[node-type=qr-btn]')); });

Analisis kode utama

 (fungsi($) { var Qrcode = fungsi(tempBtn) { var _this_ = ini; var isWeiboWebView = /__weibo__/.test(navigator.userAgent); if (isWeiboWebView) { if (window.WeiboJSBridge) { _this_.bridgeReady(tempBtn ); } kalau tidak { document.addEventListener('WeiboJSBridgeReady', function() { _this_.bridgeReady(tempBtn); } } } else { _this_.nativeReady(tempBtn) }; $('[node-type=jsbridge]',tempBtn).on('klik',fungsi(e){ e.stopPropagation(); }); $(tempBtn).bind('klik',fungsi(e) { $(ini).find('input[node-type=jsbridge]').trigger('klik' }); $(tempBtn).bind('ubah', this.getImgFile); }, bridgeReady: function(tempBtn) { $(tempBtn).bind('click', this.weiBoBridge }, weiBoBridge: function() { window.WeiboJSBridge.invoke('scanQRCode', null, fungsi(param) { //Dapatkan hasil pemindaian kode QR $('.result-qrcode').append(params.result + '<br/>' } }), getImgFile: function() { var _this_ = this; var inputDom = $(ini).find('input[tipe-simpul=jsbridge]'); var imgFile = inputDom[0].files; imgFile[0]; var oFReader = FileReader baru(); var rFilter = /^(?:image//bmp|image//cis/-cod|image//gif|image//ief|image//jpeg|image//jpeg|image//jpeg|image//pipeg|image/ /png|gambar//svg/+xml|gambar//tiff|gambar//x/-cmu/-raster|gambar//x/-cmx|gambar//x/-i con|gambar//x/-portable/-anymap|gambar//x/-portable/-bitmap|gambar//x/-portable/-graymap|gambar//x/-portable/-pixmap|gambar//x /-rgb|gambar//x/-xbitmap|gambar//x/-xpixmap|gambar//x/-xwindowdump)$/i; if (imgFile.length === 0) { return; } if (!rFilter.test(oFile.type)) { alert(Pilih format gambar yang benar!); return; .decode(oFREvent.target.hasil); qrcode.callback = fungsi(data) { //Dapatkan hasil pemindaian kode QR $('.result-qrcode').append(data + '<br/>'); { $( tempBtn).off('klik'); } }; Qrcode.init = fungsi(tempBtn) { var _this_ = ini; tempBtn.each(function() { new _this_($(ini)); } }; window.Qrcode = Qrcode;})(window.Zepto ? Zepto : jQuery);

Di atas adalah fungsi pemindaian ponsel HTML5 beserta kelebihan dan kekurangannya 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!