@ohmi/react-native-opencv3

v1.0.9-1.0.3

Published

5 months ago

OpenCV+contrib ported to React-Native

0High
0Medium
0Low

react-native OpenCV harmony

模板版本：v0.2.2

[!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 的效果。

遗留问题

其他

开源协议

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