ngCordova安装与插件的使用 --相机拍摄和本地相册选择照片

为什么80%的码农都做不了架构师？>>>   

一，安装ngCordova

    bower install ngCordova --save-dev

二，引入ng-cordova.js文件

    把ng-cordova.js或ng-cordova.min.js 引入到index.html中。

    注意顺序：要放在cordova.js之前，AngularJS/ Ionic文件之后（ngCordova依赖AngularJS）

三，注入ng-cordova依赖

    在主程序的app.js中引入ng-cordova依赖

angular.module('myApp',['ngCordova'])

四，添加插件到Cordova CLI环境中

    一个较好的cordova插件清单链接 http://doc.wex5.com/cordova-plugins/

    官网ng-cordova插件集合：http://ngcordova.com/docs/plugins/   

    eg.安装照相机插件

    在项目的目录下，打开命令行，输入

$ cordova plugin add cordova-plugin-camera

    查看已安装插件

$ cordova plugin ls
cordova-plugin-camera 2.1.1 "Camera"

五，camera插件的使用详情

    1. 主js文件（app.js）中要有以下代码，这些功能是启动应用就要有。

angular.module('myApp',
    [
        'ionic',
        'ngCordova',
        'ionic-native-transitions',
        'myApp.controllers',
        'myApp.services',
        'myApp.directives'
    ])

    .run(function (
        $ionicPlatform,
        $timeout,
        $rootScope,
        $cordovaNetwork
    ) {
          $ionicPlatform.ready(function () {
            if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                cordova.plugins.Keyboard.disableScroll(true);
        
            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
            }
          }   
    });

    2.在需要使用的模块中注入$cordovaCamera服务

//点击换头像的方法
$scope.action.toChangeAvatar = function () {

    var hideSheet = $ionicActionSheet.show({
        buttons: [
            {text: '拍照'},
            {text: '从手机相册选择'}
        ],
        cancelText: '取消',
        cancel: function () {
        },
        buttonClicked: function (index) {
            console.log(index);
            if (index == '0') {
                document.addEventListener("deviceready", function () {
                        //拍照
                        var options = {
                            quality: 50,
                            destinationType: Camera.DestinationType.DATA_URL,
                            sourceType: Camera.PictureSourceType.CAMERA,
                            allowEdit: true,
                            encodingType: Camera.EncodingType.JPEG,
                            targetWidth: 100,
                            targetHeight: 100,
                            popoverOptions: CameraPopoverOptions,
                            saveToPhotoAlbum: true,
                            correctOrientation: true
                        };
                    $cordovaCamera.getPicture(options).then(function (imageData) {
                        $scope.data.imageSrc = "data:image/jpeg;base64," + imageData;
                    }, function (err) {
                        // error
                    });
                }, false);

            } else if (index == '1') {
                document.addEventListener("deviceready", function () {
                    //从手机相册选择
                    var options = {
                        destinationType: Camera.DestinationType.FILE_URI,
                        sourceType: 2,     //设为0或2，调用的就是系统的图库
                        quality: 50,
                        allowEdit: true,
                        targetWidth: 200,
                        targetHeight: 200
                    };

                    $cordovaCamera.getPicture(options).then(function (imageURI) {
                        $scope.data.imageSrc = imageURI;
                    }, function (err) {
                        // error
                    });


                    //$cordovaCamera.cleanup().then(); // only for FILE_URI

                }, false);


            }
            return true;
        }
    });

    3.在视图上绑定

<li class="item item-icon-right" ng-click="action.toChangeAvatar()">头像
    <img class="my_info_avatar" ng-src="{{data.imageSrc}}">
    <i class="icon ion-ios-arrow-right"></i>
</li>

转载于:https://my.oschina.net/SZQing/blog/656839