如果您曾经想过如何使用带有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 Module sdk/java File -> 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://git@github.com/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 应用程序吗？ 给我们打个电话 。
