OpenHarmony开发者论坛

标题: 拆·应用 | 第七期（上）：基于开源鸿蒙的图片编辑开发样例 [打印本页]

---

作者: 开源鸿蒙知行录    时间: 2026-1-22 14:58
标题: 拆·应用 | 第七期（上）：基于开源鸿蒙的图片编辑开发样例
[md]> 【拆·应用】是为开源鸿蒙应用开发者打造的技术分享平台，是汇聚开发者的技术洞见与实践经验、提供开发心得与创新成果的展示窗口。诚邀您踊跃发声，期待您的真知灼见与技术火花！
> **引言**
> 本期内容介绍基于开源鸿蒙在RK3568上开发图片编辑样例的全流程，分为上篇和下篇，本篇为上篇，主要介绍添加相册图片、编译图片功能。

在开源鸿蒙生态建设中，多媒体能力是构建丰富用户体验的核心要素。本样例首先使用 `@ohos.file.photoAccessHelper`拉起图库选择图片，然后使用 `image.createImageSource`创建图片源实例，接下来使用 `createPixelMap`创建 `PixelMap`对象，便于实现图片的编辑功能，使用 `effectKit.getHighestSaturationColor() `接口实现对图片的高亮调节，利用 `Image`、`Text`组件的组合给图片添加文字、贴纸，再使用 `OffscreenCanvasRenderingContext2D`进行离屏绘制保存新的 `pixelMap`。

# 使用说明

**添加相册图片**：点击首页的添加图片，选择图库图片，如无图片可点击拍照按钮，拍摄完成后会默认选择刚拍摄的照片，再点击完成按钮，添加图片成功。

**编辑图片选项**：添加图片成功后，点击编辑，主编辑选项为调整和标记，其中调整包括裁剪、旋转、调色、色域等，标记包括文字和贴纸。

**图片裁剪**：可选择4:3，16:9，1:1比例裁剪图片。

**图片旋转**：顺时针90度，逆时针90度旋转。

**亮度调节**：通过拖拉进度条调节图片亮度。

**色域**：给图片设置不同的色域。

# 样例代码拆解

下面是各个功能模块代码逻辑详细分解。可以在这里[下载源码](https://gitcode.com/openharmony/ ... Feature/Media/Image)

## 权限申请：

本样例中需要申请受限权限：可直接修改 `HarmonyAppProvision`配置文件

1. 打开 `HarmonyAppProvision`配置文件，即SDK目录下的 `Sdk/openharmony/_{Version} _/toolchains /lib/UnsgnedReleasedProfileTemplate.json`文件。
2. 在配置文件中添加需要使用的受限权限。

- 不携带权限数据的受限权限通过修改 `acls` > `allowed-acls` 字段添加。
- 携带权限数据的受限权限可通过修改 `app-services-capabilities` 字段添加。
  
  
  c）并重新进行应用签名。

## 添加相册图片：

1. **添加相册图片**

- `Cloumn`容器中包含 `Image`和 `Text`组件，点击后调用 `GetPictures.getImage()`。
  
- 在 `GetPictures.getImage()`中首先使用 `@ohos.file.photoAccessHelper`拉起图库选择图片，然后将选择的图片用 `imgaeList`数组保存路径，点击完成跳转到首页。
  
- 首页判断 `imageList`长度大于0，通过 `Grid`组件从 `imageList`中获取图片，并设置点击事件点击进入 `UpdatePages`页面。
  

## 编辑图片：

1. **编辑图片主页面**

- 添加图片完成后，点击图片进入编译图片 `updatePages`页面。
- `updatePages`页面中通过 `readImage`获取图片。
  
- 通过 `Image`和 `Text`组件绘制编辑图标和文字，点击后进入 `EditImages`页面。
  

- 编辑页面底部菜单栏会根据 `this.currentTask`状态显示，默认为 `Task.ADJUST`状态，即显示 `this.getAdjustTool(`和 `this.getFirstLvMenu()`自定义组件。
  
- `this.getAdjustTool()`通过 `List`组件展示裁剪、旋转、调试、色域等编辑选项，点击裁剪后将 `this.currentTask`设置为裁剪状态，点击其他的编辑选项，设置 `this.currentTask`其他的状态，并设置 `this.cancelOkText`，从而刷新底部菜单栏的显示。
  
  

2. **裁剪**

- 通过 `List`组件展示比例选项，包括原图、4:3、16:9、1:1四种比例，设置点击事件，
  获取当前比例，根据当前比例调用 `this.cropImage()`方法进行裁剪。
  
- 在 `this.cropImage()`中调用 `pixmap.crop`方法，并传入计算后的size和坐标进行图片按比例裁剪。
  
- 裁剪完成后点击√保存，并返回主编辑菜单，其他编辑操作也是点击保存并返回。
  

3. **旋转**

- 旋转分为顺时针和逆时针90度旋转，调用 `this.pixmap.rotate()`接口，旋转后也是点击右下角√保存旋转后的结果，返回主编辑菜单。
  

4. **调色**

- 调色目前实现的功能是调节亮度，通过Slider滑动组件直观展示亮度进度条，监听
  `onChange`滑动事件调用 `this.brightChange()`调节图片亮度。
  
- `brightChange`中，先将 `this.pixelMap`赋值给 `this.brightnessOriginBM`，再通过 `createEffect`创建 `Filter`实例，通过 `Filter`图像效果类中的 `brightness`，实现亮度调节。
  
  

5. **色域**

- 点击色域，进入 `ColorSpacePage`页面。
  
- 通过 `ForEach`展示 `SRGB`，`DisplayP3`，`DCI_P3，ADOBE_RGB`色域，`this.pixelMap!.applyColorSpace`设置色域。
  

# 结语

以上是本样例具体功能模块的实现，通过本样例让开发者们了解到如何拉起图库选择图片、创建图片源实例、实现图片的编辑功能，标记图片以及进行离屏绘制保存新图片的功能将在下篇介绍。除此之外，开源鸿蒙也提供了丰富的基础组件和其他功能模块，依托开源特性可灵活定制底层功能，借助分布式架构实现 *一次开发，多端部署*，大幅降低跨设备协同开发成本，一系列配套的开发工具和教程可让开发者快速上手，欢迎更多的开发者加入到开源鸿蒙应用开发中，创造更多奇思妙想的应用。

[/md]

---

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)

Powered by Discuz! X3.5