rntpc_react-native-photo-manipulator:基于 React Native 的图片处理 API 项目

Star33
3
代码
代码
Issues1
Pull Requests
项目讨论
Wiki
分析
Star33
3

是一个用于 React Native 的图像处理库，支持在 Android 和 iOS 上以代码方式编辑图片

分支1Tags2

模板版本：v0.4.2

react-native-photo-manipulator

本项目基于 react-native-photo-manipulator@1.9.2 开发。 该第三方库的仓库已迁移至 Gitcode，并支持直接从 npm 安装。新的包名为 @react-native-ohos/react-native-photo-manipulator，各版本信息如下：

第三方库名称 第三方库版本（npm 地址） 发布信息 支持的 RN 版本 Autolink 编译 API 版本 社区基线版本 源码地址
@react-native-ohos/react-native-photo-manipulator ~1.9.4 Gitcode Releases 0.72/0.77/0.82/0.84 部分支持（0.72/0.82/0.84） API12+ 1.9.2 sig
@react-native-ohos/react-native-photo-manipulator 1.9.3 Gitcode Releases 0.72/0.77 否 API12+ 1.9.2 sig

简介

React Native 图像处理 API，用于在鸿蒙上以编程方式编辑照片。

下载安装

进入工程目录，并执行以下命令：

npm

npm install @react-native-ohos/react-native-photo-manipulator

yarn

yarn add @react-native-ohos/react-native-photo-manipulator

链接

是否支持 autolink RN 框架版本
~1.9.4 部分支持（0.72/0.82/0.84） 0.84/0.82/0.77/0.72
1.9.3 否 0.77/0.72

使用 AutoLink 的工程需要根据该文档进行配置，Autolink 框架指导文档：https://gitcode.com/CPF-RN/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md

如果您使用的版本支持 Autolink，并且工程已接入 Autolink，则可跳过 ManualLink 配置。

ManualLink: 此步骤为手动配置原生依赖项的指导

首先需要使用 DevEco Studio 打开项目中的 HarmonyOS 工程 harmony

1. 在工程根目录的 oh-package.json5 中添加 overrides 字段

{
  "overrides": {
     "@rnoh/react-native-openharmony" : "./react_native_openharmony"
  }
}

2. 引入原生端代码

当前有两种方式：

  • 通过 har 包引入；
  • 直接链接源码。

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

har 包位于第三方库安装路径下的 `harmony` 文件夹中。

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

"dependencies": {
    "@react-native-ohos/react-native-photo-manipulator": "file:../../node_modules/@react-native-ohos/react-native-photo-manipulator/harmony/photo_manipulator.har"
  }

点击右上角的 sync 按钮，

或者在命令行终端执行：

cd entry
ohpm install

方法二：直接链接源代码

如需直接链接源代码，请参考[直接链接源代码说明](https://gitcode.com/CPF-RN/usage-docs/blob/master/en/link-source-code.md)。

3. 配置 CMakeLists 并引入 RNPhotoManipulatorPackage

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

+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")

# RNOH_BEGIN: manual_package_linking_1
+ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-photo-manipulator/src/main/cpp" ./photo-manipulator)
# RNOH_END: manual_package_linking_1

# RNOH_BEGIN: manual_package_linking_2
+ target_link_libraries(rnoh_app PUBLIC rnoh_photo_manipulator)
# RNOH_END: manual_package_linking_2

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

#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
+ #include "RNPhotoManipulatorPackage.h"

using namespace rnoh;

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

4. 在 ArkTs 侧引入 RNPhotoManipulatorPackage

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

  ...
+ import {RNPhotoManipulatorPackage} from '@react-native-ohos/react-native-photo-manipulator/ts';

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

运行

点击右上角的 sync 按钮，

或者在命令行终端执行：

cd entry
ohpm install

随后编译并运行即可。

约束与限制

兼容性

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

以下版本已验证通过：

  1. RNOH: 0.84.1; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM:6.0.0.328 SP26;
  2. RNOH: 0.82.1; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
  3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
  4. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;

使用示例

以下代码演示了本库的基本使用场景：

使用时，import 所用的库名保持不变。

import * as React from 'react';
import { Image, Text } from 'react-native';
import PhotoManipulator, {
  FlipMode,
  MimeType,
} from 'react-native-photo-manipulator';
import { IMAGE } from './settings';

export default React.memo(function ExampleFlip() {
  const [imageBoth, setImageBoth] = React.useState<string | null>(null);
  const [imageHorizontal, setImageHorizontal] = React.useState<string | null>(
    null
  );
  const [imageVertical, setImageVertical] = React.useState<string | null>(null);
  const noop = () => {};

  React.useEffect(() => {
    const operation = async () => {
      setImageBoth(
        await PhotoManipulator.flipImage(IMAGE, FlipMode.Both, MimeType.PNG)
      );
      setImageHorizontal(
        await PhotoManipulator.flipImage(IMAGE, FlipMode.Horizontal)
      );
      setImageVertical(
        await PhotoManipulator.flipImage(IMAGE, FlipMode.Vertical)
      );
    };
    operation().then(noop).catch(console.log);
  }, []);

  return (
    <>
      {typeof imageHorizontal === 'string' ? (
        <Text>Horizontal</Text>
      ) : null}
      {typeof imageHorizontal === 'string' ? (
        <Image
          testID="flipHorizontalResult"
          source={{ uri: imageHorizontal }}
        />
      ) : null}
      {typeof imageVertical === 'string' ? (
        <Text>Vertical</Text>
      ) : null}
      {typeof imageVertical === 'string' ? (
        <Image
          testID="flipVerticalResult"
          source={{ uri: imageVertical }}
        />
      ) : null}
      {typeof imageBoth === 'string' ? (
        <Text>Both</Text>
      ) : null}
      {typeof imageBoth === 'string' ? (
        <Image
          testID="flipBothResult"
          source={{ uri: imageBoth }}
        />
      ) : null}
    </>
  );
});

使用说明

PhotoManipulator.flipImage(IMAGE, FlipMode.Both, MimeType.PNG)

接口说明

“平台”列表示该属性在原始第三方库上支持的平台。

“HarmonyOS 支持”列为“是”表示 HarmonyOS 平台支持该属性；“否”则表示不支持；“部分支持”表示该属性在 HarmonyOS 上仅部分支持。使用方法跨平台一致，效果与 iOS 或 Android 保持一致。

支持输入的图片格式：jpg、jpeg、png。支持输出的图片格式：jpeg、png。

名称 描述 类型 是否必填 平台 HarmonyOS 支持
batch 对图像执行裁剪、缩放，并进行覆盖与绘制文本等操作。 function 否 全部平台 是
crop 根据 cropRegion 裁剪图像，并在提供 targetSize 时调整至该尺寸。 function 否 全部平台 是
flipImage 水平或垂直翻转图像。 function 否 全部平台 是
rotateImage 旋转图像。 function 否 全部平台 是
overlayImage 将图像叠加到背景图像上。 function 否 全部平台 是
printText 在图像上绘制文本。 function 否 全部平台 部分支持
optimize 以指定质量（0-100）将结果图像保存为 JPEG 格式。 function 否 全部平台 是

遗留问题

其他

目录结构

photo_manipulator/
├── BuildProfile.ets                  # 构建配置
├── build-profile.json5               # 模块构建 profile
├── hvigorfile.ts                     # hvigor 构建脚本
├── index.ets                         # 模块入口（导出 PhotoManipulatorPackage 等）
├── oh-package.json5                  # OHPM 包配置
├── consumer-rules.txt                # 混淆消费规则
├── obfuscation-rules.txt             # 混淆规则
├── ts.ets
└── src/
    ├── main/
    │   ├── module.json5              # HarmonyOS 模块清单
    │   ├── cpp/                      # C++ 侧（TurboModule + Fabric 组件）
    │   │   ├── CMakeLists.txt
    │   │   ├── RNPhotoManipulatorPackage.h
    │   │   └── generated/            # codegen 生成代码
    │   │       ├── RNOH/generated/
    │   │       │   ├── BasePhotoManipulatorPackage.h
    │   │       │   └── turbo_modules/
    │   │       │       ├── RNPhotoManipulator.cpp
    │   │       │       └── RNPhotoManipulator.h
    │   │       └── react/renderer/components/photo_manipulator/
    │   │           ├── ComponentDescriptors.h
    │   │           ├── EventEmitters.cpp / .h
    │   │           ├── Props.cpp / .h
    │   │           ├── ShadowNodes.cpp / .h
    │   │           └── States.cpp / .h
    │   ├── ets/                      # ArkTS 侧（业务实现）
    │   │   ├── PhotoManipulatorPackage.ts        # RNPackage 注册
    │   │   ├── PhotoManipulatorTurboModule.ts   # TurboModule 主实现
    │   │   ├── CropUtil.ts            # 裁剪
    │   │   ├── FlipImageUtils.ts      # 翻转
    │   │   ├── RotateImageUtil.ts     # 旋转
    │   │   ├── OverlayUtil.ts         # 图层叠加/水印
    │   │   ├── OptimizeUtils.ts       # 图片优化
    │   │   ├── PrintTextUtils.ts      # 文字排版/水印文字
    │   │   ├── RNImageSRC.ts          # 图片源解析
    │   │   ├── RegionItem.ts / TextOptions.ts / TextStyle.ts / ShadowLayerStyle.ts  # 类型定义
    │   │   ├── ErrorCode.ts / PhotoManipulatorError.ts  # 错误码
    │   │   ├── Logger.ts / Utils.ts
    │   └── resources/
    │       ├── base/element/          # string.json / float.json
    │       └── rawfile/assets/rn-tester/  # 测试用图片资源（tester 示例的 jpg/png）
    └── ohosTest/                      # 设备 instrumentation 测试
        ├── ets/test/Ability.test.ets
        ├── ets/test/List.test.ets
        └── module.json5

贡献代码

如果您在使用过程中发现任何问题，欢迎提交 Issue，同时也非常欢迎提交 PR 。

开源协议

本项目基于 The MIT License (MIT)，欢迎自由使用、学习和参与开源。

项目介绍

是一个用于 React Native 的图像处理库，支持在 Android 和 iOS 上以代码方式编辑图片

MIT TypeScript684提交数孵化typescript图像处理openharmonyios
定制我的领域
README
规则集