Hoy, mi supervisor me hizo una solicitud, diciendo que necesito usar el desarrollo híbrido y usar H5 para llamar a la cámara local para escanear el código QR. Ya he escaneado el código QR nativo de Android, principalmente llamando al complemento zxing. También obtuve un flash, pero nunca había encontrado un H5 puro, así que no sabía qué hacer, así que fui a casa por la noche y comencé a buscar soluciones en línea. La siguiente es mi comprensión y código de escaneo QR. códigos y llamar a cámaras locales.
Sitio web de divulgación científica:
Cómo H5 genera objetos de componentes de Android
H5 llama a la API de cámara local de Android
Generador de imágenes de códigos QR en línea
Escaneo de código QR: (usando el marco mui, el siguiente es el código html)
<!doctype html> <html> <head> <meta charset=UTF-8> <title></title> <meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1 ,escala máxima=1,escalable por usuario=no /> <enlace href=css/mui.min.css rel=hoja de estilo /> <script src=js/mui.min.js></script> <tipo de estilo=text/css> #bcid{ ancho: 100%; alto: 100%; posición: fondo: #000000; { altura: 100%; ancho: 100% } .fbt{ color: #0E76E1; ancho: 50%; #ffffff; float: izquierda; altura de línea: 44px; alineación de texto: centro; </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 estilo=color: #0E76E1;>Escaneo de código QR de H5webapp</h1> <span class=mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right id=turnTheLight></span> </header> <div id = bcid> <!--El div que contiene el control de escaneo--> </div> <div class=mui-bar mui-bar-footer style=padding: 0px;> <div class=fbt onclick=scanPicture();>Seleccionar código QR del álbum</div> <div class=fbt mui-action-back>Cancelar</div> </div> <script type=text / javascript> var height = window.innerHeight + 'px';//Obtener la altura real de la página var width = window.innerWidth + 'px'; document.getElementById(bcid).style.height= height; document.getElementById(bcid).style.width= width; scan = null;//Escanear objeto mui.plusReady(function () { //Inicializar escaneo mui a través de mui. init(); startRecognize(); }); function startRecognize(){ //Activar escaneo try{ var filter //Estilo de control de escaneo personalizado var estilos = {frameColor: #29E52C,scanbarColor: #29E52C,fondo: } //Construcción del control de escaneo scan = new plus.barcode.Barcode('bcid',filter,styles); scan.onmarked = onmarked; scan.start(); //Activar y desactivar el procesamiento 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){ alerta(Ocurrió un error:/n+e); // Alerta emergente de error (e); }; función marcada (tipo, resultado) { // Esta es la función de devolución de llamada para escanear el código QR, el tipo es el tipo de devolución de llamada para escanear el código QR var text = ''; (tipo){ //QR, EAN13 y EAN8 son formatos de codificación de códigos QR y el resultado es el resultado devuelto. case plus.barcode.QR: text = 'QR: 'break; texto = 'EAN13: '; break; case plus.barcode.EAN8: text = 'EAN8: '; break } alert( text + : + result } // Seleccione una imagen de código QR de la función scanPicture() { // OK); Identifique directamente imágenes de códigos QR plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(No se puede reconocer esta imagen); }); },función(err){ plus.nativeUI.alert(Error: +err.message } } </script> </body> </html>);La siguiente es la estructura del paquete: la herramienta de desarrollo es hbuilder
La función mui.plusReady es principalmente para inicialización.
startRecognize() es para habilitar la función de escanear códigos QR
onerror es un mensaje de error
onmarked es el punto clave, es la función de devolución de llamada después de escanear el código QR, el tipo es el tipo de reconocimiento del código QR y el resultado es el contenido de la devolución de llamada del código QR.scanPicture() puede identificar directamente imágenes de códigos QR locales y analizarlas
H5 llama a la cámara local
<!DOCTYPE html><html><head> <meta charset=utf-8> <meta nombre=viewport content=ancho=ancho-dispositivo,escala-inicial=1,escala-mínima=1,escala-máxima=1, escalable por usuario=no /> <título></título> <script src=js/mui.min.js></script> <enlace 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(); // Matriz de cadenas, resolución de cámara admitida por la cámara var Resoluciones = cam.supportedImageResolutions[0]; // Matriz de cadenas, formatos de archivos de fotos admitidos por la cámara var Formats = cam.supportedImageFormats[0] // Llame al método de la foto //capturedFile, una vez completada la foto, la dirección de almacenamiento de la foto cam .captureImage( function(capturedfile){ //La fotografía se realizó correctamente alert(capturedfile); //Imprimir}, function(){ //La fotografía falló},{ //Formato de los parámetros de la fotografía: Formatos, índice: 1//1 representa la cámara principal, 2 representa la cámara auxiliar}); var Resoluciones = cam.supportedImageResolutions[0] // Matriz de cadenas, formato de archivo de foto admitido por la cámara var Formats = cam.supportedImageFormats[ 0] ; // Llame al método de fotografía //capturedFile. Una vez completada la fotografía, la dirección de almacenamiento de la foto cam.captureImage(function(capturedFile){ //Foto tomada correctamente alert(capturedFile); //Imprimirla //Llame al método del sistema para obtener la foto según la dirección de la foto plus.io.resolvLocalFileSystemURL(capturedFile, //Función de devolución de llamada exitosa //Ingresar función de información relacionada con el archivo( entrada){ var img = document.createElement(img); img.src = entrada.toLocalURL(); },function(){ //Función de devolución de llamada fallida}); } } </script></head><body> <button onclick=getCamera()>Fotografía</button></body></html >mui.init(); es la inicialización del marco mui
El método getCamera() primero genera un objeto de cámara, luego toma una foto e imprime la ruta de la imagen generada después de tomar la foto.
ResumirLo anterior es el escaneo de código QR de desarrollo híbrido HTML5 y la llamada a la cámara local presentado por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!