could not invoke CustomCropManager.crop

[Sride]

on cropping image, shows error.

[Sride]

@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]

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

[Sride]

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]

same problem here, any sugestion?

[Sride]

@Michaelvilleneuve any suggestions?

[Michaelvilleneuve]

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]

@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]

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]

No, let me check that. Thanks

[zahidahmed024]

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]

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]

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]

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

[zahidahmed024]

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]

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

any idea about this?

[zahidahmed024]

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]

@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]

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]

@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]

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

[zahidahmed024]

@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]

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

[DavitVosk]

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

[ethienneroy]

@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]

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

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

[Macrew]

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]

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]

@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]

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 [email protected] 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 https://github.com/Michaelvilleneuve/react-native-perspective-image-cropper/issues/26?email_source=notifications&email_token=AIJMT7J4G4SZZVM43DVLWT3QTHFARA5CNFSM4H2RF6PKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDYGBPA#issuecomment-552624316, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIJMT7OXPOBIAWWJYJFWEUTQTHFARANCNFSM4H2RF6PA .

-- Thanks and Regards, Elango.K

[valekar]

@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. :)