ionic開發之攝像頭(camera)的調用

    最近項目中遇到了需要調用攝像頭的地方,之前一直沒有弄好,因爲真機運行出現了問題,今天真機運行解決了,使得我怕不急待想試驗一下攝像頭能否調取成功。
    要在ionic中調用camera功能,分一下幾步:
    1、確保你的項目中已經有ngCordova的注入,如何注入呢?在命令行中輸入
bower install ngCordova
    然後在index中引入
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
    同時在你的module中注入`angular.module('myApp', ['ngCordova'])`

    2、第二步:在命令行中輸入下方命令,導入攝像頭模塊的內容
cordova plugin add cordova-plugin-camera
    3、ok,離成功已經不遠了,直接貼出html和js代碼吧:
         <img id="myImage" alt=""/>     //這裏是放你拍照返回的照片
         <button class="button" ng-click="takephoto()">Use camera</button>  //點擊調用攝像頭
.controller('bankCtrl',function($scope,$location,$cordovaCamera){
        $scope.go_back = function(){
            $location.path('/additional/add');
        }
        $scope.takephoto =  function () {
            console.log(44);
            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

            };

            $cordovaCamera.getPicture(options).then(function(imageData) {
                var image = document.getElementById('myImage');
                image.src = "data:image/jpeg;base64," + imageData;
            }, function(err) {
                // error
            });

        };
    })
    注意這裏是拍照後返回的64位圖片數據。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章