基于开源鸿蒙的图片编辑开发样例（1）

【拆·应用】是为开源鸿蒙应用开发者打造的技术分享平台，是汇聚开发者的技术洞见与实践经验、提供开发心得与创新成果的展示窗口。诚邀您踊跃发声，期待您的真知灼见与技术火花！

引言

本期内容介绍基于开源鸿蒙在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/applications_app_samples/tree/master/code/BasicFeature/Media/Image

权限申请：

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

1． 打开HarmonyAppProvision配置文件，即SDK目录下的“Sdk/openharmony/_{Version} _/toolchains /lib/UnsgnedReleasedProfileTemplate.json”文件。

2． 在配置文件中添加需要使用的受限权限。

a）不携带权限数据的受限权限通过修改 "acls" > "allowed-acls" 字段添加。

b）携带权限数据的受限权限可通过修改 "app-services-capabilities" 字段添加。

c）并重新进行应用签名。

添加相册图片：

1． 添加相册图片

a）Cloumn容器中包含Image和Text组件，点击后调用GetPictures.getImage()。

b）在GetPictures.getImage()中首先使用@ohos.file.photoAccessHelper拉起图库选择图片，然后将选择的图片用imgaeList数组保存路径，点击完成跳转到首页。

c）首页判断imageList长度大于0，通过Grid组件从imageList中获取图片，并设置点击事件点击进入UpdatePages页面。

编辑图片：

1．编辑图片主页面

a）添加图片完成后，点击图片进入编译图片updatePages页面。

b）updatePages页面中通过readImage获取图片。

c）通过imgae和Text组件绘制编辑图标和文字，点击后进入EditImages页面。

d）编辑页面底部菜单栏会根据this.currentTask状态显示，默认为Task.ADJUST状态，即显示this.getAdjustTool()和this.getFirstLvMenu()自定义组件。

e）this.getAdjustTool()通过List组件展示裁剪、旋转、调试、色域等编辑选项，点击裁剪后将this.currentTask设置为裁剪状态，点击其他的编辑选项，设置this.currentTask其他的状态，并设置this.cancelOkText，从而刷新底部菜单栏的显示。

 

2．裁剪

a）通过List组件展示比例选项，包括原图、4:3、16:9、1:1四种比例，设置点击事件，

获取当前比例，根据当前比例调用this.cropImage()方法进行裁剪。

b）在this.cropImage()中调用pixmap.crop方法，并传入计算后的size和坐标进行图片按比例裁剪。

c）裁剪完成后点击√保存，并返回主编辑菜单，其他编辑操作也是点击保存并返回。

3．旋转

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

4．调色

a）调色目前实现的功能是调节亮度，通过Slider滑动组件直观展示亮度进度条，监听

onChange滑动事件调用this.brightChange()调节图片亮度。

b）brightChange中，先将this.pixelMap赋值给this.brightnessOriginBM，再通过createEffect创建Filter实例，通过Filter图像效果类中的brightness，实现亮度调节。

 

5．色域

a）点击色域，进入ColorSpacePage页面。

b）通过ForEach展示SRGB，DisplayP3，DCI_P3，ADOBE_RGB色域，this.pixelMap!.applyColorSpace设置色域。

结语

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

供稿：开发者与活动运营组 刘丽红