diff --git a/en/bam-tech-react-native-image-resizer.md b/en/bam-tech-react-native-image-resizer.md index 2ac00bbcc6add82662855775bb096ee37f6d6abf..6a12c77006a464279d3a2cdb29894b8487ae10c4 100644 --- a/en/bam-tech-react-native-image-resizer.md +++ b/en/bam-tech-react-native-image-resizer.md @@ -17,29 +17,44 @@ ## Installation and Usage -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-image-resizer Releases](https://github.com/react-native-oh-library/react-native-image-resizer/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. +Please go to the Releases page of the third-party library to check the compatible version information: -Go to the project directory and execute the following instruction: +| Library Version | Release Information | Supported RN Version | +| --------------- | --------------------------------------------------------------------- | -------------------- | +| 3.0.9 | [@react-native-oh-tpl/react-native-image-resizer Releases](https://github.com/react-native-oh-library/react-native-image-resizer/releases) | 0.72 | +| 3.0.11 | [@react-native-ohos/react-native-image-resizer Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-image-resizer/releases) | 0.77 | + +For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. + +Go to the project directory and enter the following command: #### **npm** ```bash +# V0.72 npm install @react-native-oh-tpl/react-native-image-resizer + +# V0.77 +npm install @react-native-ohos/react-native-image-resizer ``` #### **yarn** ```bash +# V0.72 yarn add @react-native-oh-tpl/react-native-image-resizer + +# V0.77 +yarn add @react-native-ohos/react-native-image-resizer ``` The following code shows the basic use scenario of the repository: -> [!WARNING] The name of the imported repository remains unchanged. +> [!WARNING] The name of the imported library remains unchanged. ```tsx import React, { useRef, useState } from 'react'; @@ -270,13 +285,15 @@ export default ImageResizerDemo; ## Use Codegen -this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/en/codegen.md). +> [!TIP] 0.77 does not require Codegen + +This library has been adapted for `Codegen`. Before using it, you need to proactively generate the bridge code for the third-party library. For details, please refer to the [Codegen Usage Documentation](/en/codegen.md). ## Link Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -Open the `harmony` directory of the HarmonyOS project in DevEco Studio. +First, use DevEco Studio to open the HarmonyOS project `harmony` in the project directory. ### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project @@ -293,12 +310,16 @@ Open the `harmony` directory of the HarmonyOS project in DevEco Studio. Currently, two methods are available: +1. Import via har package (this method will be deprecated after the IDE improves related functions; currently the preferred method); +2. Directly link to the source code. -Method 1 (recommended): Use the HAR file. +Method 1 (recommended): Import via har package -> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. +> [!TIP] The har package is located in the `harmony` folder under the third-party library installation path. -Open `entry/oh-package.json5` file and add the following dependencies: +Open `entry/oh-package.json5` and add the following dependencies: + +V0.72 ```json "dependencies": { @@ -307,26 +328,38 @@ Open `entry/oh-package.json5` file and add the following dependencies: } ``` +V0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-image-resizer": "file:../../node_modules/@react-native-ohos/react-native-image-resizer/harmony/image_resizer.har" + } +``` + Click the `sync` button in the upper right corner. -Alternatively, run the following instruction on the terminal: +Alternatively, run the following command in the terminal: ```bash cd entry ohpm install ``` -Method 2: Directly link to the source code. +Method 2: Directly link to the source code -> [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). +> [!TIP] If you need to directly link to the source code, please refer to [Direct Source Code Linking Instructions](/en/link-source-code.md). -### 3. Configuring CMakeLists and Introducing ImageResizerPackage +### 3. Introducing ImageResizerPackage in ArkTs -Open `entry/src/main/ets/RNPackagesFactory.ts` and add the following code: +Open `entry/src/main/ets/RNPackagesFactory.ts` and add: ```diff ... + //V0.72 + import {ImageResizerPackage} from '@react-native-oh-tpl/react-native-image-resizer/ts'; + //V0.77 ++ import {ImageResizerPackage} from '@react-native-ohos/react-native-image-resizer/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -336,27 +369,90 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4. Running +### 4. Configuring CMakeLists and Introducing ImageResizerPackage + +> V0.77 requires configuring CMakeLists and introducing ImageResizerPackage. + +Open `entry/src/main/cpp/CMakeLists.txt` and add: + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +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") + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_END: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-image-resizer/src/main/cpp" ./image-resizer) + +# RNOH_END: manual_package_linking_1 + +add_library(rnoh_app SHARED + "./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_ImageResizer) +# RNOH_BEGIN: manual_package_linking_2 +``` + +> [!Tip] Note: The NODE_MODULES definition above is the installation path of the source library. Users can define NODE_MODULES according to the path where the source library is installed. + +Open `entry/src/main/cpp/PackageProvider.cpp` and add: + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "ImageResizerPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 5. Running Click the `sync` button in the upper right corner. -Alternatively, run the following instruction on the terminal: +Alternatively, run the following command in the terminal: ```bash cd entry ohpm install ``` -Then build and run the code. +Then compile and run. + +> [!TIP] This library also depends on [[@react-native-oh-tpl/react-native-image-picker](https://github.com/react-native-oh-library/usage-docs/blob/master/en/react-native-image-picker.md)]. If this library has already been introduced in the HarmonyOS project, you can skip the steps in this chapter and use it directly. + +If not introduced, please refer to the Link section of [[@react-native-oh-tpl/react-native-image-picker](https://github.com/react-native-oh-library/usage-docs/blob/master/en/react-native-image-picker.md)](https://github.com/react-native-oh-library/usage-docs/blob/master/en/react-native-image-picker.md#link) for introduction. ## Constraints ### Compatibility -To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. +To use this library, you need to use the correct React-Native and RNOH versions. In addition, you need to use the matching DevEco Studio and phone ROM. -Check the release version information in the release address of the third-party library:[@react-native-oh-tpl/react-native-image-resizer Releases](https://github.com/react-native-oh-library/react-native-image-resizer/releases) +Please go to the corresponding Releases page of the third-party library to check the version information: +| Library Version | Release Information | Supported RN Version | +| --------------- | --------------------------------------------------------------------- | -------------------- | +| 3.0.9 | [@react-native-oh-tpl/react-native-image-resizer Releases](https://github.com/react-native-oh-library/react-native-image-resizer/releases) | 0.72 | +| 3.0.11 | [@react-native-ohos/react-native-image-resizer Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-image-resizer/releases) | 0.77 | ## API @@ -372,7 +468,7 @@ Check the release version information in the release address of the third-party | Name | Description | Type | Platform | HarmonyOS Support | |----------------------|---------------------|---------|-------------|-------------------| -| path | Path of image file, or a base64 encoded image string prefixed with 'data:image/imagetype' where imagetype is jpeg or png. | string | Android/iOS | Yes | +| imageUri | Path of image file, or a base64 encoded image string prefixed with 'data:image/imagetype' where imagetype is jpeg or png. | string | Android/iOS | Yes | | width | Width to resize to (see mode for more details) | number | Android/iOS | Yes | | height | Height to resize to (see mode for more details) | number | Android/iOS | Yes | | compressFormat | Can be either JPEG, PNG or WEBP. | string | Android/iOS | Yes | diff --git a/zh-cn/bam-tech-react-native-image-resizer.md b/zh-cn/bam-tech-react-native-image-resizer.md index ea0465131fb66d98ea6db6206e3c0d4e09a37075..84c1bbb0eebd66c00b1680622d78260c431c03a9 100644 --- a/zh-cn/bam-tech-react-native-image-resizer.md +++ b/zh-cn/bam-tech-react-native-image-resizer.md @@ -17,7 +17,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-image-resizer Releases](https://github.com/react-native-oh-library/react-native-image-resizer/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 3.0.9 | [@react-native-oh-tpl/react-native-image-resizer Releases](https://github.com/react-native-oh-library/react-native-image-resizer/releases) | 0.72 | +| 3.0.11 | [@react-native-ohos/react-native-image-resizer Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-image-resizer/releases) | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -26,13 +33,21 @@ #### **npm** ```bash +# V0.72 npm install @react-native-oh-tpl/react-native-image-resizer + +# V0.77 +npm install @react-native-ohos/react-native-image-resizer ``` #### **yarn** ```bash +# V0.72 yarn add @react-native-oh-tpl/react-native-image-resizer + +# V0.77 +yarn add @react-native-ohos/react-native-image-resizer ``` @@ -270,6 +285,8 @@ export default ImageResizerDemo; ## 使用 Codegen +> [!TIP] 0.77 不需要执行Codegen + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -302,6 +319,8 @@ export default ImageResizerDemo; 打开 `entry/oh-package.json5`，添加以下依赖 +V0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -309,6 +328,15 @@ export default ImageResizerDemo; } ``` +V0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-image-resizer": "file:../../node_modules/@react-native-ohos/react-native-image-resizer/harmony/image_resizer.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -328,7 +356,10 @@ ohpm install ```diff ... + //V0.72 + import {ImageResizerPackage} from '@react-native-oh-tpl/react-native-image-resizer/ts'; + //V0.77 ++ import {ImageResizerPackage} from '@react-native-ohos/react-native-image-resizer/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -338,7 +369,62 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4.配置 CMakeLists 和引入 ImageResizerPackage + +> V0.77 需要配置 CMakeLists 和引入 ImageResizerPackage。 + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +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") + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_END: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-image-resizer/src/main/cpp" ./image-resizer) + +# RNOH_END: manual_package_linking_1 + +add_library(rnoh_app SHARED + "./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_ImageResizer) +# RNOH_BEGIN: manual_package_linking_2 +``` + +> [!Tip] 注意：上面NODE_MODULES定义，为源库的安装路径，用户可以根据安装源库的路径定义NODE_MODULES + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "ImageResizerPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 5.运行 点击右上角的 `sync` 按钮 @@ -351,13 +437,22 @@ ohpm install 然后编译、运行即可。 +[!TIP] 本库还依赖了[[@react-native-oh-tpl/react-native-image-picker](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-image-picker.md)，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 + +如未引入请参照[@react-native-oh-tpl/react-native-image-picker](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-image-picker.md) 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-image-picker.md#link)进行引入 + ## 约束与限制 ### 兼容性 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-image-resizer Releases](https://github.com/react-native-oh-library/react-native-image-resizer/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 3.0.9 | [@react-native-oh-tpl/react-native-image-resizer Releases](https://github.com/react-native-oh-library/react-native-image-resizer/releases) | 0.72 | +| 3.0.11 | [@react-native-ohos/react-native-image-resizer Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-image-resizer/releases) | 0.77 | ## API @@ -368,22 +463,22 @@ ohpm install | Name | Description | Type | Required | Platform | HarmonyOS Support | |--------------------|---------------------|----------|----------|-------------|-------------------| -| createResizedImage | Resize local images | function | No | Android/iOS | Yes | +| createResizedImage | 调整本地图片大小 | function | No | Android/iOS | Yes | ### createResizedImage参数 | Name | Description | Type | Platform | HarmonyOS Support | |----------------------|---------------------|---------|-------------|-------------------| -| path | Path of image file, or a base64 encoded image string prefixed with 'data:image/imagetype' where imagetype is jpeg or png. | string | Android/iOS | Yes | -| width | Width to resize to (see mode for more details) | number | Android/iOS | Yes | -| height | Height to resize to (see mode for more details) | number | Android/iOS | Yes | -| compressFormat | Can be either JPEG, PNG or WEBP. | string | Android/iOS | Yes | -| quality | A number between 0 and 100. Used for the JPEG compression. | number | Android/iOS | Yes | -| rotation | Rotation to apply to the image, in degrees. | number | Android/iOS | Yes | -| outputPath | The resized image path. If null, resized image will be stored in cache folder. To set outputPath make sure to add option for rotation too (if no rotation is needed, just set it to 0). | string | Android/iOS | Yes | -| keepMeta | If true, will attempt to preserve all file metadata/exif info, except the orientation value since the resizing also does rotation correction to the original image. Defaults to false, which means all metadata is lost. Note: This can only be true for JPEG images which are loaded from the file system (not Web). | boolean | Android/iOS | Yes | -| options.mode | Similar to react-native Image's resizeMode: either contain (the default), cover, or stretch. contain will fit the image within width and height, preserving its ratio. cover preserves the aspect ratio, and makes sure the image is at least width wide or height tall. stretch will resize the image to exactly width and height. | string | Android/iOS | Yes | -| options.onlyScaleDown | If true, will never enlarge the image, and will only make it smaller. | boolean | Android/iOS | Yes | +| imageUri | 图片文件路径，或以'data:image/imagetype'为前缀的base64编码图片字符串，其中imagetype为jpeg或png。 | string | Android/iOS | Yes | +| width | 调整后的宽度（详见mode参数说明）。 | number | Android/iOS | Yes | +| height | 调整后的高度（详见mode参数说明）。 | number | Android/iOS | Yes | +| compressFormat | 压缩格式，可以是JPEG、PNG或WEBP。 | string | Android/iOS | Yes | +| quality | 0到100之间的数字，用于JPEG压缩质量。 | number | Android/iOS | Yes | +| rotation | 应用于图片的旋转角度，单位为度。 | number | Android/iOS | Yes | +| outputPath | 调整后图片的存储路径。如果为null，调整后的图片将存储在缓存文件夹中。设置outputPath时请确保也设置了rotation参数（如果不需要旋转，只需将其设置为0）。 | string | Android/iOS | Yes | +| keepMeta | 如果为true，将尝试保留所有文件元数据/exif信息，除了方向值，因为调整大小也会对原始图像进行旋正处理。默认为false，表示所有元数据都会丢失。注意：这只适用于从文件系统（非Web）加载的JPEG图像。 | boolean | Android/iOS | Yes | +| options.mode | 类似于React Native Image的resizeMode：contain（默认）、cover或stretch。contain会在保持宽高比的情况下将图像适应到指定的宽高内。cover会保持宽高比，并确保图像至少与指定宽度一样宽或与指定高度一样高。stretch会将图像精确调整为指定的宽高。 | string | Android/iOS | Yes | +| options.onlyScaleDown | 如果为true，永远不会放大图像，只会缩小图像。 | boolean | Android/iOS | Yes | ## 遗留问题 @@ -391,4 +486,5 @@ ohpm install ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/bamlab/react-native-image-resizer/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +本项目基于 [The MIT License (MIT)](https://github.com/bamlab/react-native-image-resizer/blob/master/LICENSE) ，请自由地享受和参与开源。 +