首页 文章

如何使用离子框架和cordovaCamera插件拍照并裁剪它们？

提问于
浏览 次
2

目前我正在开发一个离子框架移动应用程序，我有问题正确制作 Profiles 图片 .

我正在使用cordovaCamera插件，我必须用相机拍照或使用库中的图片 . 在获得图片后，用户应该能够裁剪图片以仅上传部件，他想要 .

使用相机拍照的javascript- / angular-code如下所示：

$scope.takePicture =  function () {

    var options = {
    quality: 100,
    destinationType: Camera.DestinationType.DATA_URL,
    sourceType: Camera.PictureSourceType.CAMERA,
    allowEdit: true,
    encodingType: Camera.EncodingType.JPEG,
    targetWidth: 500,
    targetHeight: 500,
    popoverOptions: CameraPopoverOptions,
    saveToPhotoAlbum: false,
    correctOrientation: true
  };

  $cordovaCamera.getPicture(options).then(function(imageData) {
    $scope.imgURI = "data:image/jpeg;base64," + imageData;
  }, function(err) {
    // error-handling not done by now
  });

};

如果我想从相机中选择一张图片，代码看起来几乎一样，我只需将一行更改为：

sourceType: Camera.PictureSourceType.PHOTOLIBRARY,

问题是现在，如果我设置allowEdit：true，我可以从相机拍照并在Android设备上裁剪它们，但是iphone无法裁剪拍摄/选择的照片 .

如果我设置allowEdit：false并且只是从cordovaCamera获取图片以后使用其他函数裁剪它，图片会改变Android设备上的方向并且选项correctOrientation根本不起作用 .

我真的需要一些帮助来解决这个问题 .

亲切的问候

rholtermann

angularjs cordova ionic-framework cordova-plugins

2 回答

  • 1

    我也有这个插件的麻烦，在互联网上查找后，我发现了相机的插件属性

    allowEdit: true

    不能正常工作，不返回承诺中的裁剪图像，而是原始（因此未修改）图像，请检查forum thread

    我用这个plugin和cordova相机插件一起解决了这个问题，这是一个非常整洁的解决方案！

    回复于
  • 1

    你必须使用 $cordovaCamera.getPicture(options) 工作拍照或从图书馆工作 . 我正在发布一个适用于我的相机示例代码在你的控制器中写入相机代码为

    $scope.userPic = function(){
            console.log("userPic function got called");
            $ionicPopup.show({
              template: '<p>Take picture or use from library</p>',
              title: 'Choose',
              buttons: [
                {
                  text: '<b>Camera</b>',
                  onTap: function(e) {
                    return "camera";
                  }
                },
                {
                  text: '<b>Library</b>',
                  type: 'button-positive',
                  onTap: function(e) {
                    return "library";
                  }
                },
              ]
            }).then(function(resp) {
              $scope.takePicture(resp);
              console.log('resp', resp);
            });
        }

        $scope.takePicture = function(resp){
            console.log("takePicture function got called");
            console.log(resp);
            var source;
            if (resp == "camera") {
              source = Camera.PictureSourceType.CAMERA;
            }else{
              source = Camera.PictureSourceType.PHOTOLIBRARY;
            };
            var options = {
              quality : 75,
              destinationType : Camera.DestinationType.FILE_URI,
              sourceType : source,
              allowEdit : true,
              encodingType: Camera.EncodingType.JPEG,
              targetWidth: 300,
              targetHeight: 300,
              popoverOptions: CameraPopoverOptions,
              saveToPhotoAlbum: false
            };
             $cordovaCamera.getPicture(options).then(function(imageData) {
                console.log(imageData);
            }, function(err) {
                console.log(err);
                // error
            });
             }

    在您的HTML中将相机按钮代码写为

    <button class="button button-bar button-balanced" ng-click="userPic()">
      Camera
    </button>
    回复于

相关问题