如何将 OpenCV 库导入 React-Native 项目

Posted 2023-02-16

技术标签:

【中文标题】如何将 OpenCV 库导入 React-Native 项目【英文标题】：How can I import OpenCV library to React-Native project 【发布时间】：2020-01-18 12:51:55 【问题描述】：

我尝试通过本机代码导入 OpenCV，但没有成功，我还尝试了 react-native-opencv 库，但该库不包含所有 OpenCV 方法。

如何在我的 react-native 项目中使用 OpenCV？

提前致谢。

【问题讨论】：

我正在研究同样的事情。车牌识别系统是我的项目。解决客户端的工作以进行离线工作会很好。我现在想到的方法；在服务器上处理后删除图像。我的研究还在继续。如果你解决了，你会分享吗？ 【参考方案1】：

我已经在 react-native 中使用 OpenCV 苦苦挣扎了一周，终于让它工作了。有这篇非常好的文章 https://brainhub.eu/blog/opencv-react-native-image-processing/ 和这个 repo https://github.com/brainhubeu/react-native-opencv-tutorial 详细描述了如何让它运行。但是，我无法通过按照描述的步骤或按照我能找到的任何其他教程/视频来使这个 repo 中的代码工作。因此，如果有人遇到同样的问题，您可以尝试这些步骤，使上述存储库中的应用程序在我的 android 10 设备上与 OpenCV v4.5 一起使用。

打开终端并初始化新的 React-Native 项目

npx react-native init NAME_OF_YOUR_PROJECT

导航到路径 /main

cd NAME_OF_YOUR_PROJECT/android/app/src/main

创建名为 jniLibs 的新文件夹

mkdir jniLibs

从https://opencv.org/releases/ 下载并提取最新的适用于 Android 的 OpenCV（使用 OpenCV 4.5 测试）

将解压文件夹（OpenCV-android-sdk）中的“sdk”文件夹重命名为“opencv”

将提取的文件夹（OpenCV-android-sdk/opencv/native/libs/）中的内容复制到新创建的./jniLibs

cp -r /PATH_TO_EXTRACTED_OPENCV_FOLDER/OpenCV-android-sdk/opencv/native/libs/ ./jniLibs

打开 Android Studio 并打开项目目录的 Android 文件夹

文件 -> 打开 -> 选择 */NAME_OF_YOUR_PROJECT/android

将 OpenCV 导入您的项目

文件->新建->导入模块->选择你重命名为opencv的文件夹

（重要！一些教程说要选择此文件夹中的“java”文件夹 - 不要那样做）

在 Gradle 脚本下：打开 build.gradle(:opencv) 和 build.gradle(YOUR_PROJECT_NAME) 将两者都更改为匹配的数字 - 在我的情况下：

minSdkVersion = 21

compileSdkVersion = 29

将 opencv 添加到项目依赖项

文件->项目结构->依赖项->选择应用程序并按“+”号（位于“所有依赖项下方”）->选中opencv旁边的复选框->按OK

在 build.gradle(YOUR_APP_NAME) 中将 gradle 版本更改为 4.1.0

dependencies 
    classpath("com.android.tools.build:gradle:4.1.0")
    // NOTE: Do not place your application dependencies here; they belong
    // in the individual module build.gradle files

现在打开 build.gradle(Project: NAME_OF_YOUR_PROJECT .app) 并在编译选项中更改 java 版本并添加带有一些 pickfirst 选项的 packagin 选项。还启用 multidex 选项，如果您希望使用 react-native-camera 添加缺少的维度策略。应该看起来像这样：

compileOptions 
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8   




 packagingOptions 
       pickFirst 'lib/x86/libc++_shared.so'
       pickFirst 'lib/x86_64/libc++_shared.so'
       pickFirst 'lib/armeabi-v7a/libc++_shared.so'
       pickFirst 'lib/arm64-v8a/libc++_shared.so'
   

   defaultConfig 
       applicationId "com.***" // !!! if copy-pasting change applicationId to yours
       minSdkVersion rootProject.ext.minSdkVersion
       targetSdkVersion rootProject.ext.targetSdkVersion
       versionCode 1
       versionName "1.0"
       multiDexEnabled true
       missingDimensionStrategy 'react-native-camera', 'general'

打开 build.gradle(:opencv) 并在默认配置中启用 multidex 选项。如果您想使用 react-native-camera ，那么还要添加缺失维度策略。应该是这样的

defaultConfig 
    minSdkVersion 21
    targetSdkVersion 29

    versionCode openCVersionCode
    versionName openCVersionName
    multiDexEnabled true
    missingDimensionStrategy 'react-native-camera', 'general'

    externalNativeBuild 
        cmake 
            arguments "-DANDROID_STL=c++_shared"
            targets "opencv_jni_shared"

还要在编译选项中更改 java 的版本（必须与 build.gradle(:app) 中的相同。应该看起来像这样

compileOptions 
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8

将以下用户权限添加到您的 /PATH_TO_YOUR_PROJECT/android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

打开 gradle 包装器属性 (/PATH_TO_YOUR_PROJECT/android/gradle/wrapper/gradle.properties) 并更改 gradle 的版本号

distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip

转到 /YOUR_PROJECT_PATH/android/app/src/main/java/com/ 并创建 reactlibrary 文件夹，然后在该文件夹中创建两个文件：

RNOpenCvLibraryModule.java

RNOpenCvLibraryPackage.java

使用与此 GIT 存储库 https://github.com/brainhubeu/react-native-opencv-tutorial/tree/master/android/app/src/main/java/com/reactlibrary 中相同的内容填充它们

打开 MainApplication.java 并添加这个“packages.add(new RNOpenCvLibraryPackage());”到 getPackage() 方法。应该看起来像这样：

@Override
protected List<ReactPackage> getPackages() 
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  packages.add(new RNOpenCvLibraryPackage()); // ADD THIS
  // Packages that cannot be autolinked yet can be added manually here, for example:
  // packages.add(new MyReactNativePackage());
  return packages;

还将这个添加到 onCreate() 方法中：

  @Override
  public void onCreate() 
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
    if (!OpenCVLoader.initDebug())  // ADD THIS
      Log.d("OpenCv", "Error while init"); // AND THIS
     // DON'T FORGET THE ""

不要忘记在“MainApplication.java”的开头添加正确的导入

import org.opencv.android.OpenCVLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;

同步您的项目

文件 -> 使用 Gradle 文件同步您的项目

打开终端并导航到您的项目。添加这个包

cd /PATH_TO_YOUR_PROJECT/
npm i react-native-easy-toast --save
npm i react-native-svg --save
npm install --save react-native-camera@git+https://git@github.com/react-native-community/react-native-camera.git

（确保 react-native-camera 是从 GIT repo 安装的，否则会遇到错误）

在您的 PROJECT_PATH 中创建名为“src”的新文件夹并复制此 repos 的内容（“https://github.com/brainhubeu/react-native-opencv-tutorial/tree/master/src”）“src”文件夹到你的 (/PATH_TO_YOUR_PROJECT/src/)