Question

在预览相机图像时调用裁剪图像功能的解决方案。我在下面尝试过此代码。

var options = {
      quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.CAMERA,
      allowEdit: true,
      encodingType: Camera.EncodingType.JPEG,
      saveToPhotoAlbum: false,
        correctOrientation:true
    };
 try{
      $cordovaCamera.getPicture(options).then(function(imageData) {
        var image = document.getElementById('myImage');
        image.src = "data:image/jpeg;base64," + imageData;

      }, function(e) {
        alert(e);
      });
    } catch(e){
      alert(e);
    }
  };

 getpicture function is invoked by cordova camera plugin. while coded allowedit as true. it invokes the crop image function after clicking ok. but I want to invoke the crop function before placing ok button(In preview screen).

Answer 1

我的代码工作正常。试试吧（我正在使用这两个选项 - 拍照并浏览照片） 控制器代码

.controller("CameraController", function ($scope, $cordovaCamera) {
                $scope.takePhoto = function () {
                  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) {
                        $scope.imgURI = "data:image/jpeg;base64," + imageData;
                    }, function (err) {
                        // An error occured. Show a message to the user
                    });
                };

                $scope.choosePhoto = function () {
                  var options = {
                    quality: 75,
                    destinationType: Camera.DestinationType.DATA_URL,
                    sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
                    allowEdit: true,
                    encodingType: Camera.EncodingType.JPEG,
                    targetWidth: 300,
                    targetHeight: 300,
                    popoverOptions: CameraPopoverOptions,
                    saveToPhotoAlbum: false
                };

                    $cordovaCamera.getPicture(options).then(function (imageData) {
                        $scope.imgURI = "data:image/jpeg;base64," + imageData;
                    }, function (err) {
                        // An error occured. Show a message to the user
                    });
                };
})

HTML代码

<ion-view view-title="Camera">
    <ion-content>
        <div class="card">
          <button class="button button-full button-assertive" ng-click="takePhoto()">
        Take Photo
        </button>
        <button class="button button-full button-assertive" ng-click="choosePhoto()">
        Choose Photo
        </button>
        </div>
    </ion-content>
</ion-view>

在离子相机预览屏幕中裁剪图像功能

1 个答案: