ionic 二维码的扫描（包括从本地相册读取和通过摄像头读取）

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);
    };

}]);