QR 코드 스캐닝 및 파싱의 H5 제작을 위한 코드 예제

이 글은 주로 QR 코드 스캐닝과 파싱을 구현하기 위한 HTML5 관련 정보를 소개합니다. 필요한 친구들은

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

먼저 QR 코드 구문 분석을 위한 훌륭한 코드를 제공해준 jsqrcode 개발자에게 감사의 말씀을 전하고 싶습니다. , 이는 많은 작업의 수를 줄였습니다. jsqrcode 주소: 클릭하세요
내 코드 라이브러리 주소: 클릭하세요
1. 해결된 문제:
1. Weibo 클라이언트에서 카메라를 불러와 QR 코드를 스캔하는 기능
2. 기본 브라우저 및 WeChat 클라이언트에서 QR 코드를 스캔하고 분석할 수 있습니다.
2. 장점:
QR 코드 작업을 직접 스캔할 수 있습니다. 🎜>
3. 단점: 사진이 선명하지 않고 분석에 실패하기 쉽습니다(사진을 스캔하려면 렌즈가 QR 코드에 매우 가까워야 함). 기본 카메라에서는 구문 분석이 1~2초 지연됩니다.

참고: 이 플러그인은 zepto.js 또는
jQuery.js와 함께 사용해야 합니다.
사용법:
1. 사용해야 하는 페이지에서 lib 디렉터리에 있는 js 파일을 다음 순서대로 소개합니다

코드는 다음과 같습니다.

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

2. 버튼의 html 스타일을 사용자 정의하세요 플러그인은 a454dae339e18e68d191b684398673a9을 사용해야 하기 때문에 html 구조에는 고정된 표시 스타일이 있습니다. 웹 페이지에서 버튼 스타일을 사용자 정의하려면 다음을 따르면 됩니다. 중첩 코드

의 샘플 코드 구조는 다음과 같습니다.

<p class="qr-btn" node-type="jsbridge">扫描二维码1 
<input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" /> 
</p>

입력 버튼의 CSS를 설정하여 버튼을 숨깁니다. 예를 들어
속성 선택기

코드는 다음과 같습니다.

input[node-type=jsbridge]{ 
visibility
: hidden; 
}

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

3. Qrcode 초기화 객체

코드는 다음과 같습니다.

//初始化扫描二维码按钮，传入自定义的 node-type 属性 
$(function() { 
Qrcode.init($('[node-type=jsbridge]')); 
});

주요 코드 분석

코드는 다음과 같습니다.

(function($) { 
var Qrcode = function(tempBtn) { 
//该对象只支持微博域下的解析，也就是说不是微博域下的页面只能用第二种方案解析二维码 
if
 (window.WeiboJSBridge) { 
$(tempBtn).on('click', this.weiBoBridge); 
} 
else
 { 
$(tempBtn).on('change', this.getImgFile); 
} 
}; 
Qrcode.prototype = { 
weiBoBridge: function() { 
WeiboJSBridge.invoke('scanQRCode', 
null
, function(params) { 
//得到扫码的结果 
location.href=params.result; 
}); 
}, 
getImgFile: function() { 
var _this_ = this; 
var imgFile = $(this)[0].files; 
var oFile = imgFile[0]; 
var o
FRead
er = 
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\-any
map
|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/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.c
all
back = function(data) { 
//得到扫码的结果 
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. 접속 후 페이지

[관련 추천]

1.Html5 무료 동영상 튜토리얼

2.

H5의 다중 이미지 업로드 예시에 대한 자세한 설명

H5의 사용자 정의 속성 데이터에 대한 자세한 설명-*

4 .

H5 마이크로 시나리오 구현 방법을 가르쳐줍니다

5.

HTML5 로컬 데이터베이스 인스턴스에 대한 자세한 설명

위 내용은 QR 코드 스캐닝 및 파싱의 H5 제작을 위한 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!