วันนี้ หัวหน้างานของฉันร้องขอให้ฉัน โดยบอกว่าฉันต้องใช้การพัฒนาแบบไฮบริดและใช้ H5 เพื่อเรียกกล้องในเครื่องเพื่อสแกนโค้ด QR ฉันเคยสแกนโค้ด QR ดั้งเดิมของ Android มาก่อน โดยหลักๆ แล้วโดยการเรียกปลั๊กอิน zxing ฉันได้รับแฟลชด้วย แต่ฉันไม่เคยเจอ H5 บริสุทธิ์เลย เลยไม่รู้ว่าต้องทำอย่างไร ฉันจึงกลับบ้านตอนกลางคืนและเริ่มมองหาวิธีแก้ปัญหาทางออนไลน์ ต่อไปนี้เป็นความเข้าใจและโค้ดของการสแกน QR ของ H5 รหัสและการเรียกกล้องท้องถิ่น
เว็บไซต์วิทยาศาสตร์ยอดนิยม:
H5 สร้างออบเจ็กต์ส่วนประกอบ Android อย่างไร
H5 เรียก API กล้องในเครื่องของ Android
เครื่องสร้างภาพรหัส 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 ,ขนาดสูงสุด=1,ผู้ใช้ปรับขนาดได้=ไม่ /> <link href=css/mui.min.css rel=stylesheet /> <script src=js/mui.min.js></script> <style type=text/css> #bcid{ ความกว้าง: 100%; ความสูง: 100%; ตำแหน่ง: สัมบูรณ์; พื้นหลัง: #000000; } html, เนื้อหา { ความสูง:100%; ความกว้าง: 100%; } .fbt{ สี: #0E76E1; ความกว้าง: 50%; #ffffff; float: ซ้าย; line-height: 44px; text-align: center; } </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;>การสแกนโค้ด QR ของ H5webapp</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(); }); ฟังก์ชัน startRecognize(){ //เปิดการสแกน{ var filter; //กำหนดรูปแบบการควบคุมการสแกนเอง var styles: #29E52C,scanbarColor: #29E52C,พื้นหลัง: } //สแกนโครงสร้างการควบคุม = new plus.barcode.Barcode('bcid',filter,styles); scan.onmarked = onmarked; scan.onerror = onerror; 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){ alert(เกิดข้อผิดพลาด:/n+e); } }; // การแจ้งเตือนป๊อปอัปข้อผิดพลาด (e); }; ฟังก์ชั่น onmarked ( type, result ) { // นี่คือฟังก์ชันการโทรกลับสำหรับการสแกนโค้ด QR ประเภทคือประเภทของการโทรกลับสำหรับการสแกนโค้ด QR var text = ''; (ประเภท ){ //QR, EAN13 และ EAN8 เป็นรูปแบบการเข้ารหัสของโค้ด QR และผลลัพธ์คือผลลัพธ์ที่ส่งคืน case plus.barcode.QR: text = 'QR: '; ข้อความ = 'EAN13: '; break; case plus.barcode.EAN8: text = 'EAN8: '; } alert( text + : + result ); }; ระบุรูปภาพโค้ด QR โดยตรง plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(Unable to allowance of this image); }); },function(err){ plus.nativeUI.alert(ล้มเหลว: +err.message); }); } </script> </body> </html>ต่อไปนี้เป็นโครงสร้างแพ็คเกจ: เครื่องมือการพัฒนาคือ hbuilder
ฟังก์ชัน mui.plusReady มีไว้สำหรับการเริ่มต้นเป็นหลัก
startRecognize() คือการเปิดใช้งานฟังก์ชันการสแกนโค้ด QR
onerror เป็นข้อความแสดงข้อผิดพลาด
จุดที่ทำเครื่องหมายไว้คือจุดสำคัญ เป็นฟังก์ชันการโทรกลับหลังจากสแกนโค้ด QR แล้ว ประเภทคือประเภทการจดจำโค้ด QR และผลลัพธ์คือเนื้อหาของการโทรกลับโค้ด QRscanPicture() สามารถระบุรูปภาพโค้ด QR ในพื้นที่ได้โดยตรงและวิเคราะห์รูปภาพเหล่านั้น
H5 เรียกกล้องท้องถิ่น
<!DOCTYPE html><html><head> <meta charset=utf-8> <meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1, ผู้ใช้ปรับขนาดได้ = 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(); }); ฟังก์ชั่น getCamera() { var cam = plus.camera.getCamera(); //String array, ความละเอียดของกล้องที่กล้องรองรับ var Resolutions = cam.supportedImageResolutions[0]; //String array รูปแบบไฟล์รูปภาพที่กล้องรองรับ var Formats = cam.supportedImageFormats[0]; //เรียกเมธอดภาพถ่าย //capturedFile หลังจากถ่ายภาพเสร็จแล้ว .captureImage( function(capturedfile){ //การถ่ายภาพสำเร็จการแจ้งเตือน(capturedfile); //พิมพ์}, function(){ //การถ่ายภาพล้มเหลว},{ //รูปแบบพารามิเตอร์การถ่ายภาพ: รูปแบบ ดัชนี: 1//1 หมายถึงกล้องหลัก 2 หมายถึงกล้องเสริม}); var Resolutions = cam.supportedImageResolutions[0]; //String array รูปแบบไฟล์รูปภาพที่กล้องรองรับ var Formats = cam.supportedImageFormats[ 0] ; //เรียกวิธีการถ่ายภาพ //capturedFile. หลังจากการถ่ายภาพเสร็จสิ้น ที่อยู่การจัดเก็บภาพถ่าย cam.captureImage(function(capturedFile){ // แจ้งเตือนรูปถ่ายสำเร็จ (capturedFile); // พิมพ์ // เรียกวิธีการของระบบเพื่อรับรูปภาพตามที่อยู่รูปภาพ plus.io.resolvLocalFileSystemURL (capturedFile, // ฟังก์ชั่นการเรียกกลับที่สำเร็จ // ฟังก์ชันข้อมูลที่เกี่ยวข้องกับไฟล์รายการ ( รายการ){ var img = document.createElement(img); img.src = entry.toLocalURL(); document.documentElement.appendChild(img); },function(){ //Failed callback function}); } } </script></head><body> <button onclick=getCamera()>การถ่ายภาพ</button></body></html >mui.init(); คือการเริ่มต้นเฟรมเวิร์ก mui
ขั้นแรกเมธอด getCamera() จะสร้างวัตถุกล้อง จากนั้นจึงถ่ายภาพ และพิมพ์เส้นทางของภาพที่สร้างขึ้นหลังจากถ่ายภาพ
สรุปข้างต้นคือการสแกนโค้ด QR การพัฒนาแบบไฮบริด HTML5 และการเรียกกล้องในพื้นที่ที่บรรณาธิการแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!