HTML5는 QR 코드 스캔 및 구문 분석을 구현합니다

이 기사는 주로 HTML5에서 QR 코드의 스캔 및 구문 분석에 대한 관련 정보를 소개합니다. 필요한 친구는 그것을 참조 할 수 있습니다.

소개:

최근 회사 프로젝트에 대한 요구 사항이 있습니다. Weibo 클라이언트에서 H5 페이지의 버튼은 기본과 상호 작용하여 카메라를 호출하여 QR 코드를 스캔하여 구문 분석 할 수 있습니다. Weibo가 아닌 클라이언트 (Safari와 같은 WeChat 또는 기본 브라우저)에서는 시스템의 사진을 호출하거나 이미지 버튼을 업로드하고 사진을 찍거나 이미지를 업로드하여 QR 코드를 구문 분석하십시오.

두 번째 솔루션은 프론트 엔드 JS에서 QR 코드를 구문 분석해야합니다. 이것은 타사 구문 분석 라이브러리 jsqrcode에 따라 다릅니다. 이 라이브러리는 이미 브라우저 쪽에서 카메라를 호출하는 작업을 지원하지만 getUsermedia라는 속성에 의존합니다. 이 속성은 모바일 브라우저에서 지원되지 않으므로 사진을 간접적으로 업로드하여 QR 코드를 구문 분석 할 수 있습니다.

GetUsermedia 속성은 브라우저 목록과 호환됩니다.

우선, QR 코드를 구문 분석 할 수있는 훌륭한 코드를 제공해 주신 JSQRCode 개발자에게 감사의 말씀을 전합니다. jsqrcode 주소 : 나를 클릭하십시오

내 코드 기반 주소 : 나를 클릭하십시오

1. 해결 된 문제 :

1. Weibo 클라이언트의 카메라를 호출하여 QR 코드를 스캔하고 구문 분석 할 수 있습니다.

2. QR 코드를 스캔하여 기본 브라우저 및 WeChat 클라이언트에서 구문 분석 할 수 있습니다.

2. 장점 :

웹 또는 H5 터미널은 코드 스캔 작업을 직접 완성 할 수 있습니다.

3. 단점 :

그림이 명확하지 않으면 실패하기 쉽습니다 (사진을 찍고 사진을 찍을 때 렌즈가 QR 코드에 매우 가깝게해야합니다). 기본 카메라 분석에 비해 1-2 초의 지연이 발생합니다.

이 플러그인은 zepto.js 또는 jquery.js와 함께 사용해야합니다.

1. 사용해야 할 페이지의 다음 순서로 Lib 디렉토리의 JS 파일을 소개합니다.