ionic 二维码的扫描(包括从本地相册读取和通过摄像头读取)
思路:
摄像头读取:直接调用 $cordovaBarcodeScanner.scan()
本地读取:用$cordovaImagePicker获取图片路径,然后图片用base64编码,将编码后的字符串传给后端进行解析
。
1.安装插件 $cordovaImagePicker 与$cordovaBarcodeScanner
cordova plugin add https://github.com/wymsee/cordova-imagePicker.git
cordova plugin add https://github.com/phonegap/phonegap-plugin-barcodescanner.git
2 .下载ng-cordova.min.js并引用
3.代码
/**
* Created by Michael 2016/12/1
登录控制器
*/
angular.module('login-controller', ['ngCordova', ])
.controller('LoginCtrl', ['$scope', '$ionicPopup', '$timeout', '$cordovaBarcodeScanner', '$cordovaImagePicker', '$ionicActionSheet', '$cordovaDevice', '$data', '$state', '$ionicLoading', function($scope, $ionicPopup, $timeout, $cordovaBarcodeScanner, $cordovaImagePicker, $ionicActionSheet, $cordovaDevice, $data, $state, $ionicLoading) {
//二维码检验
$scope.checkQrCode = function(qrCode) {
if (
(qrcode.split(",").length == 2) && (qrcode.split("|").length == 2) && (qrcode.indexOf(",") < qrcode.indexOf("|"))
) {
return true;
} else {
return false;
}
}
//存放二维码所有信息(扫码结果)
$scope.scanResult = {};
/*
*
* 打开摄像头扫描二维码
*
* 得到的结果 imageData:------- imageData.text; //二维码信息
* ------- imageData.format; //编码格式
* ------- imageData.cancelled; //cancelled
*/
$scope.scanBarcode = function() {
$cordovaBarcodeScanner.scan().then(function(imageData) {
$scope.scanResult.text = imageData.text; //二维码信息
var validateResult = $scope.checkQrCode($scope.scanResult.text);
if (validateResult == false) {
$scope.showErrorMesPopup("该二维码不是本系统所使用的,请检查", 2000);
return;
}
var postData = {
"qrCode": $scope.scanResult.text,
"version": localStorage.getItem("version"),
"UUID": localStorage.getItem("UUID")
};
//loading框
$ionicLoading.show({
template: '扫描完成,正在登录'
});
$data.commonServiceFunction("POST", "Account/login", false, postData)
.success(function(data) {
if (data.status == '20*') {
$state.go("tab.status");
$timeout(function() {
$ionicLoading.hide(); //loading框隐藏
}, 200);
$scope.showSuccessMesPopup("登录成功", 1500)
localStorage.setItem("mapsUID", data.data.mapsUID);
localStorage.setItem("qrCode", data.data.qrCode);
localStorage.setItem("webserviceAddress", data.data.webserviceAddress);
localStorage.setItem("staffId",data.data.staffId);
} else {
$timeout(function() {
$ionicLoading.hide(); //loading框隐藏
}, 200);
switch (data.status) {
case "40*":
$scope.showErrorMesPopup(data.errorMessage, 2000);
break;
case "50*":
$scope.showErrorMesPopup(data.errorMessage, 2000);
break;
}
}
}).error(function() {
$ionicLoading.hide(); //关闭loading框
$scope.showErrorMesPopup("服务器出现异常,请稍后重试");
});
}, function(error) {
$scope.showErrorMesPopup("二维码扫描失败", 2000);
});
};
/*
*
* 点击扫码button后的选择框
*
*/
$scope.addAttachment = function() {
var UUID = $cordovaDevice.getUUID(); //获取设备的UUID
localStorage.setItem("UUID", UUID); //将UUID存入localStorage
localStorage.setItem("version", "1.0.0"); //将版本号存入localStorage
$ionicActionSheet.show({
buttons: [{
text: '相 机'
}, {
text: '从相册选择'
}],
cancelText: '取 消',
titleText: '选 取 二 维 码',
cancel: function() {
return true;
},
buttonClicked: function(index) {
switch (index) {
case 0:
$scope.scanBarcode(); //相机扫描
break;
case 1:
$scope.pickImage(); //从相册选取
break;
default:
break;
}
return true;
}
})
};
/*
*
* 将图片进行base64编码
*
* param imageUrl: 得到的选中的本地相册中二维码的路径
*
* return base64编码后得到的字符串
*
*/
$scope.getImageToBase64 = function(imgUrl) {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var img = new Image;
img.src = imgUrl;
var dataURL = '';
img.onload = function() {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
dataURL = canvas.toDataURL('image/jpg');
};
$data.commonServiceFunction("POST", "Account/loginByBase64CodeString", false, { "base64String": dataURL,"version": localStorage.getItem("version"),
"UUID": localStorage.getItem("UUID")})
.success(function(data) {
if (data.status == '20*') {
$state.go("tab.status");
$timeout(function() {
$ionicLoading.hide(); //loading框隐藏a
}, 200);
$scope.showSuccessMesPopup("登录成功", 1500)
localStorage.setItem("mapsUID", data.data.mapsUID);
localStorage.setItem("qrCode", data.data.qrCode);
localStorage.setItem("webserviceAddress", data.data.webserviceAddress);
localStorage.setItem("staffId",data.data.staffId);
}
}).error(function() {
$ionicLoading.hide(); //关闭loading框
$scope.showErrorMesPopup("服务器出现异常,请稍后重试",2000);
});
};
/*
*
* 从本地相册中获取图片(得到路径)
* Get a list of pictures, with options to limit number, quality, and size of images.
* options :{} -------- maximumImagesCount : Max images to be selected
* -------- width :Width to resize image to (if one of height/width is 0, will resize to fit the other while keeping aspect ratio, if both height and width are 0, the full size image will be returned)
* -------- height : Height to resize image to
* -------- quality: Quality of resized image, defaults to 100
*
*/
$scope.pickImage = function() {
var options = {
maximumImagesCount: 1,
width: 800,
height: 800,
quality: 80
};
$cordovaImagePicker.getPictures(options)
.then(function(results) {
//result是一个list,存放所选择的图片的路径。若maximumImagesCount为1,只有result[0]有数据
$scope.getImageToBase64(results[0]); //调用方法
}, function(error) {
});
};
//登录失败显示框
$scope.showErrorMesPopup = function(title, timeValue) {
var myPopup = $ionicPopup.show({
title: '<b>' + title + '</b>'
});
$timeout(function() {
myPopup.close(); //timeValue时间后关闭
}, timeValue);
};
//登录成功显示框
$scope.showSuccessMesPopup = function(title, timeValue) {
var myPopup = $ionicPopup.show({
title: '<b>' + title + '</b>',
template: '<p style="text-align: center"><ion-spinner icon="ios" class="spinner-positive"></ion-spinner></p>'
});
$timeout(function() {
myPopup.close(); // timeValue时间后后关闭
// $state.go("main");
}, timeValue);
};
}]);