From e83210f0723479cd4307efab7690ef1f34432e9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=90=A6?= <liqi219@h-partners.com>
Date: Sun, 28 Sep 2025 17:37:29 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#ID0F9T]=20=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4react-native-photo-manipulator=E6=8C=87=E5=AF=BC?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 李琦 <liqi219@h-partners.com>
---
 en/react-native-photo-manipulator.md    | 254 ++++++++++++++++++++++++
 zh-cn/react-native-photo-manipulator.md | 250 +++++++++++++++++++++++
 2 files changed, 504 insertions(+)
 create mode 100644 en/react-native-photo-manipulator.md
 create mode 100644 zh-cn/react-native-photo-manipulator.md

diff --git a/en/react-native-photo-manipulator.md b/en/react-native-photo-manipulator.md
new file mode 100644
index 000000000..009af36c2
--- /dev/null
+++ b/en/react-native-photo-manipulator.md
@@ -0,0 +1,254 @@
+> Template version: v0.3.0
+
+<p align="center">
+  <h1 align="center"> <code>react-native-photo-manipulator</code> </h1>
+</p>
+
+This project is based on [react-native-photo-manipulator@1.9.2](https://github.com/guhungry/react-native-photo-manipulator/tree/v1.9.2).
+
+Please go to the Releases release address of the third-party library to view the supporting version information: [@eact-native-ohos/react-native-photo-manipulator Releases](https://github.com/react-native-oh-library/react-native-photo-manipulator/releases). For older versions that are not published to npm, install the tgz package by referring to the [Installation Guide](/en/tgz-usage-en.md).
+
+| Version                   | Releases info                                      |  Support RN version                    |
+| ------------------------- | ------------------------------------------------- |  -------------------------- |
+| 1.9.3                 | [@react-native-ohos/react-native-photo-manipulator Releases](https://github.com/react-native-oh-library/react-native-photo-manipulator/releases)  | 0.72/0.77 |
+
+## 1. Installation and Usage
+
+Go to the project directory and execute the following instruction:
+
+#### **npm**
+
+```bash
+npm install @react-native-ohos/react-native-photo-manipulator
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-ohos/react-native-photo-manipulator
+```
+
+The following code shows the basic use scenario of the repository:
+
+> [!WARNING] The name of the imported repository remains unchanged.
+
+```js
+import * as React from 'react';
+import { Image, Text } from 'react-native';
+import styles, { ImageResultProps } from '../App.styles';
+import { noop } from '../utils';
+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);
+
+  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 style={styles.exampleDescription}>Horizontal</Text>
+      ) : null}
+      {typeof imageHorizontal === 'string' ? (
+        <Image
+          testID="flipHorizontalResult"
+          {...ImageResultProps}
+          source={{ uri: imageHorizontal }}
+        />
+      ) : null}
+      {typeof imageVertical === 'string' ? (
+        <Text style={styles.exampleDescription}>Vertical</Text>
+      ) : null}
+      {typeof imageVertical === 'string' ? (
+        <Image
+          testID="flipVerticalResult"
+          {...ImageResultProps}
+          source={{ uri: imageVertical }}
+        />
+      ) : null}
+      {typeof imageBoth === 'string' ? (
+        <Text style={styles.exampleDescription}>Both</Text>
+      ) : null}
+      {typeof imageBoth === 'string' ? (
+        <Image
+          testID="flipBothResult"
+          {...ImageResultProps}
+          source={{ uri: imageBoth }}
+        />
+      ) : null}
+    </>
+  );
+});
+
+```
+
+## 2. Manual Link
+
+This step provides guidance for manually configuring native dependencies.
+
+Open the `harmony` directory of the HarmonyOS project in DevEco Studio.
+
+### 2.1 Overrides RN SDK
+
+To ensure the project relies on the same version of the RN SDK, you need to add an `overrides` field in the project's root `oh-package.json5` file, specifying the RN SDK version to be used. The replacement version can be a specific version number, a semver range, or a locally available HAR package or source directory.
+
+For more information about the purpose of this field, please refer to the [official documentation](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#en-us_topic_0000001792256137_overrides).
+
+```json
+{
+  "overrides": {
+    "@rnoh/react-native-openharmony": "^0.72.38" // ohpm version
+    // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // a locally available HAR package
+    // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // source code directory
+  }
+}
+```
+
+### 2.2 Introducing Native Code
+
+Currently, two methods are available:
+
+- Use the HAR file.
+- Directly link to the source code。
+
+Method 1 (recommended): Use the HAR file.
+
+> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library.
+
+Open `entry/oh-package.json5` file and add the following dependencies:
+
+```json
+"dependencies": {
+    "@react-native-ohos/react-native-photo-manipulator": "file:../../node_modules/@react-native-ohos/react-native-photo-manipulator/harmony/photo_manipulator.har"
+  }
+```
+
+Click the `sync` button in the upper right corner.
+
+Alternatively, run the following instruction on the terminal:
+
+```bash
+cd entry
+ohpm install
+```
+
+Method 2: Directly link to the source code.
+
+> [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md).
+
+### 2.3 Configuring CMakeLists and Introducing RNPhotoManipulatorPackage
+
+Open `entry/src/main/cpp/CMakeLists.txt` and add the following code:
+
+```diff
++ 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
+```
+
+Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code:
+
+```diff
+#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)
+    };
+}
+```
+
+
+### 2.4 Introducing RNPhotoManipulatorPackage Package to ArkTS
+
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
+
+```diff
+  ...
++ import {RNPhotoManipulatorPackage} from '@react-native-ohos/react-native-photo-manipulator/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+  return [
++   new RNPhotoManipulatorPackage(ctx)
+  ];
+}
+```
+
+### 2.5 Running
+
+Click the `sync` button in the upper right corner.
+
+Alternatively, run the following instruction on the terminal:
+
+```bash
+cd entry
+ohpm install
+```
+
+Then build and run the code.
+
+## 3. Constraints
+
+### 3.1 Compatibility
+
+Check the release version information in the release address of the third-party library: [@react-native-ohos/react-native--photo-manipulator Releases](https://github.com/react-native-oh-library/react-native-photo-manipulator/releases).
+
+
+## 4. Properties (If Any)
+
+> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library.
+
+> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
+
+| Name        | Description                                       | Type   | Required | Platform | HarmonyOS Support |
+| ----------- | ------------------------------------------------- | ------ | -------- | -------- | ----------------- |
+| batch | Crop, resize and do operations (overlay and printText) on image. | function | no      |  | yes          |
+| crop | Crop image with cropRegion and resize to targetSize if specified. | function | no     |  | yes        |
+| flipImage | Flip Image horizontally or vertically. | function | no     |  | yes        |
+| rotateImage | rotate Image. | function | no     |  | yes        |
+| overlayImage | Overlay image on top of background image. | function | no     |  | yes        |
+| printText | Print texts into image. | function | no     |  | yes        |
+| optimize | Save result image with specified quality between `0 - 100` in jpeg format. | function | no     |  | yes        |
+ 
+
+## 5. Known Issues
+
+- [X] The printText interface cannot set the reading direction of Arabic strings due to drawing, resulting in incorrect rendering of Arabic strings.  issue: [issue#6](https://github.com/react-native-oh-library/react-native-photo-manipulator/issues/1)
+.
+
+## 6. License
+
+This project is licensed under [MIT License](https://github.com/guhungry/react-native-photo-manipulator/blob/v1.9.2/LICENSE).
diff --git a/zh-cn/react-native-photo-manipulator.md b/zh-cn/react-native-photo-manipulator.md
new file mode 100644
index 000000000..ee4b4dbf0
--- /dev/null
+++ b/zh-cn/react-native-photo-manipulator.md
@@ -0,0 +1,250 @@
+> 模板版本：v0.3.0
+
+<p align="center">
+  <h1 align="center"> <code>react-native-photo-manipulator</code> </h1>
+</p>
+
+
+本项目基于 [react-native-photo-manipulator@1.9.2](https://github.com/guhungry/react-native-photo-manipulator/tree/v1.9.2) 开发。
+
+请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-ohos/react-native-photo-manipulator Releases](https://github.com/react-native-oh-library/react-native-photo-manipulator/releases)。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
+
+| 三方库版本                 | 发布信息                                      |  支持RN版本                 |
+| ------------------------- | ------------------------------------------------- |  -------------------------- |
+| 1.9.3                 | [@react-native-ohos/react-native-photo-manipulator Releases](https://github.com/react-native-oh-library/react-native-photo-manipulator/releases)  | 0.72/0.77 |
+
+## 1. 安装与使用
+
+进入到工程目录并输入以下命令：
+
+#### **npm**
+
+```bash
+npm install @react-native-ohos/react-native-photo-manipulator
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-ohos/react-native-photo-manipulator
+```
+
+下面的代码展示了这个库的基本使用场景：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```js
+import * as React from 'react';
+import { Image, Text } from 'react-native';
+import styles, { ImageResultProps } from '../App.styles';
+import { noop } from '../utils';
+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);
+
+  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 style={styles.exampleDescription}>Horizontal</Text>
+      ) : null}
+      {typeof imageHorizontal === 'string' ? (
+        <Image
+          testID="flipHorizontalResult"
+          {...ImageResultProps}
+          source={{ uri: imageHorizontal }}
+        />
+      ) : null}
+      {typeof imageVertical === 'string' ? (
+        <Text style={styles.exampleDescription}>Vertical</Text>
+      ) : null}
+      {typeof imageVertical === 'string' ? (
+        <Image
+          testID="flipVerticalResult"
+          {...ImageResultProps}
+          source={{ uri: imageVertical }}
+        />
+      ) : null}
+      {typeof imageBoth === 'string' ? (
+        <Text style={styles.exampleDescription}>Both</Text>
+      ) : null}
+      {typeof imageBoth === 'string' ? (
+        <Image
+          testID="flipBothResult"
+          {...ImageResultProps}
+          source={{ uri: imageBoth }}
+        />
+      ) : null}
+    </>
+  );
+});
+
+```
+
+## 2. Manual Link
+
+此步骤为手动配置原生依赖项的指导。
+
+首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`。
+
+### 2.1. Overrides RN SDK
+
+为了让工程依赖同一个版本的 RN SDK，需要在工程根目录的 `oh-package.json5` 添加 overrides 字段，指向工程需要使用的 RN SDK 版本。替换的版本既可以是一个具体的版本号，也可以是一个模糊版本，还可以是本地存在的 HAR 包或源码目录。
+
+关于该字段的作用请阅读[官方说明](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#zh-cn_topic_0000001792256137_overrides)：
+
+```json
+{
+  "overrides": {
+    "@rnoh/react-native-openharmony": "^0.72.38" // ohpm 在线版本
+    // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // 指向本地 har 包的路径
+    // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // 指向源码路径
+  }
+}
+```
+
+### 2.2. 引入原生端代码
+
+目前有两种方法：
+
+- 通过 har 包引入；
+- 直接链接源码。
+
+方法一：通过 har 包引入（推荐）
+
+> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。
+
+打开`entry/oh-package.json5`，添加以下依赖：
+
+```json
+"dependencies": {
+    "@react-native-ohos/react-native-photo-manipulator": "file:../../node_modules/@react-native-ohos/react-native-photo-manipulator/harmony/photo_manipulator.har"
+  }
+```
+
+点击右上角的 `sync` 按钮，
+
+或者在命令行终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+
+> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md)。
+
+### 2.3. 配置 CMakeLists 和引入 RNPhotoManipulatorPackage
+
+打开 `entry/src/main/cpp/CMakeLists.txt`，添加：
+
+```diff
++ 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`，添加：
+
+```diff
+#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)
+    };
+}
+```
+
+###  2.4. 在 ArkTs 侧引入 RNPhotoManipulatorPackage
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+
+```diff
+  ...
++ import {RNPhotoManipulatorPackage} from '@react-native-ohos/react-native-photo-manipulator/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+  return [
++   new RNPhotoManipulatorPackage(ctx)
+  ];
+}
+```
+
+### 2.5. 运行
+
+点击右上角的 `sync` 按钮，
+
+或者在命令行终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 3. 约束与限制
+
+### 3.1. 兼容性
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-ohos/react-native--photo-manipulator Releases](https://github.com/react-native-oh-library/react-native-photo-manipulator/releases)。
+
+## 4. 属性
+
+> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| Name        | Description                                       | Type   | Required | Platform | HarmonyOS Support |
+| ----------- | ------------------------------------------------- | ------ | -------- | -------- | ----------------- |
+| batch | Crop, resize and do operations (overlay and printText) on image. | function | no      |  | yes          |
+| crop | Crop image with cropRegion and resize to targetSize if specified. | function | no     |  | yes        |
+| flipImage | Flip Image horizontally or vertically. | function | no     |  | yes        |
+| rotateImage | rotate Image. | function | no     |  | yes        |
+| overlayImage | Overlay image on top of background image. | function | no     |  | yes        |
+| printText | Print texts into image. | function | no     |  | yes        |
+| optimize | Save result image with specified quality between `0 - 100` in jpeg format. | function | no     |  | yes        |
+      
+## 5. 遗留问题
+- [X] printText接口因drawing无法设置阿拉伯字符串的读取方向，导致绘制的阿拉伯字符串错误。 问题：[issue#6](https://github.com/react-native-oh-library/react-native-photo-manipulator/issues/1)。
+
+## 6. 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/guhungry/react-native-photo-manipulator/blob/v1.9.2/LICENSE)，请自由地享受和参与开源。
\ No newline at end of file
-- 
Gitee