Image cropping does not work - { "response": "Error", "image": null }

[davidpanic]

Which platform(s) does your issue occur on?

• Android, idk about iOS (can't test)
• Emulator and physical device

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it)

  4.1.2

• Cross-platform modules: (check the 'version' attribute in the node_modules/tns-core-modules/package.json file in your project)

  4.2.0

• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)

  "tns-ios": {
  "version": "4.1.0"
  },
  "tns-android": {
  "version": "4.1.3"
  }

• Plugin(s): (look for the version numbers in the package.json file of your project and paste your dependencies and devDependencies here)

  "dependencies": {
    "@angular/animations": "~6.0.0",
    "@angular/common": "~6.0.0",
    "@angular/compiler": "~6.0.0",
    "@angular/core": "~6.0.0",
    "@angular/forms": "~6.0.0",
    "@angular/http": "~6.0.0",
    "@angular/platform-browser": "~6.0.0",
    "@angular/platform-browser-dynamic": "~6.0.0",
    "@angular/router": "~6.0.0",
    "allow-publish": "^1.0.4",
    "base-64": "^0.1.0",
    "nativescript-angular": "^6.0.0",
    "nativescript-bitmap-factory": "^1.7.1",
    "nativescript-camera": "^4.0.2",
    "nativescript-imagecropper": "^1.0.4",
    "nativescript-loading-indicator": "^2.4.0",
    "nativescript-localstorage": "^1.1.5",
    "nativescript-modal-datetimepicker": "^1.1.3",
    "nativescript-permissions": "^1.2.3",
    "nativescript-phone": "^1.3.1",
    "nativescript-plugin-firebase": "file:./nativescript-plugin-firebase-6.5.0.tgz",
    "nativescript-share-file": "^1.0.4",
    "nativescript-theme-core": "^1.0.4",
    "nativescript-toast": "^1.4.6",
    "nativescript-ui-calendar": "^3.7.0",
    "nativescript-ui-sidedrawer": "^4.2.0",
    "reflect-metadata": "^0.1.8",
    "rxjs": "~6.0.0 || >=6.1.0",
    "tns-core-modules": "^4.2.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/core": "~0.6.3",
    "@angular/compiler-cli": "~6.0.0",
    "@ngtools/webpack": "~6.0.3",
    "babel-traverse": "6.4.5",
    "babel-types": "6.4.5",
    "babylon": "6.4.5",
    "clean-webpack-plugin": "~0.1.19",
    "copy-webpack-plugin": "~4.5.1",
    "css-loader": "~0.28.11",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "^1.6.0",
    "nativescript-dev-typescript": "^0.6.0",
    "nativescript-dev-webpack": "^0.12.0",
    "nativescript-worker-loader": "~0.9.0",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.3.0",
    "sass-loader": "~7.0.1",
    "tns-platform-declarations": "^3.4.1",
    "typescript": "~2.7.2",
    "uglifyjs-webpack-plugin": "~1.2.5",
    "webpack": "~4.6.0",
    "webpack-bundle-analyzer": "~2.13.0",
    "webpack-cli": "~2.1.3",
    "webpack-sources": "~1.1.0"
  }

Please, tell us how to recreate the issue in as much detail as possible.

• Copy and paste the following code into a {N} Angular component and use a button to run the takePhoto() function. (<button (tap)="takePhoto()"></button>)
• This is logged to the console:

  JS: Image at: "/storage/emulated/0/Android/data/com.example.test/files/NSIMG_20180822_105016.jpg"
  JS: Error cropping image: {
  JS:   "response": "Error",
  JS:   "image": null
  JS: }

Is there any code involved?

import { ImageSource } from 'tns-core-modules/image-source/image-source';
import { ImageCropper } from 'nativescript-imagecropper';
import * as camera from "nativescript-camera";
import * as app from 'application';
import * as dialogs from "ui/dialogs";
import * as fs from 'tns-core-modules/file-system';

@Component({
    selector: "my-page",
    moduleId: __filename,
    templateUrl: "./my-page.html",
    styleUrls: ["./my-page.scss"]
})

export class MyPage {
    faceTemp = fs.path.join(fs.knownFolders.temp().path, "face.png");
    faceTempExtension = 'png';

    doneCropping() {
        // Unrelated code here
        console.log("This never happens");
    }

    takePhoto() {
        camera.requestPermissions().then(() => {
            camera.takePicture({
                saveToGallery: false
            }).then(imageAsset => {
                if (app.android) {
                    console.log("Image at: " + JSON.stringify(imageAsset.android));
                } else {
                    console.log("IOS image at: " + JSON.stringify(imageAsset.ios));
                }

                const faceTempSplit = this.faceTemp.split('.');
                this.faceTempExtension = faceTempSplit[faceTempSplit.length - 1];

                new ImageSource().fromAsset(imageAsset).then(imageSource => {
                    const imageCropper = new ImageCropper();

                    imageCropper.show(imageSource, {
                        width: 250,
                        height: 250,
                        lockSquare: true
                    }).then(cropped => {
                        switch (cropped.response) {
                            case 'Success':
                                if (cropped.image != null) {
                                    cropped.image.saveToFile(this.faceTemp, 'png');
                                    this.doneCropping();
                                }
                                break;
                            case 'Cancelled':
                                break;
                            case 'Error':
                                console.log("Error cropping image!!!");
                                break;
                        }
                    }).catch(err => {
                        console.log("Error cropping image:", err);
                    });
                }).catch(err => {
                    console.log("Error getting image source:", err);
                });
            }).catch(err => {
                if (err.message === 'cancelled') return;

                dialogs.alert({
                    title: "Error!",
                    message: "Error getting image: " + err.message,
                    okButtonText: "OK"
                });
                console.log("Error: " + err.message);
            });
        }).catch(err => {
            dialogs.alert({
                title: "Error!",
                message: "Camera permissions were denied!",
                okButtonText: "OK"
            });
            console.log("Error: " + JSON.stringify(err));
        });
    }
}

[nipunkr]

I am also facing the same issue on android.

[davidpanic]

It somehow fixed itself by updating nativescript. Follow this to fix it: https://docs.nativescript.org/releases/upgrade-instructions

[RoyiNamir]

BTW we also had it , and platform /remove/add helped ( we didnt update nothing ).