ionic開發之攝像頭(camera)的呼叫
阿新 • • 發佈:2019-02-06
最近專案中遇到了需要呼叫攝像頭的地方,之前一直沒有弄好,因為真機執行出現了問題,今天真機執行解決了,使得我怕不急待想試驗一下攝像頭能否調取成功。
要在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點陣圖片資料。