Ionic Cordova+AngularJS：如何调用相机而非相册及原生键盘与相机监听

嘿，我来帮你搞定这两个在Ionic Cordova + AngularJS项目里的需求，都是日常开发里常用的操作，一步步来拆解：

首先得确保已经安装了Cordova相机插件，打开终端执行：

cordova plugin add cordova-plugin-camera

然后在你的AngularJS控制器里，注入$cordovaCamera服务（Ionic 1已经封装好这个服务，直接用就行），写一个触发拍照的方法：

angular.module('yourApp').controller('CameraCtrl', function($scope, $cordovaCamera) {
  $scope.takePhoto = function() {
    // 相机配置选项
    var options = {
      quality: 80, // 照片质量（0-100）
      destinationType: Camera.DestinationType.DATA_URL, // 返回base64格式，也可选FILE_URI
      sourceType: Camera.PictureSourceType.CAMERA, // 重点！指定调用相机而非相册
      allowEdit: false, // 是否允许编辑照片
      encodingType: Camera.EncodingType.JPEG,
      targetWidth: 800, // 压缩后照片宽度
      targetHeight: 800,
      saveToPhotoAlbum: false // 是否保存到系统相册
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
      // 拍照成功，处理返回的照片数据
      var image = "data:image/jpeg;base64," + imageData;
      $scope.photo = image; // 绑定到视图显示照片
    }, function(err) {
      // 拍照失败，处理错误
      console.error('相机调用失败:', err);
    });
  };
});

重点提醒：一定要把sourceType设为Camera.PictureSourceType.CAMERA，如果改成PHOTOLIBRARY就会打开相册了，这是你要避免的。另外记得等deviceready事件触发后再调用相机（Ionic一般会自动处理，遇到问题可以手动监听）：

document.addEventListener("deviceready", function() {
  // 相机相关代码放在这里
}, false);

这部分分两块来处理：

2.1 原生键盘监听 #

先安装适配Ionic 1的键盘插件：

cordova plugin add ionic-plugin-keyboard

然后在控制器里用$ionicKeyboard服务监听键盘的显示/隐藏事件：

angular.module('yourApp').controller('KeyboardCtrl', function($scope, $ionicKeyboard) {
  // 监听键盘弹出
  $ionicKeyboard.onShow(function() {
    console.log('原生键盘已弹出');
    // 这里可以做页面布局适配，比如滚动到输入框位置
  });

  // 监听键盘收起
  $ionicKeyboard.onHide(function() {
    console.log('原生键盘已收起');
    // 恢复页面布局等操作
  });

  // 手动触发隐藏键盘
  $scope.hideKeyboard = function() {
    $ionicKeyboard.hide();
  };
});

如果用最新的cordova-plugin-ionic-keyboard，可以直接监听原生事件：

document.addEventListener('keyboardWillShow', function(e) {
  console.log('键盘即将弹出，高度:', e.keyboardHeight);
});

document.addEventListener('keyboardWillHide', function() {
  console.log('键盘即将收起');
});

2.2 原生相机的监听函数 #

Cordova相机插件本身没有直接提供打开/关闭的监听事件，但我们可以通过自定义事件+回调来实现类似效果：

angular.module('yourApp').controller('CameraCtrl', function($scope, $cordovaCamera, $rootScope) {
  $scope.takePhoto = function() {
    console.log('相机即将打开');
    // 广播自定义事件，通知其他组件相机状态
    $rootScope.$broadcast('camera:opened');

    var options = { /* 相机配置选项 */ };

    $cordovaCamera.getPicture(options).then(function(imageData) {
      console.log('相机已关闭，拍照成功');
      $rootScope.$broadcast('camera:closed', { success: true, data: imageData });
      // 处理照片逻辑
    }, function(err) {
      console.log('相机已关闭，拍照失败');
      $rootScope.$broadcast('camera:closed', { success: false, error: err });
      // 处理错误逻辑
    });
  };

  // 在当前控制器内监听相机状态
  $scope.$on('camera:opened', function() {
    // 相机打开时的操作，比如暂停动画、隐藏导航栏
  });

  $scope.$on('camera:closed', function(event, data) {
    // 相机关闭时的操作，比如恢复动画
    if (data.success) {
      // 处理成功后的逻辑
    }
  });
});

这种方式足够覆盖大多数场景，如果需要更底层的系统级监听（比如Android的相机广播），就得额外写原生插件代码了。

内容的提问来源于stack exchange，提问作者Aadhi