1. 程式人生 > >ionic新增調取攝像頭外掛--cordova-plugin-camera

ionic新增調取攝像頭外掛--cordova-plugin-camera

首先,引入cordova和ng-cordova的js:

<script src="js/ng-cordova.js"></script>
<script src="cordova.js"></script>

第二步:在模組內加上ngCordova:

angular.module('starter.controllers', ['ionic', 'ionic-img-lazy-load', 'ionicLazyLoad','ngCordova'])

第三步:在控制器內加上依賴:

.controller('AccountCtrl',function
($scope,dataInfo,$cordovaCamera) {
})

完整程式碼:
html:

<button class="button button-bar" ng-click="takePic()">點選我試著開啟照相機</button>
<img id="myImage" alt=""/>     <!-- 這裡是放你拍照返回的照片 -->

js:

//呼叫相機外掛
$scope.takePic=function(){
  var options = {
                                                              //這些引數可能要配合使用,如選擇了sourcetype是0,destinationtype要相應的設定為1:【返回檔案的URI(content://media/external/images/media/2 for Android)】
quality: 50, //相片質量0-100 destinationType: Camera.DestinationType.FILE_URI, //返回型別:DATA_URL= 0,返回作為 base64 編碼字串。 FILE_URI=1,返回影像檔的 URI。NATIVE_URI=2,返回影象本機URI sourceType: Camera.PictureSourceType.CAMERA, //從哪裡選擇圖片:PHOTOLIBRARY=0(從裝置相簿選擇圖片),相機拍照=1,SAVEDPHOTOALBUM=2,0和1其實都是本地相簿
allowEdit: true, //在選擇之前允許修改截圖 encodingType:Camera.EncodingType.JPEG, //儲存的圖片格式: JPEG = 0, PNG = 1 targetWidth: 200, //照片寬度 targetHeight: 200, //照片高度 mediaType:0, //可選媒體型別:圖片=0,預設值,只允許選擇圖片將返回指定DestinationType的引數。 視訊格式=1,允許選擇視訊,最終返回 FILE_URI(網址)。ALLMEDIA= 2,允許所有媒體型別的選擇。 cameraDirection:0, //選擇攝像頭型別(前置攝像頭或者後面的攝像頭):Back= 0(後置),Front-facing = 1(前置) popoverOptions: CameraPopoverOptions, //CameraPopoverOptions,iOS特供,從iPad的系統相簿選擇圖片,指定popover的定位元素的位置箭頭方向和引數 saveToPhotoAlbum: true //儲存進手機相簿 }; $cordovaCamera.getPicture(options).then(function(imageData) {//alert(imageData); var image = document.getElementById('myImage'); image.src=imageData; }, function(err) { alert("err的值:"+err) }); };

注:上面程式碼會出現一個問題,就是拍攝的照片成像效果很差,不想要這種效果的話,建議不設定targetWidth和targetHeight(照片的寬高),在css裡面去設定這個img標籤的樣式,例如:

#myImage{
            width: 100%;
            height: 100%;
            max-width: 600px;
        }

附上這個外掛文件的中英文說明供參考:
cordova-plugin-camera 外掛說明文件
中文文件
英文文件