could not invoke CustomCropManager.crop #26

Sride · 2019-06-21T12:22:15Z

on cropping image, shows error.

Sride · 2019-06-25T05:18:36Z

@Michaelvilleneuve any idea?, I have linked manually, here is the code.

import com.facebook.react.ReactApplication;
import com.horcrux.svg.SvgPackage;
//import org.opencv.RNCustomCropPackage;
import fr.michaelvilleneuve.customcrop.RNCustomCropPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

Michaelvilleneuve · 2019-06-25T07:09:18Z

Have you properly installed OpenCV as suggested in the Readme ? This step needs to be done manually

Sride · 2019-06-25T07:11:58Z

Thanks for the quick response, followed the same steps in read me, the cropper shows on clicking on the crop text in example, it shows error. opencv is configured in project.

include ':openCVLibrary310'
project(':openCVLibrary310').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-perspective-image-cropper/android/openCVLibrary310')

vitornsp2 · 2019-06-25T20:45:19Z

same problem here, any sugestion?

Sride · 2019-06-26T07:12:55Z

@Michaelvilleneuve any suggestions?

Michaelvilleneuve · 2019-06-26T14:32:25Z

Ok, obviously there seem to be a documentation problem, I am not sure which step I missed in the doc but I'll try to list the changes made to our project :

Here is our settings.gradle :

include ':react-native-perspective-image-cropper'
project(':react-native-perspective-image-cropper').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-perspective-image-cropper/android')
include ':openCVLibrary310'
project(':openCVLibrary310').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-document-scanner/android/openCVLibrary310')

Since we are using OpenCV with react-native-document-scanner the openCV step is done once but you should be able to have the following :

package.json

"react-native-perspective-image-cropper": "^0.4.3",
 "react-native-svg": "^9.4.0",

settings.gradle :

include ':react-native-perspective-image-cropper'
project(':react-native-perspective-image-cropper').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-perspective-image-cropper/android')
include ':openCVLibrary310'
project(':openCVLibrary310').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-perspective-image-cropper/android/openCVLibrary310')

notice the path change

build.gradle

implementation project(':react-native-perspective-image-cropper')
implementation project(':react-native-svg')

MainAplication.java

import fr.michaelvilleneuve.customcrop.RNCustomCropPackage;
import com.horcrux.svg.SvgPackage;


and then ...

new RNCustomCropPackage(),
new SvgPackage(),

Thing to note, though I seriously doubt this has anything to do with this error :
We changed our manifest to make it look like this :

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   // The below line was added
    xmlns:tools="http://schemas.android.com/tools">

    <application
   // The below line was added
      tools:replace="android:allowBackup"
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"

If you have followed exactly this, it may have something to do with the fact that we use openCV from my other lib react-native-document-scanner. In that case, you can try to install the android branch of react-native-document-scanner:

"react-native-document-scanner": "Michaelvilleneuve/react-native-document-scanner#android",

and use this OpenCV in settings.gradle

include ':openCVLibrary310'
project(':openCVLibrary310').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-document-scanner/android/openCVLibrary310')

If it helped please tell me so I can update the code or documentation

Sride · 2019-06-26T17:59:59Z

@Michaelvilleneuve same issue exits,i have followed the steps once again, let us find the exact problem. I have my source in this Dropbox link. Please check the source, it seems everyone has this issue, let's solve this issue.

Michaelvilleneuve · 2019-06-26T18:08:38Z

Have you tried using react-native-document-scanner as source for open CV lib ?
I’ll take a look at your source code tomorrow

Sride · 2019-06-26T18:14:40Z

No, let me check that. Thanks

zahidahmed024 · 2019-06-26T19:02:26Z

i think we should pass uri using react-native-camera package ,
cause our uri should look like this .
-> file:///data/data/com.lastscan/cache/Camera/a72a0abe-0dec-4bf1-9d54-30a5321f7e53.jpg

cause Imgcodecs.imread(imageUri.replace("file://", ""), Imgproc.COLOR_BGR2RGB) ,that type of function written in the bridge RNCustomCropModule.java ,

check crop method in RNCustomCropModule.java

my assumptions -_-

manchi17 · 2019-06-27T06:17:11Z

Ok, obviously there seem to be a documentation problem, I am not sure which step I missed in the doc but I'll try to list the changes made to our project :

Here is our settings.gradle :
include ':react-native-perspective-image-cropper'
project(':react-native-perspective-image-cropper').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-perspective-image-cropper/android')
include ':openCVLibrary310'
project(':openCVLibrary310').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-document-scanner/android/openCVLibrary310')
Since we are using OpenCV with react-native-document-scanner the openCV step is done once but you should be able to have the following :

package.json
"react-native-perspective-image-cropper": "^0.4.3",
 "react-native-svg": "^9.4.0",
settings.gradle :
include ':react-native-perspective-image-cropper'
project(':react-native-perspective-image-cropper').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-perspective-image-cropper/android')
include ':openCVLibrary310'
project(':openCVLibrary310').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-perspective-image-cropper/android/openCVLibrary310')
notice the path change

build.gradle
implementation project(':react-native-perspective-image-cropper')
implementation project(':react-native-svg')
MainAplication.java
import fr.michaelvilleneuve.customcrop.RNCustomCropPackage;
import com.horcrux.svg.SvgPackage;


and then ...

new RNCustomCropPackage(),
new SvgPackage(),
Thing to note, though I seriously doubt this has anything to do with this error :
We changed our manifest to make it look like this :
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   // The below line was added
    xmlns:tools="http://schemas.android.com/tools">

    <application
   // The below line was added
      tools:replace="android:allowBackup"
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
If you have followed exactly this, it may have something to do with the fact that we use openCV from my other lib react-native-document-scanner. In that case, you can try to install the android branch of react-native-document-scanner:
"react-native-document-scanner": "Michaelvilleneuve/react-native-document-scanner#android",
and use this OpenCV in settings.gradle
include ':openCVLibrary310'
project(':openCVLibrary310').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-document-scanner/android/openCVLibrary310')
If it helped please tell me so I can update the code or documentation

Tried this, but facing same issue

Sride · 2019-06-27T06:25:03Z

Have you tried using react-native-document-scanner as source for open CV lib ?
I’ll take a look at your source code tomorrow
Tried react-native-document-scanner as source for open CV lib, same issue @Michaelvilleneuve

Sride · 2019-06-27T09:11:00Z

@zahidahmed024, may i know, how you have linked opencv manually, which you have mentioned in this link does crop works?

zahidahmed024 · 2019-06-27T14:30:51Z

actually i used https://www.npmjs.com/package/react-native-opencv3 this package
and used index.js as component

,and paste the crop method and imports in RNOpencv3Module.java file

check my code
https://drive.google.com/open?id=1sR21BRm_X1Z_vid8GSLJ2F_zMa0bV79l

take photo using camera
in updateImage method you will get cropped base64 image then use it where you want to .

i dont know weather it is right way or wrong --
opencv is a pain -- .

ElangoPrince · 2019-06-28T07:47:52Z

@zahidahmed024, after cropping image , crop() function can't return any values, it's return error.

any idea about this?

zahidahmed024 · 2019-06-28T10:36:47Z

capture image from camera , and check in console.log that u are getting uri like
-> file:///data/data/com.lastscan/cache/Camera/a72a0abe-0dec-4bf1-9d54-30a5321f7e53.jpg .
i had that issue
see the crop method. Imgcodecs.imread() taking uri that start with file:///
fucntion https://github.com/Michaelvilleneuve/react-native-perspective-image-cropper/blob/master/android/src/main/java/fr/michaelvilleneuve/customcrop/RNCustomCropModule.java

Sride · 2019-07-01T06:59:55Z

@zahidahmed024 my log url is

content://com.re.provider/root/storage/emulated/0/Pictures/image-62b82ef6-8d2f-4822-943e-13c9dbbfc9c1.jpg

tried with replace "content" to "file" manually, throws same error, any suggestions

Sride · 2019-07-01T09:32:09Z

Have you tried using react-native-document-scanner as source for open CV lib ?
I’ll take a look at your source code tomorrow

@Michaelvilleneuve any suggestions regarding this issue.

zahidahmed024 · 2019-07-01T18:52:26Z

@Sride hey i solved that issue by providing image path ,, imgcodecs.imread() function can read original path . see the changes ,

in update function u will get your cropped image in base64 .

*sometimes imagepicker package gives uri like file:/// sometimes like content:// ,also uri changes when u put your phone on usb , i donno if u faced this situation too -_-

Sride · 2019-07-02T05:05:05Z

@zahidahmed024 Thanks a lot, it works like a charm..

zahidahmed024 · 2019-07-02T08:36:27Z

@Sride actually this library is beautifully written by @Michaelvilleneuve . but installing opencv in native android or react native is always a pain and image picker uri problem -_-

Sride · 2019-07-02T10:35:10Z

Yes @zahidahmed024 this is unique library, thanks for giving such a library @Michaelvilleneuve, really opencv integration is a pain.

DavitVosk · 2019-07-04T07:28:12Z

@zahidahmed024 I tried with your proposed solution, but it does not work :(

ethienneroy · 2019-08-05T21:27:39Z

@DavitVosk

I found the solution.
in the CustomCropModule.java

public RNCustomCropModule(ReactApplicationContext reactContext) {
  super(reactContext);
 OpenCVLoader.initDebug();
  this.reactContext = reactContext;
}

you also have to install opencv using this script

wget https://sourceforge.net/projects/opencvlibrary/files/opencv-android/3.4.1/opencv-3.4.1-android-sdk.zip
unzip opencv-3.4.1-android-sdk.zip
cd android/app/src/main
mkdir jniLibs
cp -r ./../../../../OpenCV-android-sdk/sdk/native/libs/ ./jniLibs
cd ../../../../
rm -rf opencv-3.4.1-android-sdk.zip
rm -rf OpenCV-android-sdk/

jackyleehong · 2019-08-09T00:51:17Z

Okay. After struggle fof 2days,here is how i solve the issue completely.

Install opencv310 manually and import the modules
Copy the lib file to jnilibs folder inside android main.
3.install react native opencv3
Edit the build gradle to implement your imported opencv module.

Macrew · 2019-11-02T11:01:54Z

I'm getting issue when scanning is done the area in which scanning is done but the image is croppping somewhere else.

SL-A-SH · 2019-11-07T09:02:22Z

The easiest way to integrate openCV for me was to add implementation 'com.quickbirdstudios:opencv:3.4.1' in my project build.gradle file and then export RNCustomCropPackage as native-modules.

valekar · 2019-11-11T21:28:38Z

@SL-A-SH and @jackyleehong : Could you please explain more about the way you setup your project? Also if you have a repo, that would be helpful. I am struggling to set this up

ElangoPrince · 2019-11-12T07:16:57Z

Hi, please send your project. or uninstall react-native-perspective-image-cropper, install "react-native-opencv3": "^1.0.4",after that create, Custom crop component separately . then pass the arguments through props to Custom crop component (where you want 😊 👍).if any clarification please let me know.

…

On Tue, Nov 12, 2019 at 2:58 AM srinivas valekar ***@***.***> wrote: @SL-A-SH <https://github.com/SL-A-SH> and @jackyleehong <https://github.com/jackyleehong> : Could you please explain more about the way you setup your project? Also if you have a repo, that would be helpful. I am struggling to set this up — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#26?email_source=notifications&email_token=AIJMT7J4G4SZZVM43DVLWT3QTHFARA5CNFSM4H2RF6PKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDYGBPA#issuecomment-552624316>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIJMT7OXPOBIAWWJYJFWEUTQTHFARANCNFSM4H2RF6PA> .

-- Thanks and Regards, Elango.K

valekar · 2019-11-12T10:08:09Z

@ElangoPrince : Thanks for the info! This react-native-opencv3 looks like really an amazing project. I would let you know once I update my code-base. :)

Malticonceptioni · 2020-02-14T09:22:51Z

@zahidahmed024 : i cant able to use library's function in ios. Please help me

i cant use .crop method in ios how can i add .crop method manually?

antoinerousseau · 2020-03-27T15:55:30Z

having the same issue and tried everything...

this lib just doesn't work :(

Gricardov · 2020-04-01T08:05:04Z

@Sride hey i solved that issue by providing image path ,, imgcodecs.imread() function can read original path . see the changes ,

in update function u will get your cropped image in base64 .

*sometimes imagepicker package gives uri like file:/// sometimes like content:// ,also uri changes when u put your phone on usb , i donno if u faced this situation too -_-

I still haven't been able to succeed. Could you please tell me if you had previously installed opencv in Android Studio? Do you have a working example I can use? Thanks in advance.

MujtabaFR · 2020-04-25T03:54:11Z

@DavitVosk

I found the solution.
in the CustomCropModule.java

public RNCustomCropModule(ReactApplicationContext reactContext) {
  super(reactContext);
 OpenCVLoader.initDebug();
  this.reactContext = reactContext;
}

you also have to install opencv using this script

wget https://sourceforge.net/projects/opencvlibrary/files/opencv-android/3.4.1/opencv-3.4.1-android-sdk.zip
unzip opencv-3.4.1-android-sdk.zip
cd android/app/src/main
mkdir jniLibs
cp -r ./../../../../OpenCV-android-sdk/sdk/native/libs/ ./jniLibs
cd ../../../../
rm -rf opencv-3.4.1-android-sdk.zip
rm -rf OpenCV-android-sdk/

@ethienneroy your solution actually works.. but it increases the size of my final apk by up to 25MB 😧

Because the library size is huge

Update :
The solution for me was to include this OpenCV library instead, which is way lighter..
include it into android/app/src/main/jniLibs

Actually I believe @Michaelvilleneuve forgot to include it here

armin23615 · 2020-05-29T07:35:01Z

For me, this happens only on android.
When I take photo using RN Camera, it returns "could not invoke CustomCropManager.crop".
But when I take photo with @woonivers/react-native-document-scanner it works fine.

Image path returned from RN Camera is:
"file:///data/user/0/com.my_app/cache/Camera/351b8cab-eb13-4851-918a-0e7218c7278a.jpg"

Image pathe returned from scanner is: "file:///data/user/0/com.my_app/cache/documents/351b8cab-eb13-4851-918a-0e7218c7278a.jpg"

The only difference is in these paths, everything else is the same.

armin23615 · 2020-06-01T12:58:44Z

import  org.opencv.android.OpenCVLoader;

  public RNCustomCropModule(ReactApplicationContext reactContext) {
    super(reactContext);
    OpenCVLoader.initDebug(); // --> add this line
    this.reactContext = reactContext;
  }

Adding this "RNCustomCropModule.java" worked for me.

Poojan31 · 2020-07-28T12:38:21Z

Hi guys,
I have forked this lib and fixed this issue. Also added some improvements.
https://github.com/Poojan31/react-native-perspective-image-cropper

raazatul7 · 2020-12-04T05:23:11Z

Hi guys,
I have forked this lib and fixed this issue. Also added some improvements.
https://github.com/Poojan31/react-native-perspective-image-cropper

I'm getting this in Android-
cv::Exception: /Volumes/Linux/builds/maser_pack-android/opencv/modules/imgproc/src/color.cpp:7943: error:(-251) scn ==3 || scn == 4 in function void cv::cvtColor(cv::InputArray, cv::outputArray, int, int)

I am using your forked library. Can you help with this?

AFMW · 2021-03-30T20:22:15Z

cv::Exception: /Volumes/Linux/builds/maser_pack-android/opencv/modules/imgproc/src/color.cpp:7943: error:(-251) scn ==3 || scn == 4 in function void cv::cvtColor(cv::InputArray, cv::outputArray, int, int)

in line 50 : Mat src = Imgcodecs.imread(imageUri.replace("file://", ""), Imgproc.COLOR_BGR2RGB);
Replace ("file://", "") to ("file:/", "")

@Sride

Michaelvilleneuve/react-native-perspective-image-cropper#26 1. Check @Sride answer (change input of Imgcodecs.imread to file path) 2. install this https://github.com/Michaelvilleneuve/react-native-document-scanner/tree/master/android/src/main/jniLibs

NTJ3 · 2022-03-25T12:16:57Z

which is way lighter..

Can you pls share location where you add this. I'm using perspective-cropper pkg

NTJ3 · 2022-03-28T04:09:20Z

Hi guys, I have forked this lib and fixed this issue. Also added some improvements. https://github.com/Poojan31/react-native-perspective-image-cropper

In IOS After Capturing image cropping is not working properly. Anyone has managed to solve this issue? Thanks in advance..

cdcharlebois · 2022-07-13T12:17:18Z

For anyone else running into this annoying error, it seems that the documentation is just wrong. The initialImage prop on the CustomCrop component expects a URI (not the base64 image as the docs suggest) while the updateImage prop actually receives a b64 string with the cropped image... We were having issues with this component on both Android and iOS, and changed the initialImage prop to be a file URI, and (at least the crop function) is now working as expected.

Michaelvilleneuve mentioned this issue Jun 26, 2019

error: null is not an object (evaluating '_ reactNative.NativeModules.CustomCropManager.crop') #23

Open

Sride mentioned this issue Jul 18, 2019

error: cannot find symbol import org.opencv.DocumentScannerPackage Michaelvilleneuve/react-native-document-scanner#52

Closed

milankamilya mentioned this issue May 11, 2021

Fixed Various Android and iOS issues #59

Closed

This was referenced Mar 28, 2022

Fixed Various Android and iOS issues #63

Closed

Fixed Various Android and iOS issues NTJ3/react-native-perspective-image-cropper#1

Open

could not invoke CustomCropManager.crop #26

could not invoke CustomCropManager.crop #26

Comments

Sride commented Jun 21, 2019

Sride commented Jun 25, 2019

Michaelvilleneuve commented Jun 25, 2019

Sride commented Jun 25, 2019 • edited

vitornsp2 commented Jun 25, 2019 • edited

Sride commented Jun 26, 2019

Michaelvilleneuve commented Jun 26, 2019 • edited

Sride commented Jun 26, 2019

Michaelvilleneuve commented Jun 26, 2019

Sride commented Jun 26, 2019

zahidahmed024 commented Jun 26, 2019 • edited

manchi17 commented Jun 27, 2019

Sride commented Jun 27, 2019

Sride commented Jun 27, 2019 • edited

zahidahmed024 commented Jun 27, 2019 • edited

ElangoPrince commented Jun 28, 2019

zahidahmed024 commented Jun 28, 2019

Sride commented Jul 1, 2019

Sride commented Jul 1, 2019

zahidahmed024 commented Jul 1, 2019 • edited

Sride commented Jul 2, 2019

zahidahmed024 commented Jul 2, 2019

Sride commented Jul 2, 2019

DavitVosk commented Jul 4, 2019

ethienneroy commented Aug 5, 2019 • edited

jackyleehong commented Aug 9, 2019

Macrew commented Nov 2, 2019

SL-A-SH commented Nov 7, 2019 • edited

valekar commented Nov 11, 2019

ElangoPrince commented Nov 12, 2019 via email

valekar commented Nov 12, 2019

Malticonceptioni commented Feb 14, 2020

antoinerousseau commented Mar 27, 2020

Gricardov commented Apr 1, 2020 • edited

MujtabaFR commented Apr 25, 2020 • edited

armin23615 commented May 29, 2020

armin23615 commented Jun 1, 2020

Poojan31 commented Jul 28, 2020

raazatul7 commented Dec 4, 2020 • edited

AFMW commented Mar 30, 2021

NTJ3 commented Mar 25, 2022

NTJ3 commented Mar 28, 2022

cdcharlebois commented Jul 13, 2022

Sride commented Jun 25, 2019 •

edited

vitornsp2 commented Jun 25, 2019 •

edited

Michaelvilleneuve commented Jun 26, 2019 •

edited

zahidahmed024 commented Jun 26, 2019 •

edited

Sride commented Jun 27, 2019 •

edited

zahidahmed024 commented Jun 27, 2019 •

edited

zahidahmed024 commented Jul 1, 2019 •

edited

ethienneroy commented Aug 5, 2019 •

edited

SL-A-SH commented Nov 7, 2019 •

edited

Gricardov commented Apr 1, 2020 •

edited

MujtabaFR commented Apr 25, 2020 •

edited

raazatul7 commented Dec 4, 2020 •

edited