Este artículo presenta principalmente la información relevante sobre escaneo y análisis de códigos QR en HTML5. Los amigos que lo necesitan pueden referirse a él.
Introducción:
Recientemente, existe un requisito para el proyecto de la compañía. En el cliente Weibo, un botón en la página H5 puede interactuar con nativo y llamar a la cámara, escanear el código QR y analizarlo. En clientes que no son de Weibo (navegador WeChat o nativo, como Safari), llame al botón de imagen o carga del sistema, y analice el código QR tomando fotos o cargando imágenes.
La segunda solución requiere analizar el código QR en el front-end JS. Esto depende de una biblioteca de análisis de terceros JSQRCode. Esta biblioteca ya admite la operación de llamar a la cámara al lado del navegador, pero se basa en una propiedad llamada GetUsermedia. Este atributo no es compatible con el navegador móvil, por lo que solo puede analizar el código QR cargando imágenes indirectamente.
La propiedad GetUsermedia es compatible con la lista de navegadores:
En primer lugar, me gustaría agradecer a los desarrolladores de JSQRCode por proporcionar un código tan excelente para analizar los códigos QR, que ha reducido mucho mi carga de trabajo. Dirección de JSQRCode: Haz clic en mí
Mi dirección base de código: haga clic en mí
1. Problemas resueltos:
1. Puede llamar a la cámara al cliente Weibo para escanear el código QR y analizarla;
2. Capaz de escanear los códigos QR y analizarlos en navegadores nativos y clientes de WeChat;
2. Ventajas:
El terminal web o H5 puede completar directamente el trabajo de escaneo de código;
3. Desventajas:
Es fácil fallar si la imagen no está clara (la lente debe estar muy cerca del código QR al tomar fotos y escanear imágenes), y habrá un retraso de 1-2 segundos en comparación con el análisis de la cámara nativa.
ilustrar:Este complemento debe usarse con zepto.js o jQuery.js
Cómo usar:1. Introduzca los archivos JS en el directorio LIB en el siguiente orden en la página que necesita usar
Copiar el código