如何在React Native中使用OpenCV进行图像处理

  • Z时代
  • 2024-01-10
  • 分类：综合

react

如果您曾经想过如何使用带有React Native的OpenCV处理图像，那么您来对地方了。

OpenCV与React Native一起使您能够在移动设备上处理图像 （最有可能要处理由设备相机拍摄的图像）。

这些的最大优点是：

  • 易于实现。

  • 易于使用。

  • Internet上有很多教程，以及OpenCV的可靠官方文档。

  • 您的移动应用程序的大小将只有十几兆字节。

让我向您展示如何逐步使用OpenCV和React Native处理图像，但首先要介绍几句话。

什么是OpenCV？

OpenCV （开源计算机视觉库）是一个开源计算机视觉和机器学习软件库。 OpenCV的构建旨在为计算机视觉应用程序提供通用的基础结构，并加速在商业产品中使用机器感知。

该库具有2500多种优化算法 ，包括一整套经典和最新的计算机视觉和机器学习算法。

这些算法可用于检测和识别人脸，识别物体，对视频中的人类动作进行分类，跟踪相机运动，跟踪运动物体，提取物体的3D模型，从立体相机产生3D点云，将图像缝合在一起以产生高分辨率整个场景的图像，从图像数据库中查找相似的图像，从使用闪光灯拍摄的图像中消除红眼，跟随眼睛的运动，识别风景并建立标记以将其与增强现实叠加在一起等。

OpenCV拥有超过4.7万人的社区 ，估计下载量超过1400万 。

该库在公司，研究小组和政府机构中得到广泛使用。

OpenCV用C ++原生编写。

自从2010年OpenCV移植到Android环境以来，它就允许在移动应用程序开发中使用库的全部功能。

OpenCV开发团队在2012年积极致力于增加对iOS的扩展支持。 自版本2.4.2（2012）起提供完全集成。

React Native 由Facebook于2015年首次发布 。 React Native可让您仅使用JavaScript 构建移动应用程序 。 它使用与React相同的设计，使您可以从声明性组件组成丰富的移动UI。

React Native和OpenCV是好朋友！

如果我们用Google搜索“ react native opencv”，则会偶然发现以下链接：

  • “ GitHub — ma-pe / react-native-opencv：React的OpenCV绑定…… ”
    正如文档中的第一句话所说：“当前正在开发????用于OpenCV的React Native绑定。 但是还没有React Native绑定。” 此外，它还不完整，上传500 + MB的OpenCV库不是一个好主意。

  • 我可以在本机反应中使用openCV吗？ ·第88期·wix / reactive-native… '
    关于React Native和OpenCV的一个未解决的问题。

  • ' opencv / opencv — GitHub '
    链接库时出现的问题首先没有说明如何进行。

  • （（新手）使用OpenCV进行React Native：reactnative-Reddit '
    答案是可能的，但没有任何示例。

本教程是关于什么的？

在本教程中，我们将构建一个示例项目， 该项目使用设备的相机拍摄照片， 并使用本机代码对其进行处理，并在拍摄的图像模糊或清晰时返回信息 。

用普通的JavaScript进行操作将非常无效。 JavaScript不足以进行非常繁重的计算。

请注意，我们绝不是Java或Objective-C开发人员，因此我们的Java / Objective-C代码可能差强人意。 如果您想为这个主题做贡献，请与我们联系。

OpenCV基本准备

第1步： react-native init reactNativeOpenCvTutorial

第2步：在您的项目目录中运行downloadAndInsertOpenCV.sh脚本（ 可在此处找到） ，该脚本可下载并插入适用于Android和iOS的openCV文件。 文件中的路径可能与您的首选项不匹配，因此您可能需要更改它们。

Android教程

步骤1：在Android Studio中打开您的项目。

步骤2：按照Android Studio中的提示进行项目同步。

步骤3：下载适用于Android的最新版本的OpenCV 。 就我而言，是3.4.1。

步骤4：将 OpenCV导入Android Studio：从File -> New -> Import Modulesdk/javaFile -> New -> Import Module ，在解压缩的OpenCV存档中选择sdk/java文件夹。

第5步：更新导入的OpenCV模块下的build.gradle ，以更新4个字段以匹配您项目的build.gradle ：

  • 编译器

  • buildToolsVersion

  • minSdkVersion

  • targetSdkVersion。

步骤6：添加模块依赖性：

Application -> Module Settings ，然后选择Dependencies标签。 单击底部的+图标，选择“ Module Dependency然后选择导入的OpenCV模块。

对于Android Studio v1.2.2，要在项目视图中访问“ Module Settings ，请右键单击相关模块，然后选择Open Module Settings 。

打开Module Settings 。

单击+ ，选择“ Module Dependency然后从列表中选择OpenCV库。

步骤7：在android/app/src/java创建一个名为com.reactlibrary的包。

步骤8：使用适当的权限更新清单： 

<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” />

查看整个文件 。

第9步：在新创建的包中创建一个RNOpenCvLibraryModule.java文件， RNOpenCvLibraryModule.java 如下所示进行填充 。

步骤10：在新创建的包中创建一个名为RNOpenCvLibraryPackage.java的文件，并按如下所示进行填充 。

步骤11：在MainApplication.java文件中添加正确的导入，将您的OpenCV包添加到列表中，并将正确的代码添加到MainApplication类中，如下所示： 

Imports:

import com.reactlibrary.RNOpenCvLibraryPackage;
import org.opencv.android.BaseLoaderCallback;
import org.opencv.android.LoaderCallbackInterface;
import org.opencv.android.OpenCVLoader;
import android.util.Log;

将new RNOpenCvLibraryPackage()添加到软件包列表中。

在MainApplication类中添加BaseLoaderCallback ：

另外，向您的MainApplication类添加以下回调：

在这里查看整个文件 。

iOS教程

步骤1：在XCode中打开iOS项目。

第2步：将opencv2.framework添加到Linked Frameworks and Libraries 。

步骤3：在iOS目录中创建一个新组。 我将其命名为“ OpenCV”。

步骤4：添加.pch文件，并将其插入OpenCV目录中。

步骤5：在您的.pch文件中添加适当的内容- 如下所示 。

第6步：创建一个名为RNOpenCvLibrary.h的文件，并按如下所示进行填充 。

步骤7：创建一个名为RNOpenCvLibrary.mm的文件，并按如下所示进行填充 。

步骤8：将Precompile Prefix Header设置为Yes并按如下所示设置Prefix Header path ：

步骤9：将以下内容添加到您的Info.plist文件中： 

<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>

查看整个文件 。

最后一部分-JavaScript

第1步：在src文件夹中，创建一个名为NativeModules的文件夹和一个名为OpenCV.js,的文件OpenCV.js,并用以下命令填充： 

import { NativeModules } from ‘react-native’;

export default NativeModules.RNOpenCvLibrary;

查看整个文件 。

步骤2：我们将使用一些第三方库进行快速设置。 打开终端并输入： 

npm i –save react-native-svg
npm i –save react-native-camera
npm i –save react-native-easy-toast

第3步：不要忘记链接库： react-native link 。

我们将使用此文件作为参考。

在第126行中，我们设置了相机，在第135行中，我们创建了一个可触摸的元素来处理照片。 拍照由takePicture功能处理。 它会拍照，并以本地状态保存数据，然后继续检查照片是否模糊。 函数proceedWithCheckingBlurryImage使用本机函数checkForBlurryImage并在照片是否模糊时返回简单信息。

步骤4：注意：如果遇到与相机连接的Android的构建问题，请参考我的build.gradle文件 ，尤其是maven { url “ https://jitpack.io ” }行，然后在Android Studio中重新同步该项目。

如果您有与Google Play服务相关的错误，请在GitHub上检查此问题 。

如果您有与react-native-camera相关的错误，请通过更改package.json的版本来检查master分支，如下所示： 

“react-native-camera”: “git+ https://[email protected]/react-native-community/react-native-camera "

结果示例

一个示例清晰的照片。 我们会收到照片的预览，并可以选择使用或重复。

示例模糊照片。 我们收到一条祝酒消息，通知我们照片模糊，必须重复。

不要忘记 在我们的GitHub上 看到 最终产品 ！

参考文献：

  • 在Android Studio中为Android设置OpenCV （StackOverflow）

  • 在XCode中为iOS设置OpenCV （博客文章）

  • React Native的本机模块 （GitHub）

  • 用于检查提供的图像是否模糊的本机Java代码 （OpenCV官方）

  • 本机Objective-C代码，用于检查提供的图像是否模糊 （StackOverflow）

  • OpenCV的官方网站 （OpenCV官方）

这是发表在Brainhub的博客在这里。

请参阅我们的其他React Native故事，例如“ 如何向客户端交付React Native应用程序 ”！

寻找帮助来构建您的 React Native 或 React 应用程序吗？ 给我们打个电话 。

From: https://hackernoon.com/how-to-use-opencv-in-react-native-for-image-processing-db997e73678c

以上是 如何在React Native中使用OpenCV进行图像处理 的全部内容， 来源链接： utcz.com/z/382352.html

回到顶部