PixelMap

介绍

本示例根据媒体->Image Kit(图片处理服务)->图片开发指导(ArkTS)进行开发。

本示例利用Image组件展示位图，同时使用@kit.ImageKit进行图片处理。

效果预览

图片缩放	垂直翻转

位图操作全部	文件操作界面

使用说明：

1. 仿照手机中的编辑图片功能。使用tabbar组件将12个功能按钮分为了四个版块：

   剪切板块：裁剪、缩放、移动。

   翻转板块：顺时针旋转、垂直翻转、水平翻转。

   调色板块：位图操作部分、位图操作全部、设置透明度。

   文件操作板块：保存图片、打开图片、编辑EXIF信息。

2. 左右滑动导航栏，切换为不同的板块。

3. 点击对应的功能按钮，中间的图片发生对应变化。

4. 点击右上角的重置按钮，图片重置为初始状态。

5. 点击返回按钮，退出应用。

工程目录

PixelMap
entry/src/main/ets/
├── common 
│   ├── Decode.ets (图片解码)
│   ├── EditingEXIF.ets (编辑EXIF信息)
│   ├── Encode.ets (图片编码)
│   └── Logger.ets (logger日志)
├── pages
│   └── Index.ets (图片编辑界面)
├── utils 
│   └── DisPlayInfoUtil.ets (获取图片的长宽信息，用于适配不同的屏幕大小)
entry/src/main/resources/
└── base
    └── media
        └── image.jpg(图片资源)
entry/src/ohosTest/ets/
├── test
│   ├── Ability.test.ets (UI测试代码)
│   └── List.test.ets (测试套件列表)
└── utils 
	└── RecourceUtil.ets (将资源文件转化为字符串类型)

具体实现

• 图片解码功能在Decode模块中实现，源码参考Decode.ets：
  • 获取图片源：使用createImage接口创建ImageSource实例，该接口支持四种参数类型：沙箱路径文件路径、文件描述符、资源文件的ArrayBuffer和资源文件的RawFileDescriptor。
  • 创建位图：createPixelMap接口创建PixelMap对象，可自定义解码参数DecodingOptions。
• 图片编辑在Index模块中实现，源码参考index.ets:
  • 编辑图片：先调用解码接口获取PixelMap，随后利用crop、scale、rotate进行裁剪、缩放、旋转等操作。处理后，调用getImageInfo，以刷新图片显示。
  • 位图操作：使用pixelMap的readPixels接口读取像素信息，修改像素后，使用writePixels接口修改pixelMap，完成位图操作。
• 图片编码功能在Encode模块中实现源码参考Encode.ets:
  • 图片编码：接收imageSource或pixelMap参数，通过imagePackerApi接口打包图片为ArrayBuffer，再使用fs.write将ArrayBuffer写入文件。

相关权限

不涉及

依赖

不涉及。

约束和限制

1. 本示例支持标准系统上运行，支持设备：RK3568;

2. 本示例支持API14版本SDK，版本号：5.0.2.57；

3. 本示例已支持使DevEco Studio 5.0.1 Release (构建版本：5.0.5.306，构建 2024年12月6日)编译运行

下载

如需单独下载本工程，执行如下命令：

git init
git config core.sparsecheckout true
echo code/DocsSample/Media/Image/PixelMap/ > .git/info/sparse-checkout
git remote add origin OpenHarmony/applications_app_samples
git pull origin master