Este artigo apresenta principalmente as informações relevantes sobre a digitalização e a análise dos códigos QR no HTML5. Amigos que precisam podem se referir a ele.
Introdução:
Recentemente, há um requisito para o projeto da empresa. No cliente Weibo, um botão na página H5 pode interagir com o nativo e chamar a câmera, digitalizar o código QR e analisá -lo. Em clientes não-Weibo (WeChat ou navegador nativo, como Safari), chame o botão de foto do sistema ou faça o upload da imagem e analise o código QR tirando fotos ou carregando imagens.
A segunda solução requer análise do código QR no JS front-end. Isso depende de uma biblioteca de análise de terceiros JSQRCODE. Esta biblioteca já suporta a operação de chamar a câmera no lado do navegador, mas conta com uma propriedade chamada getusermedia. Este atributo não é suportado pelo navegador móvel, portanto, você pode analisar apenas o código QR enviando imagens indiretamente.
A propriedade GetUSermedia é compatível com a lista do navegador:
Primeiro de tudo, gostaria de agradecer aos desenvolvedores do JSQRCode por fornecer um código tão excelente para analisar os códigos QR, o que reduziu muito minha carga de trabalho. Endereço JSQRCode: Clique em mim
Meu código base de código: clique em mim
1. Problemas resolvidos:
1. Pode ligar para a câmera no cliente Weibo para digitalizar o código QR e analisá -lo;
2. Capaz de digitalizar códigos QR e analisá -los em navegadores nativos e clientes do WeChat;
2. Vantagens:
O terminal da Web ou H5 pode concluir diretamente o trabalho de digitalização de código;
3. Desvantagens:
É fácil falhar se a imagem não estiver clara (a lente precisa estar muito próxima do código QR ao tirar fotos e digitalizar fotos), e haverá um atraso de 1-2 segundos em comparação com a análise da câmera nativa.
ilustrar:Este plug -in precisa ser usado com zepto.js ou jQuery.js
Como usar:1. Apresente os arquivos JS no diretório Lib na seguinte ordem na página que você precisa usar
Copie o código