How to use OpenCV in React Native

问题

All the similar questions I found were more or less unanswered. I want to detect edges and change the perspective of images and OpenCV seems to be the right choice. There is one guide that pops up on Google search which is very long and confusing.

回答1:

I was finally able to use OpenCV with React Native. Since OpenCV isn't officially supported by React Native we will have to use Native Modules. Beware, you will have to use Java to use OpenCV functionalities.

1. Download the OpenCV Android SDK.
2. Extract the zip file.
3. Open Android Studio and open the 'android' folder inside your React Native project.
4. File > New > Import Module
5. Select OpenCV-android-sdk/sdk/java
6. Change module name to opencv (or anything else) and untick all the options on the next screen.
7. From top left, change the display from Android to Project
8. Open build.gradle of opencv module
9. Change apply plugin: 'com.android.application' to apply plugin: 'com.android.library' (first line)
10. Delete this line applicationId "org.opencv"
11. File > Project Structure and click on Dependencies on the left side.
12. Select app and click on + then Module Dependency and select opencv
13. Create a folder inside android/app/src/main/ named jniLibs
14. Copy the contents of OpenCV-android-sdk/sdk/native/libs to jniLibs
15. If you are using react-native-camera your app will not build. To fix this add multiDexEnabled true under defaultConfig inside android/app/build.gradle
16. Now follow from Step 7 to end from this blog.
17. After you are done open RNOpenCvLibraryModule.java
18. Whatever function you write under @ReactMethod will be accessible from Javascript.
19. Example

public void toGrayscale(String imageAsBase64, Callback errorCallback, Callback successCallback) { 
   try {
     // do your stuff here like Imgproc.cvtColor(mat, mat, Imgproc.COLOR_BGR2GRAY)
     // to return your processed image back to js use the following line
     successCallback.invoke(abc); 
   }
   catch (Exception e) {
            errorCallback.invoke(e.getMessage()); 
        }
}

20. Inside Javascript

  OpenCV.toGrayScale(img, (e) => console.log(e), (img) => {
    // do whatever you want with the processed img
  })

回答2:

UPDATE: actually, scrap all that. The below would work for Android Studio + java. BUT, this article nicely outlines all you have to do for REACT in nice simple steps: https://brainhub.eu/blog/opencv-react-native-image-processing/

If you want to use openCV in android studio,

1. Download it from: https://sourceforge.net/projects/opencvlibrary/files/4.0.1/

2. In OpenCV-android-sdk > sdk there is a build.gradle file that contains instructions on how to use openCV in Android Studio. Here is a copy of it:

Notes about integration OpenCV into existed Android Studio application project are below (application 'app' module should exist). This file is located in /sdk directory (near 'etc', 'java', 'native' subdirectories) Add module into Android Studio application project:

• Android Studio way: (will copy almost all OpenCV Android SDK into your project, ~200Mb)

  Import module: Menu -> "File" -> "New" -> "Module" -> "Import Gradle project": Source directory: select this "sdk" directory Module name: ":opencv"

• or attach library module from OpenCV Android SDK (without copying into application project directory, allow to share the same module between projects)

  Edit "settings.gradle" and add these lines:

  def opencvsdk='<path_to_opencv_android_sdk_rootdir>' You can put declaration above into gradle.properties file instead (including file in HOME directory), but without 'def' and apostrophe symbols ('): opencvsdk=<path_to_opencv_android_sdk_rootdir> include ':opencv' project(':opencv').projectDir = new File(opencvsdk + '/sdk')

  Add dependency into application module:

• Android Studio way: "Open Module Settings" (F4) -> "Dependencies" tab

• or add "project(':opencv')" dependency into app/build.gradle:

  dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) ... implementation project(':opencv') }

  Load OpenCV native library before using:

• avoid using of "OpenCVLoader.initAsync()" approach - it is deprecated It may load library with different version (from OpenCV Android Manager, which is installed separatelly on device)

• use "System.loadLibrary("opencv_java4")" or "OpenCVLoader.initDebug()" TODO: Add accurate API to load OpenCV native library

  Native C++ support (necessary to use OpenCV in native code of application only):

• Use find_package() in app/CMakeLists.txt:

  find_package(OpenCV 3.4 REQUIRED java) ... target_link_libraries(native-lib ${OpenCV_LIBRARIES})

• Add "OpenCV_DIR" and enable C++ exceptions/RTTI support via app/build.gradle Documentation about CMake options: https: developer.android.com/ndk/guides/cmake.html

  defaultConfig { ... externalNativeBuild { cmake { cppFlags "-std=c++11 -frtti -fexceptions" arguments "-DOpenCV_DIR=" + opencvsdk + "/sdk/native/jni" , "-DANDROID_ARM_NEON=TRUE" } } }

• (optional) Limit/filter ABIs to build ('android' scope of 'app/build.gradle'): Useful information: https: developer.android.com/studio/build/gradle-tips.html (Configure separate APKs per ABI)

  splits { abi { enable true universalApk false reset() include 'armeabi-v7a' , 'x86', 'x86_64', 'arm64-v8a' } }

THINGS TO NOTE:

1. Using OpenCV will GREATLY inflate your resulting APK (I'm talking like 50mb for a small project) so make sure there is no other way you might be able to do this!

2. I've never used React for Android before, so I'm guessing the steps are more or less the same.

3. There are some Sample Projects that show how to use C++ in Android. Look at those to get an idea of how to run your code once you have done the setup above. My suggestion is to make a new project and select Native C++ as it does most of the setup for you.

Hope this helps a bit!

来源：https://stackoverflow.com/questions/62934567/how-to-use-opencv-in-react-native