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位图片数据。
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值