ionic开发之摄像头（camera）的调用

来源：互联网发布：iphone6软件安装目录编辑：程序博客网时间：2024/06/04 19:08

    最近项目中遇到了需要调用摄像头的地方，之前一直没有弄好，因为真机运行出现了问题，今天真机运行解决了，使得我怕不急待想试验一下摄像头能否调取成功。    要在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位图片数据。

0 0