即日起至12月31日，加入班级并成功考取【HarmonyOS开发者基础/高级证书】+发布一篇技术文章，即可解锁“通关成就”，有机会赢取官方限定礼品！ 礼品数量有限，手速要快！点击加入，让你的努力闪闪发光！✨
场景介绍
为照片添加滤镜是拍摄美化应用的高频使用场景之一，如用户对图库（相册）里的照片进行美化时需要添加滤镜。
本示例基于@ohos.effectKit实现图片滤镜，再通过@ohos.file.fs和SaveButton组件实现图片存储。
效果预览
实现思路
-
通过PhotoViewPicker拉起图库（相册），读取选中图片的数据。
-
通过@ohos.effectKit处理图像实现滤镜效果。
-
通过SaveButton组件保存图片至图库（相册）。
// 读取数据getPixelMapFromGallery(context).then((pixelMap?: image.PixelMap) => { if (pixelMap) { this.pixelMap = pixelMap; };})// 添加滤镜，以粉色滤镜为例this.pixelMapChanged = await pinkColorFilter(this.pixelMap);// 保存图片至图库SaveButton({ text: SaveDescription.SAVE }) .onClick(async (event: ClickEvent, result: SaveButtonOnClickResult) => { if (result === SaveButtonOnClickResult.SUCCESS) { // 保存图片 } else { promptAction.showToast({ message: $r('app.string.save_failed') }) } })
约束与限制
- 本示例支持API Version 16 Release及以上版本。
- 本示例支持HarmonyOS 5.0.4 Release SDK及以上版本。
- 本示例需要使用DevEco Studio 5.0.4 Release及以上版本进行编译运行。
工程目录
├──entry/src/main/ets│ ├──constants│ │ └──CommonConstants.ets // 样式常量│ ├──entryability│ │ └──EntryAbility.ets // 入口│ ├──pages│ │ └──MainPage.ets // 首页│ ├──utils│ │ ├──FilterUtil.ets // 滤镜工具│ │ └──ImageUtil.ets // 图片工具│ └──viewModel│ ├──IconListViewModel.ets // 滤镜组件数据│ └──OptionViewModel.ets // 滤镜类型枚举└──entry/src/main/resources // 应用资源目录
