HTML5는 QR 코드 스캐닝 및 구문 분석 _html5 튜토리얼 기술을 구현합니다.

소개:
최근 회사 프로젝트에 대한 요구 사항이 있습니다. Weibo 클라이언트에서 h5 페이지의 버튼은 네이티브와 상호 작용하여 카메라를 호출하고 QR 코드를 스캔하고 구문 분석할 수 있습니다. Weibo 클라이언트가 아닌 경우(WeChat 또는 Safari와 같은 기본 브라우저)에서 시스템의 사진 또는 사진 업로드 버튼을 호출하고 사진을 찍거나 사진을 업로드하여 QR 코드를 구문 분석합니다.
두 번째 해결 방법은 프런트엔드 js에서 QR 코드를 구문 분석해야 합니다. 이는 타사 구문 분석 라이브러리 jsqrcode에 의존합니다. 이 라이브러리는 이미 브라우저 측에서 카메라를 호출하는 작업을 지원하지만 getUserMedia라는 속성에 의존합니다. 모바일 브라우저는 이 속성을 잘 지원하지 않으므로 이미지를 업로드해야만 QR 코드를 간접적으로 구문 분석할 수 있습니다.
GetUserMedia 속성 호환 브라우저 목록:

먼저 QR코드 파싱에 이렇게 훌륭한 코드를 제공해 주신 jsqrcode 개발자님께 감사의 말씀을 전하고 싶습니다. 덕분에 작업량이 많이 줄었습니다. jsqrcode 주소: 나를 클릭하세요
내 코드 라이브러리 주소: 나를 클릭하세요
1. 해결된 문제:
1. 클라이언트는 카메라를 호출하여 QR 코드를 스캔하고 분석합니다.
2. QR 코드를 스캔하여 기본 브라우저와 WeChat 클라이언트에서 분석할 수 있습니다.
2. >웹측이나 h5측에서 QR코드를 스캔하는 작업을 직접 완료할 수 있습니다.
3.단점:
그림이 선명하지 않아 파싱에 실패하기 쉽습니다. 사진을 스캔하려면 렌즈가 QR 코드에서 떨어져 있어야 합니다(매우 가까운 거리). 기본 통화 카메라 분석에 비해 1~2초 지연이 발생합니다.
참고:
이 플러그인은 zepto.js 또는 jQuery.js와 함께 사용해야 합니다.
사용 지침:
1 . 사용해야 하는 곳 페이지는

코드 복사코드는 다음과 같습니다.

<script src="lib/zepto.js"></script>

<script src="lib/qrcode .lib.min.js"></script>

<script src="lib/qrcode.js"></script>

2. 버튼의 html 스타일을 사용자 정의합니다.

플러그인은 <input type="file" />을 사용해야 하기 때문에 html 구조에는 고정된 표시 스타일이 있습니다. 웹 페이지에서 버튼 스타일을 사용자 정의하려면 다음 샘플 코드 구조에 따라 코드를 중첩할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

<div class="qr-btn" node-type="jsbridge">QR 코드 1 스캔

<입력 노드- type="jsbridge" type="file " name="myPhoto" value="QR 코드 1 스캔" />

</div>


그런 다음 입력의 CSS를 설정합니다. 버튼을 숨기려면 버튼을 숨깁니다. 예를 들어 Selector 속성을 사용합니다

코드 복사

코드는 다음과 같습니다.

input[node-type=jsbridge ]{

visibility: hided;

}


여기서는 class="qr 스타일만 정의하면 됩니다. -btn"을 필요에 따라 선택합니다.

3. 페이지에서 Qrcode 개체를 초기화합니다.

코드를 복사합니다

//QR 코드 스캔 버튼을 초기화하고 사용자 정의 노드 유형 속성을 전달합니다

$(function() {

Qrcode.init($('[ 노드 유형= jsbridge]'));
})



주요 코드 분석

코드 복사

코드는 다음과 같습니다

(function($) {
var Qrcode = function(tempBtn) {
//이 개체는 Weibo 도메인에서만 구문 분석을 지원합니다. 즉, Weibo 아래 페이지에만 해당되는 것이 아닙니다. domain.두 번째 솔루션은 QR 코드를 구문 분석하는 데 사용할 수 있습니다.
if (window.WeiboJSBridge) {
$(tempBtn).on('click', this.weiBoBridge)
} else {
$( tempBtn).on('change', this.getImgFile);
}
};
Qrcode.prototype = {
weiBoBridge: function() {
WeiboJSBridge.invoke( 'scanQRCode' , null, function(params) {
//QR 코드 스캔 결과 가져오기
location.href=params.result;
})
},
getImgFile : function() {
var _this_ = this;
var imgFile = $(this)[0].files;
var oFile = imgFile[0]
var oFReader = new FileReader() ;
var rFilter = /^(?:image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png| image/svg xml|image /tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable -graymap|이미지/x -portable-pixmap|이미지/x-rgb|이미지/x-xbitmap|이미지/x-xpixmap|이미지/x-xwindowdump)$/i
if (imgFile.length === 0) {
return;
}
if (!rFilter.test(oFile.type)) {
alert("올바른 이미지 형식을 선택하세요!")
return; >}
/ 이미지를 성공적으로 읽은 후 실행되는 코드
oFReader.onload = function(oFREvent) {
qrcode.decode(oFREvent.target.result)
qrcode.callback = function(data ) {
//QR 코드 스캔 결과 가져오기
location.href = data;
}
oFReader.readAsDataURL(oFile)},
destory: function() {
$(tempBtn).off('click');
}
}
//초기화
Qrcode.init = function(tempBtn) {
var _this_ = this;
var inputDom;
tempBtn.each(function() {
new _this_($(this));
}); node-type=qr-btn] ').on('click', function() {
$(this).find('[node-type=jsbridge]')[0].click();
});
};
window.Qrcode = Qrcode;
})(window.Zepto ? Zepto : jQuery)



>
1. 전화 이전 페이지

2. 전화 접속 후의 페이지