【拆·应用】是为开源鸿蒙应用开发者打造的技术分享平台，是汇聚开发者的技术洞见与实践经验、提供开发心得与创新成果的展示窗口。诚邀您踊跃发声，期待您的真知灼见与技术火花！
引言
本期内容介绍基于开源鸿蒙在RK3568上开发图片编辑样例的全流程，分为上篇和下篇，本篇为上篇，主要介绍添加相册图片、编译图片功能。
在开源鸿蒙生态建设中，多媒体能力是构建丰富用户体验的核心要素。本样例首先使用 @ohos.file.photoAccessHelper拉起图库选择图片，然后使用 image.createImageSource创建图片源实例，接下来使用 createPixelMap创建 PixelMap对象，便于实现图片的编辑功能，使用 effectKit.getHighestSaturationColor()接口实现对图片的高亮调节，利用 Image、Text组件的组合给图片添加文字、贴纸，再使用 OffscreenCanvasRenderingContext2D进行离屏绘制保存新的 pixelMap。
使用说明
添加相册图片：点击首页的添加图片，选择图库图片，如无图片可点击拍照按钮，拍摄完成后会默认选择刚拍摄的照片，再点击完成按钮，添加图片成功。
编辑图片选项：添加图片成功后，点击编辑，主编辑选项为调整和标记，其中调整包括裁剪、旋转、调色、色域等，标记包括文字和贴纸。
图片裁剪：可选择4:3，16:9，1:1比例裁剪图片。
图片旋转：顺时针90度，逆时针90度旋转。
亮度调节：通过拖拉进度条调节图片亮度。
色域：给图片设置不同的色域。
样例代码拆解
下面是各个功能模块代码逻辑详细分解。可以在这里下载源码
权限申请：
本样例中需要申请受限权限：可直接修改 HarmonyAppProvision配置文件
- 打开
HarmonyAppProvision配置文件，即SDK目录下的 Sdk/openharmony/_{Version} _/toolchains /lib/UnsgnedReleasedProfileTemplate.json文件。
- 在配置文件中添加需要使用的受限权限。
添加相册图片：
- 添加相册图片
Cloumn容器中包含 Image和 Text组件，点击后调用 GetPictures.getImage()。
 - 在
GetPictures.getImage()中首先使用 @ohos.file.photoAccessHelper拉起图库选择图片，然后将选择的图片用 imgaeList数组保存路径，点击完成跳转到首页。
- 首页判断
imageList长度大于0，通过 Grid组件从 imageList中获取图片，并设置点击事件点击进入 UpdatePages页面。
编辑图片：
- 编辑图片主页面
-
添加图片完成后，点击图片进入编译图片 updatePages页面。
-
updatePages页面中通过 readImage获取图片。
-
通过 Image和 Text组件绘制编辑图标和文字，点击后进入 EditImages页面。
-
编辑页面底部菜单栏会根据 this.currentTask状态显示，默认为 Task.ADJUST状态，即显示 this.getAdjustTool(和 this.getFirstLvMenu()自定义组件。
-
this.getAdjustTool()通过 List组件展示裁剪、旋转、调试、色域等编辑选项，点击裁剪后将 this.currentTask设置为裁剪状态，点击其他的编辑选项，设置 this.currentTask其他的状态，并设置 this.cancelOkText，从而刷新底部菜单栏的显示。
- 裁剪
- 通过
List组件展示比例选项，包括原图、4:3、16:9、1:1四种比例，设置点击事件，
获取当前比例，根据当前比例调用 this.cropImage()方法进行裁剪。
- 在
this.cropImage()中调用 pixmap.crop方法，并传入计算后的size和坐标进行图片按比例裁剪。
- 裁剪完成后点击√保存，并返回主编辑菜单，其他编辑操作也是点击保存并返回。
- 旋转
- 旋转分为顺时针和逆时针90度旋转，调用
this.pixmap.rotate()接口，旋转后也是点击右下角√保存旋转后的结果，返回主编辑菜单。
- 调色
- 调色目前实现的功能是调节亮度，通过Slider滑动组件直观展示亮度进度条，监听
onChange滑动事件调用 this.brightChange()调节图片亮度。
brightChange中，先将 this.pixelMap赋值给 this.brightnessOriginBM，再通过 createEffect创建 Filter实例，通过 Filter图像效果类中的 brightness，实现亮度调节。
- 色域
- 点击色域，进入
ColorSpacePage页面。
- 通过
ForEach展示 SRGB，DisplayP3，DCI_P3，ADOBE_RGB色域，this.pixelMap!.applyColorSpace设置色域。
结语
以上是本样例具体功能模块的实现，通过本样例让开发者们了解到如何拉起图库选择图片、创建图片源实例、实现图片的编辑功能，标记图片以及进行离屏绘制保存新图片的功能将在下篇介绍。除此之外，开源鸿蒙也提供了丰富的基础组件和其他功能模块，依托开源特性可灵活定制底层功能，借助分布式架构实现 一次开发，多端部署，大幅降低跨设备协同开发成本，一系列配套的开发工具和教程可让开发者快速上手，欢迎更多的开发者加入到开源鸿蒙应用开发中，创造更多奇思妙想的应用。 | 
发布问题
发布文章
