模板版本：v0.2.2

`react-native-opencv3`

[!TIP] 本项目基于 react-native-opencv3 v1.0.8 开发

[!TIP] Gitee 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：react-native-opencv3 Releases 。对于未发布到npm的版本安装tgz包。

进入到工程目录并输入以下命令：

npm

npm install @ohmi/react-native-opencv3

yarn

yarn add @ohmi/react-native-opencv3

下面的代码展示了这个库的基本使用场景：

[!WARNING] 使用时 import 的库名不变。

import {RNCv} from 'react-native-opencv3';
import { useState } from 'react';
import { View,Button, Image,Text } from 'react-native';
const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource')
const downloadAssetSource = require('@ohmi/react-native-opencv3/downloadAssetSource')
const  App = (()=>{

 const sourceuri = ('https://b0.bdstatic.com/ugc/cXQkOFFycfYbqshIFjnXqQd9e028f9b414fb03cadc17881f88cd92.jpg')

  const [mat, setMat] = useState();// 图片Mat对象

  const [matToImageuri, setmatToImageuri] = useState('');//图片

async function imageToMat() {
        // 图片转Mat对象
    const sourceFiles = await downloadAssetSource(sourceuri);
     RNCv.imageToMat(sourceFiles).then((e:any)=> setMat(e))
}
    
async function matToImage (){
        // Mat转图片
        const sourceFiles = await downloadAssetSource(sourceuri);
      RNCv.matToImage(sourceFiles, mat).then((e:any) => {
      setmatToImageuri(e)
    })
}
    
return(
    <View style={{flex:1}}>
            {mat && <Text style={{ color: 'red' }}>Mat对象:{JSON.stringify(mat)}</Text>}
            <Button title='imageToMat' onPress={()=>imageToMat()}/>
            <Button title='matToImage' onPress={()=>matToImage()}/>
            {matToImageuri&&<Image source={{uri:matToImageuri}} width={200} height={200} />}
    </View>
)


})

export default App

Manual Link

本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-fs 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。

如未引入请参照@react-native-oh-tpl/react-native-fs 文档进行引入

2.引入原生端代码

目前有两种方法：

通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
直接链接源码。

方法一：通过 har 包引入（推荐）

[!TIP] har 包位于三方库安装路径的 harmony 文件夹下。

打开 entry/oh-package.json5，添加以下依赖

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",

    "@ohmi/react-native-opencv3": "file:../../node_modules/@ohmi/react-native-opencv3/harmony/opencv3.har"
  }

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

3.配置 CMakeLists 和引入 AsynStoragePackge

打开 entry/src/main/cpp/CMakeLists.txt，添加：

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
set(LOG_VERBOSITY_LEVEL 1)
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
add_compile_definitions(WITH_HITRACE_SYSTRACE)
add_subdirectory("${RNOH_CPP_DIR}" ./rn)

# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+ add_subdirectory("${OH_MODULE_DIR}/@ohmi/react-native-opencv3/src/main/cpp" ./opencv3)
# RNOH_END: manual_package_linking_1

file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")

add_library(rnoh_app SHARED
    ${GENERATED_CPP_FILES}
    "./PackageProvider.cpp"
    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)
target_link_libraries(rnoh_app PUBLIC rnoh)

# RNOH_BEGIN: manual_package_linking_2
target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
+ target_link_libraries(rnoh_app PUBLIC rnoh_opencv)
# RNOH_END: manual_package_linking_2

打开 entry/src/main/cpp/PackageProvider.cpp，添加：

#include "RNOH/PackageProvider.h"
#include "SamplePackage.h"
+ #include "OpencvPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
      std::make_shared<SamplePackage>(ctx),
+     std::make_shared<OpencvPackage>(ctx)
    };
}

4.在 ArkTs 侧引入 AsynStorage Package

打开 entry/src/main/ets/RNPackagesFactory.ts，添加：

...
+ import {RNOpencvPackage} from '@ohmi/react-native-opencv3/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
+   new RNOpencvPackage(ctx),
  ];
}

在 ArkTs 侧引入 CvCameraView 组件

找到 function buildCustomRNComponent()，一般位于 entry/src/main/ets/pages/index.ets 或 entry/src/main/ets/rn/LoadBundle.ets，添加：

  ...
+ import { CvCameraView } from "@ohmi/react-native-opencv3";

@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
+ if (ctx.componentName === CvCameraView.NAME) {
+   CvCameraView({
+     ctx: ctx.rnComponentContext,
+     tag: ctx.tag,
+   })
+ }

}

5.运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

然后编译、运行即可。

兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和手机 ROM。

请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：react-native-opencv3 Releases

Opencv3

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

Name	Description	Type	Required	Platform	HarmonyOS Support
`drawLine`	使用opencv3方法在Mat对象绘制一条直线	function(inMat,pt1,pt2,scalarVal,thickness)	yes	All	yes
`cvtColor`	使用opencv3方法将Mat对象转换颜色	(sourceMat,destMat,convColorCode)	yes	All	yes
`imageToMat`	使用opencv3方法将图片转Mat对象	function(inPath): Promise	yes	All	yes
`matToImage`	使用opencv3方法将Mat对象转图片	function(outPath,srcMat): Promise	yes	All	yes
`invokeMethods`	通过opencv3方法名称调用opencv3方法，opencv3多个方法	function({"callbacks": [],"paramsArr": [],"outs": [],"functions": [],"ins": []})	yes	All	yes
`invokeMethodWithCallback`	通过opencv3方法名称调用opencv3方法,返回callback	function(ins,func,params,out,callback)	yes	All	yes
`invokeMethod`		通过opencv3方法名称调用opencv3方法	yes	All	yes
`invokeInOutMethod`	通过opencv3方法名称调用opencv3方法	function(ins,func,params,out)	yes	All	yes
`MatWithScalar`	创建MatWithScalar类-矩阵（多维数组）Mat	function(rows,cols,cvtype,scalarMap)	yes	All	yes
`MatWithParams`	创建MatWithParams类-矩阵Mat	function(rows,cols,cvtype)	yes	All	yes
`Mat`	创建空Mat	function	yes	All	yes
`getMatData`	获取Mat-ArrayBuffer数据	function(mat,rownum,colnum)	yes	All	yes
`put`	使用opencv3方法改变Mat图片像素值	function(mat,rownum,colnum,data)	yes	All	yes
`setTo`	使用opencv3方法改变Mat图片颜色通道	function(mat,cvscalar)	yes	All	yes
`transpose`	使用opencv3方法改变Mat旋转图片	function(mat)	yes	All	yes
`deleteMat`	通过Mat对象，删除单个Mat对象	function	yes	All	yes
`deleteMats`	删除所有Mat对象	function	yes	All	yes
`MatOfInt`	创建Int类型Mat对象	function(lomatint,himatint)	yes	All	yes
`MatOfFloat`	创建Float类型Mat对象	function(lomatfloat,himatfloat)	yes	All	yes

CvCamera

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。 [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

Name	Description	Type	Required	Platform	HarmonyOS Support
`takePicture`	拍照	function	No	All	yes
`startRecording`	开始录像	function	No	All	yes
`startRecording`	停止录像	function	No	All	yes
`facing`	相机面向：back/front	string	No	All	yes
`onFrameSize`	获取帧大小信息的回调函数	function	No	All	yes
`onDetectFaces`	检测到人脸的回调	function	No	All	yes
`faceClassifier`	面部分类器	function	No	All	yes
`eyesClassifier`	眼睛分类器	function	No	All	yes
`noseClassifer`	鼻子分类器	function	No	All	yes
`mouthClassifier`	口型分类器	function	No	All	yes
`onFacesDetectedCv`	人脸识别回调	function	No	All	yes
`onPayload`	滤镜结果回调	function	No	All	yes
`overlayInterval`	滤镜调用间隔	function	No	All	yes
`useStorage`	使用本地存储	function	No	All	yes

遗留问题

其他

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。

@ohmi/react-native-opencv3

`react-native-opencv3`

安装与使用

npm

yarn

Manual Link

2.引入原生端代码

3.配置 CMakeLists 和引入 AsynStoragePackge

4.在 ArkTs 侧引入 AsynStorage Package

在 ArkTs 侧引入 CvCameraView 组件

5.运行

兼容性

Opencv3

CvCamera

遗留问题

其他

开源协议

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@ohmi/react-native-opencv3

react-native-opencv3

安装与使用

npm

yarn

Manual Link

2.引入原生端代码

3.配置 CMakeLists 和引入 AsynStoragePackge

4.在 ArkTs 侧引入 AsynStorage Package

在 ArkTs 侧引入 CvCameraView 组件

5.运行

兼容性

Opencv3

CvCamera

遗留问题

其他

开源协议

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

`react-native-opencv3`

Weekly Downloads