Crop image with nativescript-imagecropper Android

[marcelomiranda90]

Hello,

I had implemented the nativescript-imagecropper with the default camera and tried to implement it with nativescript-rad-imagepicker.

From what I saw in the documentation, the nativescript-rad-imagepicker returns an imageSource, which is what is requested by nativescript-imagecropper, the interface for the cut appears, but upon confirming the image is not returned.

I have not yet been able to run a test to see if it works on iOS, I'll do it soon.
Implementation using the native camera

foto() {
    takePicture({ width: 300, height: 300, keepAspectRatio: true, cameraFacing: "front" })
      .then((imageAsset) => {
        let source = new ImageSource();
        source.fromAsset(imageAsset).then((source) => {
          // now you have the image source    
          // pass it to the cropper     
          this.show(source);
        });
      }).catch((err) => {
        console.log("Error -> " + err.message);
      });
  }

Implementation using the nativescript-rad-imagepicker

pickImage() {
      const opts: PickerOptions = {
        doneButtonTitle: "Finish",
        allowVideoSelection: false,
        noImagesTitle: "No images here :(",
        imageLimit: 1
      };
  
      this.radImagepicker.pick(opts).then(selectedImages => {
        if (selectedImages) {
          this.show(selectedImages[0]);

        } else {
          console.log('User pressed cancel');
        }
      });
}

show function

show(imageSource: ImageSource) {

    var imageCropper = new ImageCropper();
    imageCropper.show(imageSource,{width:300,height:300}).then((args) => {

      img = args.image;

    },
    error => { console.log("erro ao cortar foto"); })
    .catch((e) => {
      console.log(e);
      alert("erro")
    });
}

package.json

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "tns-ios": {
      "version": "5.3.1"
    },
    "tns-android": {
      "version": "5.3.1"
    }
  },
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/http": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "@auth0/angular-jwt": "^2.1.0",
    "@nstudio/nativescript-rad-imagepicker": "^2.0.5",
    "email-validator": "^2.0.4",
    "nativescript-angular": "^7.2.3",
    "nativescript-background-http": "^3.4.0",
    "nativescript-camera": "^4.4.0",
    "nativescript-cardview": "^3.1.1",
    "nativescript-fancyalert": "^3.0.6",
    "nativescript-fresco": "^5.2.0",
    "nativescript-image-cache-it": "^4.1.2",
    "nativescript-imagecropper": "^1.0.5",
    "nativescript-insomnia": "^1.2.2",
    "nativescript-iqkeyboardmanager": "^1.4.0",
    "nativescript-ngx-fonticon": "^4.2.0",
    "nativescript-photoviewer": "^2.1.1",
    "nativescript-plugin-firebase": "^8.2.0",
    "nativescript-rating-dialog": "^1.0.2",
    "nativescript-snackbar": "^4.1.2",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-calendar": "^4.0.0",
    "nativescript-ui-chart": "^4.0.1",
    "nativescript-ui-listview": "^6.1.0",
    "nativescript-ui-sidedrawer": "^6.0.0",
    "nativescript-youtubeplayer": "^3.0.1",
    "reflect-metadata": "~0.1.8",
    "rxjs": "^6.3.3",
    "tns-core-modules": "^5.3.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~7.1.0",
    "@ngtools/webpack": "~7.1.0",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "lazy": "^1.0.11",
    "nativescript-dev-typescript": "^0.9.0",
    "nativescript-dev-webpack": "^0.18.5",
    "tslint": "^5.11.0",
    "typescript": "~3.1.1"
  }
}