如何在 React Native 中使用 OpenCV [英] How to use OpenCV in React Native
本文介绍了如何在 React Native 中使用 OpenCV的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我发现的所有类似问题或多或少都没有答案.我想检测边缘并改变图像的视角,OpenCV 似乎是正确的选择.Google 搜索中会弹出一个指南,该指南非常冗长且令人困惑.
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.
推荐答案
我终于能够将 OpenCV 与 React Native 结合使用.由于 React Native 并未正式支持 OpenCV,我们将不得不使用 Native Modules.请注意,您必须使用 Java 才能使用 OpenCV 功能.
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.
- 下载 OpenCV Android SDK.
- 解压 zip 文件.
- 打开 Android Studio 并打开 React Native 项目中的android"文件夹.
- 文件 >新 >导入模块
- 选择
OpenCV-android-sdk/sdk/java
- 将模块名称更改为
opencv
(或其他任何内容)并取消选中下一个屏幕上的所有选项. - 从左上角,将显示从
Android
更改为Project
- 打开
opencv
模块的build.gradle
- 将
apply plugin: 'com.android.application'
更改为apply plugin: 'com.android.library'
(第一行) - 删除这一行
applicationIdorg.opencv"
- 文件 >项目结构,然后单击左侧的依赖项.
- 选择
app
并点击+
然后Module Dependency并选择opencv
- 在
android/app/src/main/
中创建一个名为jniLibs
的文件夹 - 将
OpenCV-android-sdk/sdk/native/libs
的内容复制到jniLibs
- 如果您使用的是
react-native-camera
,您的应用将无法构建.要解决此问题,请在android/app/build.gradle
内的 - 现在从第 7 步开始到 本博客.
- 完成后打开
RNOpenCvLibraryModule.java
- 您在
@ReactMethod
下编写的任何函数都可以通过 Javascript 访问. - 示例
defaultConfig
下添加 multiDexEnabled true
- Download the OpenCV Android SDK.
- Extract the zip file.
- Open Android Studio and open the 'android' folder inside your React Native project.
- File > New > Import Module
- Select
OpenCV-android-sdk/sdk/java
- Change module name to
opencv
(or anything else) and untick all the options on the next screen. - From top left, change the display from
Android
toProject
- Open
build.gradle
ofopencv
module - Change
apply plugin: 'com.android.application'
toapply plugin: 'com.android.library'
(first line) - Delete this line
applicationId "org.opencv"
- File > Project Structure and click on Dependencies on the left side.
- Select
app
and click on+
then Module Dependency and selectopencv
- Create a folder inside
android/app/src/main/
namedjniLibs
- Copy the contents of
OpenCV-android-sdk/sdk/native/libs
tojniLibs
- If you are using
react-native-camera
your app will not build. To fix this addmultiDexEnabled true
underdefaultConfig
insideandroid/app/build.gradle
- Now follow from Step 7 to end from this blog.
- After you are done open
RNOpenCvLibraryModule.java
- Whatever function you write under
@ReactMethod
will be accessible from Javascript. - 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());
}
}
- Javascript 内部
OpenCV.toGrayScale(img, (e) => console.log(e), (img) => {
// do whatever you want with the processed img
})
这篇关于如何在 React Native 中使用 OpenCV的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文