Cordova 掃碼外掛整理-cordova-plugin-qrscanner
阿新 • • 發佈：2019-01-05
在使用Cordova實現掃碼識別外掛有好幾個：barcode-scanner，zbar，qr-scanner
一、本章主要介紹qr-scanner，目前版本是V3
目前支援的平臺：
二、常用操作
1.建立Cordova 專案，使用命令安裝外掛（對於使用visual studio工具，也要使用命令安裝）
cordova plugin add cordova-plugin-qrscannervar done = function(err, status){ if(err){ console.error(err._message); } else { console.log('QRScanner is initialized. Status:'); console.log(status); } }; QRScanner.prepare(done);
3.監聽掃描結果、取消監聽
var callback = function(err, contents){
if(err){
console.error(err._message);
}
alert('The QR Code contains: ' + contents);
};
QRScanner.scan(callback);
QRScanner.cancelScan(function(status){
console.log(status);
});5.開啟、關閉手電筒QRScanner.show(function(status){ console.log(status); }); QRScanner.hide(function(status){ console.log(status); });
QRScanner.enableLight(function(err, status){
err && console.error(err);
console.log(status);
});
QRScanner.disableLight(function(err, status){
err && console.error(err);
console.log(status);
});7.銷燬、其他api參考gitQRScanner.useFrontCamera(function(err, status){ err && console.error(err); console.log(status); }); QRScanner.useBackCamera(function(err, status){ err && console.error(err); console.log(status); });
QRScanner.destroy(function(status){
console.log(status);
});三、使用示例
1.index頁面內容
<body style="background:transparent;">
<div class="qrscanner">
<div class="qrscanner-area">
</div>
<div class="through-line"></div>
<div class="button-bottom">
<button id="btn1" class="btn btn-primary">
手電筒
</button>
<button id="btn2" class="btn btn-info">
切換攝像頭
</button>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>/*很做作的做了一個上下移動的橫線，也不知道是受了誰家二維碼掃描的影響*/
.qrscanner {
width: 100%;
height: 100%;
}
body,html{
width:100%;
height:100%;
}
.qrscanner-area {
width: 100%;
height: 85%;
background: url(../images/scanner.svg) no-repeat center center;
background-size: contain;
}
.through-line {
left: 20%;
width: 60%;
height: 2px;
background: red;
position: absolute;
animation: myfirst 5s linear infinite alternate;
}
@keyframes myfirst {
0% {
background: red;
top: 180px;
}
25% {
background: yellow;
top: 220px;
}
50% {
background: blue;
top: 240px;
}
75% {
background: green;
top: 260px;
}
100% {
background: red;
top: 280px;
}
}
.button-bottom {
width: 128px;
position: absolute;
left: 50%;
bottom: 80px;
margin-left: -64px;
}
.icon-camera {
float: left;
} if (typeof (QRScanner) != 'undefined') {
//初始化檢測，申請攝像頭等許可權
QRScanner.prepare(onDone); // show the prompt
} else {
alert('外掛載入失敗');
}
function onDone(err, status) {
if (err) {
console.error(err);
}
if (status.authorized) {
//繫結掃描監聽
// `QRScanner.cancelScan()` is called.
QRScanner.scan(displayContents);
function displayContents(err, text) {
if (err) {
// an error occurred, or the scan was canceled (error code `6`)
alert('啟動掃描出錯：' + JSON.stringify(err));
} else {
// The scan completed, display the contents of the QR code:
alert(text);
}
}
//開始掃描，需要將頁面的背景設定成透明
QRScanner.show();
} else if (status.denied) {
// The video preview will remain black, and scanning is disabled. We can
// try to ask the user to change their mind, but we'll have to send them
// to their device settings with `QRScanner.openSettings()`.
alert('使用者拒絕訪問攝像頭');
} else {
// we didn't get permission, but we didn't get permanently denied. (On
// Android, a denial isn't permanent unless the user checks the "Don't
// ask again" box.) We can ask again at the next relevant opportunity.
}
}//切換開啟手電筒
var light = false;
$('#btn1').click(function () {
if (light) {
QRScanner.enableLight();
alert('enableLight');
} else {
QRScanner.disableLight();
}
light = !light;
});
//切換前後攝像頭
var frontCamera = false;
$('#btn2').click(function () {
if (frontCamera) {
QRScanner.useFrontCamera();
alert('useFrontCamera');
} else {
QRScanner.useBackCamera();
}
frontCamera = !frontCamera;
});https://segmentfault.com/a/1190000012164809