รู้จักวิธีการใช้งาน camera plugin ใน app ionic material

cordova plugin add cordova-plugin-camera

<ion-view view-title="Profile">
    <ion-content ng-class="{expanded:$scope.isExpanded}">
        <div class="hero slide-up" style="background-image: url('img/profile-bg.jpg');">
            <div class="content">
                <div id="avatar_img" class="avatar" ng-click="changeprofile()"
                     style="background-image: url('img/daenerys.jpg');"
                ></div>
                <h3><a class="light">{{member_user}}</a></h3>
                <h4>{{member_phone}}</h4>
            </div>
        </div>
        <div class="padding">
            File URI: {{fileProfile}}
        </div>
    </ion-content>
</ion-view>

// เราจะกำหนดตัวแปรสำหรับเก็บค่าเริ่มต้น จะใช้ภาพจากอะไร เริ่มต้นใช้จากกล้อง คือถ่ายรูปใหม่
var pic_source = Camera.PictureSourceType.CAMERA;
if(index==1){  // ถ้าเลือกถ่ายรูป ให้ใช้ภาพจาก CAMERA
	pic_source = Camera.PictureSourceType.CAMERA;
}
if(index==2){ // ถ้าเลือกรูปจากอัลบั้ม ให้ใช้ภาพจาก SAVEDPHOTOALBUM
	pic_source = Camera.PictureSourceType.SAVEDPHOTOALBUM;
}
 // ในกรณีตัวอย่างเรามีปุ่มแค่ 3 เมนู ซึ่งค่าที่เท่ากับ 3 คือยกเลิกหรือไม่เลือกภาพ
if(index!=3){ // ดังนั้นคำสั่งเลือกรูปภาพ เราจะให้ทำงานเมื่อไม่ใช้ยกเลิก หรือก็คือเมื่อไม่เท่ากับ 3
// ค่ากรณียกเลิกอาจจะไม่ใช้เลข 3 เสมอไปขึ้นอยู่กับจำนวนเมนูใน action sheet ที่เรากำหนด
	
	var options = {
		quality: 100,
		destinationType: Camera.DestinationType.FILE_URI,
		sourceType: pic_source,
		allowEdit: false,
		encodingType: Camera.EncodingType.JPEG,
		targetWidth: 200,
		targetHeight: 200,
		mediaType: Camera.MediaType.PICTURE,
		popoverOptions: CameraPopoverOptions,
		saveToPhotoAlbum: false,
		correctOrientation:true
	};

	$cordovaCamera.getPicture(options).then(function(imageData) {
		$scope.fileProfile = imageData; // กำหนด object รูปไว้ในตัวแปร  เพื่อแสดงค่า
		var imageAvatar = document.getElementById('avatar_img');
		imageAvatar.style.backgroundImage = "url('"+imageData+"')"; // นำรูปไปเป็น background
	}, function(err) {
		// error
	});
}

.controller('ProfileCtrl', function(
    $scope, $stateParams, $timeout,
    ionicMaterialMotion, ionicMaterialInk, $ionicPlatform,
    $cordovaSpinnerDialog, $cordovaToast, $cordovaActionSheet, $cordovaCamera) {

    $scope.$parent.showHeader();
    $scope.$parent.clearFabs();
    $scope.isExpanded = false;
    $scope.$parent.setExpanded(false);
    $scope.$parent.setHeaderFab(false);
    $scope.$parent.hasShadow();


    // กำหนดตัวแปรสำหรับค่าเริ่มต้นของข้อมูลหน้าโพรไลฟ์
    $scope.member_user = '';
    $scope.member_phone = '';

    // กำหนดให้แสดงเมนูสมาชิก
    $scope.$parent.setMemberMenu(true);

    // สร้างฟังก์ชั่นสำหรับเรียกใช้ Toast plugin
    $scope.showToast = function(str, duration, position){
        $ionicPlatform.ready(function() { // เตรียมก่อนเรียกใช้ plugin
            return $cordovaToast
                .show(str, duration, position)
                .then(function(success) {
                    // success
                }, function (error) {
                    // error
                });
        });
    };

    var db = null;

    $ionicPlatform.ready(function() { // เตรียมก่อนเรียกใช้ plugin
        // ตรวจสอบและทำการเชื่อมต่อกับ db
        db = window.sqlitePlugin.openDatabase({
            name: 'my.db', location: 'default'
        }, function (db) {
            // เชื่อมต่อ db สำเร็จ
            $scope.showToast('Open DB Success','long','bottom');

            // แสดง spin dialog plugin จะใช้หรือไม่ก็ได้ นำมาใช้เผื่อใครไปประยุกต์เพิ่ม
            $cordovaSpinnerDialog.show(null,"รอสักครู่..กำลังโหลดข้อมูล"); // แสดง loading
            $timeout(function() { // ซ่อนอัตโนมัติใน 300 มิลลิวินาที
                $cordovaSpinnerDialog.hide();
            }, 300);

            // เริ่มทำงานของคำสั่ง db
            db.transaction(function (tx) {
                // เตรียมคำสั่ง sql ดึงข้อมูลสมาชิกอิงจาก member_id ที่เราเก็บไว้ใน $scope หลัก
                var query = "SELECT member_user, member_phone" +
                    " FROM member WHERE member_id = ?";
                // ดึงค่า member_id จาก $scope หลักด้วยฟังก์ชั่น getMemberID()
                var id_member = $scope.$parent.getMemberID();

                // ทำคำสั่ง sql ดึงข้อมูลตาม member_id
                tx.executeSql(query, [id_member], function (tx, resultSet) {
                        // ถ้าพบข้อมูล
                        if(resultSet.rows.length){
                            // นำข้อมูลที่ได้ มาไว้ในตัวแปร member_user และ member_phone
                            // เพื่อแสดงในหน้า profile
                            $scope.member_user = resultSet.rows.item(0).member_user;
                            $scope.member_phone = resultSet.rows.item(0).member_phone;
                        }
                        $cordovaSpinnerDialog.hide();
                    },
                    function (tx, error) {
                        $scope.showToast('SELECT error: ' + error.message,'long','bottom');
                    });
            }, function (error) {
                $scope.showToast('transaction error: ' + error.message,'long','bottom');
            }, function () {
                $scope.showToast('transaction ok','long','bottom');
            });
        }, function (error) {
            $scope.showToast('Open database ERROR: ' + JSON.stringify(error),'long','bottom');
        });
    });

    // สร้างตัวแปรสำหรับ เก็บค่าตำแหน่งของไฟล์รูปที่เราได้
    $scope.fileProfile = "";
    
    // กำหนด options การตั้งค่าการแสดงเมนูตัวเลือกใน action sheet
    var options = {
        title: 'เปลี่ยนรูปโพรไฟล์?',
        buttonLabels: ['ถ่ายรูป', 'เลือกจากอัลบั้ม'],
        addCancelButtonWithLabel: 'ยกเลิก',
        androidEnableCancelButton : true,
        winphoneEnableCancelButton : true
    };

    // สร้างฟังก์ชั่นสำหรับแสดง action sheet ที่เราเรียกใช้ในไฟล์ profile.html
    $scope.changeprofile = function(){

        $ionicPlatform.ready(function() { // เตรียมก่อนเรียกใช้ plugin
            // เรียกให้ action sheet แสดง
            $cordovaActionSheet.show(options)
                .then(function(btnIndex) {
                    // เมื่อแสดงแล้ว และเลือกเมนู หรือยกเลิก คืนค่า key
                    var index = btnIndex;
                    //alert(index);// ทดสอบแสดงค่า key

                    var pic_source = Camera.PictureSourceType.CAMERA;
                    if(index==1){
                        pic_source = Camera.PictureSourceType.CAMERA;
                    }
                    if(index==2){
                        pic_source = Camera.PictureSourceType.SAVEDPHOTOALBUM;
                    }
                    if(index!=3){

                        var options = {
                            quality: 100,
                            destinationType: Camera.DestinationType.FILE_URI,
                            sourceType: pic_source,
                            allowEdit: true,
                            encodingType: Camera.EncodingType.JPEG,
                            targetWidth: 200,
                            targetHeight: 200,
                            mediaType: Camera.MediaType.PICTURE,
                            popoverOptions: CameraPopoverOptions,
                            saveToPhotoAlbum: false,
                            correctOrientation:true
                        };

                        $cordovaCamera.getPicture(options).then(function(imageData) {
                            $scope.fileProfile = imageData;
                            var imageAvatar = document.getElementById('avatar_img');
                            imageAvatar.style.backgroundImage = "url('"+imageData+"')";
                        }, function(err) {
                            // error
                        });
                    }


                });
        });

    };



    $timeout(function() {
        ionicMaterialMotion.slideUp({
            selector: '.slide-up'
        });
    }, 300);

    $timeout(function() {
        ionicMaterialMotion.fadeSlideInRight({
            startVelocity: 3000
        });
    }, 700);

    ionicMaterialInk.displayEffect();
})

.controller('ProfileCtrl', function(
    $scope, $stateParams, $timeout,
    ionicMaterialMotion, ionicMaterialInk, $ionicPlatform,
    $cordovaSpinnerDialog, $cordovaToast, $cordovaActionSheet, $cordovaCamera) {

C:\phonegap\learn004>phonegap build android