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

[Malticonceptioni]

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

having the same issue and tried everything...

this lib just doesn't work :(

[Gricardov]

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

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

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]

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]

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]

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]

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:/", "")

[NTJ3]

which is way lighter..

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

[NTJ3]

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]

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.