README.md
1# Image Processing
2
3### Introduction
4
5This sample demonstrates the image processing function.
6
7In this sample, [\<TextArea>](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md) is used to implement multi-line text input, [@ohos.app.ability.common](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/apis-ability-kit/js-apis-app-ability-common.md) is used to obtain images from albums, [@ohos.multimedia.image](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/apis-image-kit/js-apis-image.md) is used to generate pixel maps, and **scale()**, **crop()**, and **rotate()** of the **pixelMap** class are used to scale, crop, and rotate images.
8
9### Usage
10
111. Touch **Add image** on the offering review page. The page for selecting images is displayed.
12
132. Select the images to be displayed. You can select six images at most.
14
153. Select an image and touch **Next**. The image editing page is displayed. To scale an image, touch **scale** and then touch **narrow** or **amplification**. To crop the image, touch **crop** and select a crop ratio. To rotate the image, touch **rotate**.To decode the image, touch **update hdr setting**.
16
174. After finishing editing the image, touch **OK**. The page for posting comments is displayed, with the images shown. You can touch **Add image** to add more images.
18
195. Select an image and touch **Next**. The image editing page is displayed.
20
216. Touch the back button to exit the app.
22
23### Preview
24
25  
26
27### Required Permissions
28
29[ohos.permission.READ_IMAGEVIDEO](https://gitee.com/openharmony/docs/blob/master/en/application-dev/security/AccessToken/restricted-permissions.md)
30
31[ohos.permission.WRITE_IMAGEVIDEO](https://gitee.com/openharmony/docs/blob/master/en/application-dev/security/AccessToken/restricted-permissions.md)
32
33[ohos.permission.MEDIA_LOCATION](https://gitee.com/openharmony/docs/blob/master/en/application-dev/security/AccessToken/permissions-for-all.md#ohospermissionmedia_location)
34
35### Dependency
36
37N/A
38
39### Constraints
40
411. This sample can only be run on standard-system devices that use the Rockchip RK3568 chip.
42
432. This sample is based on the stage model, which is supported from API version 12 (API Version 12 5.0.0.26).
44
453. DevEco Studio (4.1.3.500) must be used.
46
README_zh.md
1# 图片编辑
2
3### 介绍
4
5本示例使用 [TextArea](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md)
6实现多文本输入，使用 [@ohos.app.ability.common](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-ability-kit/js-apis-app-ability-common.md)
7依赖系统的图库引用，实现在相册中获取图片，使用 [@ohos.multimedia.image](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-image-kit/js-apis-image.md)
8生成pixelMap，使用pixelMap的scale()，crop()，rotate()接口实现对图片的缩放，裁剪，旋转功能。
9使用[@ohos.effectKit](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-effectKit.md)
10生成effectKit,使用effectKit.getHighestSaturationColor()
11接口实现对图片的高亮调节。添加文字/贴纸，利用组件的组合编辑素材大小和位置，再使用OffscreenCanvasRenderingContext2D进行离屏绘制保存。
12接口实现对图片编解码功能。可以通过uri\fd\data\rawFile将图片资源解码为ImageSource或pixelMap或多图对象。可通过ImageSource/pixelMap/多图对象编码为file/data。
13
14### 效果预览
15
16| 编辑删除 | 图片调整 | 图片标记 |
17|-------------------------------------------------|-----------------------------------------------------|-------------------------------------------------|
18|  |  |  |
19
20| 图片裁剪 | 图片缩放 | 图片旋转 |
21|-------------------------------------------------|---------------------------------------------------|-----------------------------------------------------|
22|  |  |  |
23
24| 图片亮度调节 | 图片添加贴纸 | 图片添加文字 | 图片色域调节 | 修改hdr设置 |
25|-----------------------------------------------------|-------------------------------------------------------|-------------------------------------------------|-------------------------------------------------------------|-------------------------------------------------------|
26|  |  |  |  |  |
27
28| 主界面 | 多图操作 | 多图解码 | 多图编码 |
29|-----------------------------------------------|-----------------------------------------------------|---------------------------------------------------|---------------------------------------------------|
30|  |  |  |  |
31
32使用说明：
33
341. 发表评价页面点击添加图片/照片，页面跳转到图片选择页面；
352. 进入图片选择页面后，选择需要显示的图片；
363. 选中图片后，页面会跳转到发表评价页面，点击图片跳转到图片编辑删除页面，点击编辑进入到编辑功能页；
374. 调整菜单有裁剪、缩放、旋转、调色、修改hdr设置功能(因为有些机型设备不支持，所以HDR解码后显示效果看不出来)；
385. 标记菜单有添加文字、添加贴纸功能；
396. 编辑完成后，点击撤回按钮图片会还原到上一个编辑状态；
407. 图片编辑完成后，点击保存，页面会跳转到发表评价页面，显示相关照片；
418. 点击返回按钮，退出应用。
429. 进入应用主页面点击多图操作按钮，跳转到多图操作界面；
4310. 多图操作分为js流和native流，点击js接口，选择解码操作，再选择解码图片类型JPEG或HEIF(rk3568开发板不支持HEIF解码)，点击后会出现被解码的图片和解码后的图片，两张图片一致；
4411. 点击js/native接口，选择编码操作，再选择编码图片的类型，比如sourceToBuffer表示编码入参是ImageSource，出参是buffer；
45
46### 工程目录
47
48```
49entry/src/main/ets/
50|---pages
51| |---EditImages.ets // 图片编辑
52| |---GetPictrues.ets // 图片选择
53| |---Index.ets // 首页
54| |---PicturePages.ets // 多图操作
55| |---UpadatePages.ets // 编辑删除界面
56photomodify/src/main/ets/components
57|---featrue
58| |---ComputeFeature.ets // 计算功能
59| |---PixelMapQueue.ets // PixelMap队列
60|---model
61| |---AdjustData.ets // 功能数据
62| |---AdjustModels.ets // 功能模型
63| |---MaterialData.ets // 素材数据
64| |---MaterialModels.ets // 素材模型
65|---pages
66| |---EditImage.ets // 图片编辑
67| |---InputTextDialog.ets // 输入框弹窗
68| |---MaterialEdit.ets // 素材编辑组件
69| |---ScalePhotoPage.ets // 图片缩放
70| |---ColorSpacePage.ets // 色域修改
71| |---PictureOptions.ets // 多图操作
72| |---UpdatePage.ets // 编辑删除界面
73|---util
74| |---CoordinatesUtil.ets // 转换坐标系
75| |---CopyObj.ets // 对象克隆
76| |---ImageUtil.ets // 图片宽高处理
77| |---PictureUtil.ets // 多图编解码操作帮助类
78| |---Logger.ets // 日志工具
79| |---MediaUtil.ts // 媒体帮助类
80| |---SvgUtil.ts // svg操作帮助类
81| |---FileUtil.ets // 多图、图片编解码操作帮助类
82```
83
84### 具体实现
85
86+ 图片选择功能在GetPictures中实现，源码参考[GetPictures.ets](entry%2Fsrc%2Fmain%2Fets%2Fpages%2FGetPictures.ets):
87 + 图片选择：首先使用[@ohos.file.photoAccessHelper](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-media-library-kit/js-apis-photoAccessHelper.md)拉起图库选择图片，然后将选择的图片用select数组保存路径，展示到页面便于选择，选择完跳转到首页，点击一张图片，进入到编辑删除界面。
88
89+ 图片编辑功能在EditImage中实现，源码参考[EditImage.ets](photomodify%2Fsrc%2Fmain%2Fets%2Fcomponents%2Fpages%2FEditImage.ets):
90 + 图片编辑：图片编辑权限需要使用[requestPermissionsFromUser](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-ability-kit/js-apis-abilityAccessCtrl.md#requestpermissionsfromuser9)
91 申请，源码参考[MainAbility.ets](entry/src/main/ets/MainAbility/MainAbility.ets)
92 ，首先根据选择图片获取到的uri打开图片文件，fileAsset.open选择‘rw'读写模式，然后使用image.createImageSource创建图片源实例，接下来使用createPixelMap创建PixelMap对象，便于处理图片，最后使用crop对图像进行裁剪处理，使用scale对图像进行缩放处理，rotate进行旋转处理。亮度调节使用effectKit.getHighestSaturationColor()
93 接口实现对图片的高亮调节。图片解码通过createPixelMap(DecodingOptions)，并根据DecodingOptions构造参数里面的设定值(0: auto;1: SDR;2 HDR)，对应创建不同的PixelMap对象。其中设置值为AUTO时，会根据图片本身结构来判断是否解码为HDR内容。添加文字/贴纸，编辑模式下，使用组件组合（Image、Shape、Text）进行交互完成素材大小和位置选择；编辑确认后，再使用OffscreenCanvasRenderingContext2D进行离屏绘制，保存为新的pixelMap。
94
95+ 图片编解码功能在Image中实现，源码参考[Image.cpp](photomodify/src/main/cpp/Image.cpp):
96
97 + 图片解码：调用OH_ImageSourceNative_CreateFromUri，OH_ImageSourceNative_CreateFromFd，
98 OH_ImageSourceNative_CreateFromData，OH_ImageSourceNative_CreateFromRawFile等接口，根据接收不同的参数调用不同的接口来创建ImageSource对象。
99 再通过OH_ImageSourceNative_CreatePixelmap接口将ImageSource转换为新的pixelMap。
100 + 图片编码：通过调用OH_ImagePackerNative_PackToFileFromPixelmap，OH_ImagePackerNative_PackToFileFromImageSource，
101 OH_ImagePackerNative_PackToDataFromPixelmap，OH_ImagePackerNative_PackToDataFromImageSource等接口，可以将ImageSource或pixelMap编码为file/data。
102
103+ JS多图解码、编码操作在PictureOptions中实现，源码参考[PictureOptions.ets](photomodify/src/main/ets/components/pages/PictureOptions.ets):
104
105 + 前置条件： 存放多图图片路径[uri](photomodify/src/main/resources/rawfile/HdrVivid.jpg)包括(JPEG、HEIF)，调用context.resourceManager.getRawFileContent(uri)、image.createImageSource(buffer)等接口创建ImageSource对象.
106
107 + 多图解码： 通过imageSource.createPicture(DecodingOptionsForPicture)接口并根据DecodingOptionsForPicture构造参数里面的设定值(1: GAINMAP)解码图片中对应的辅助图，并生成多图对象.
108
109 + 多图编码: 通过Image.createImagePacker()构建一个ImagePacker实例.其次，通过imagePacker.packToFile(ImageSource, fd, PackingOption)、imagePacker.packing(ImageSource, PackingOption)、imagePacker.packToFile(Picture, fd, PackingOption)、imagePacker.packing(Picture, PackingOption)可以将ImageSource或多图对象编码为buffer/图片文件。
110
111 + 多图显示： 调用Picture.getAuxiliaryPicture(AuxiliaryPictureType并根据AuxiliaryPictureType构造参数里面的设定值(1: GAINMAP))获取多图对象中的辅助图对象.再调用AuxiliaryPicture.readPixelsToBuffer()、image.createPixelMapSync()接口将辅助图对象转成pixelmap显示到屏幕上.
112
113+ Native多图解码、编码操作在Image中实现，源码参考[Image.cpp](photomodify/src/main/cpp/Image.cpp):
114
115 + 前置条件： 存放多图图片路径[uri](photomodify/src/main/resources/rawfile/HdrVivid.jpg)包括(JPEG、HEIF)，调用context.resourceManager.getRawFileContent接口创建ImageSource对象.
116
117 + 多图解码： 通过OH_DecodingOptionsForPicture_Create接口并根据OH_DecodingOptionsForPicture_SetDesiredAuxiliaryPictures构造参数里面的设定值(1: GAINMAP)解码图片中对应的辅助图，并生成多图对象.
118
119 + 多图编码： 通过OH_ImagePackerNative_Create构建一个ImagePacker实例，通过OH_PackingOptions_Create创建编码参数.其次，通过OH_ImagePackerNative_PackToDataFromPicture，OH_ImagePackerNative_PackToFileFromPicture，OH_ImagePackerNative_PackToDataFromImageSource，OH_ImagePackerNative_PackToFileFromImageSource可以将ImageSource或多图对象编码为buffer/图片文件。
120
121 + 多图显示： 调用OH_PictureNative_GetGainmapPixelmap获取多图对象中的GAINMAP辅助图对象.再调用AuxiliaryPicture.readPixelsToBuffer()、image.createPixelMapSync()接口将辅助图对象转成pixelmap显示到屏幕上.
122
123### 相关权限
124
125[ohos.permission.READ_IMAGEVIDEO](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/restricted-permissions.md#ohospermissionread_imagevideo)
126
127[ohos.permission.WRITE_IMAGEVIDEO](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/restricted-permissions.md#ohospermissionwrite_imagevideo)
128
129[ohos.permission.MEDIA_LOCATION](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-all-user.md#ohospermissionmedia_location)
130
131### 依赖
132
133不涉及。
134
135### 约束与限制
136
1371. 本示例仅支持标准系统上运行，支持设备：RK3568;
1382. 本示例为Stage模型，已适配API version 14版本SDK，SDK版本号(API Version 14 5.0.2.43),镜像版本号(5.0.2.43);
1393. 本示例需要使用DevEco Studio NEXT Release(Build Version: 5.0.3.900, built on October 8, 2024)版本才可编译运行;
140
141### 下载
142
143如需单独下载本工程，执行如下命令：
144
145```
146git init
147git config core.sparsecheckout true
148echo code/BasicFeature/Media/Image/ > .git/info/sparse-checkout
149git remote add origin https://gitee.com/openharmony/applications_app_samples.git
150git pull origin master
151```
152
