ionic新增調取攝像頭外掛--cordova-plugin-camera
阿新 • • 發佈:2019-01-28
首先,引入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;
}