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 13### 效果预览 14 15| 编辑删除 | 图片调整 | 图片标记 | 16|-------------------------------------------------|-----------------------------------------------------|-------------------------------------------------| 17|  |  |  | 18 19| 图片裁剪 | 图片缩放 | 图片旋转 | 20|-------------------------------------------------|---------------------------------------------------|-----------------------------------------------------| 21|  |  |  | 22 23| 图片亮度调节 | 图片添加贴纸 | 图片添加文字 | 图片色域调节 | 24|-----------------------------------------------------|-------------------------------------------------------|-------------------------------------------------|-----------------------------------------------------| 25|  |  |  |  | 26 27 28使用说明： 29 301. 发表评价页面点击添加图片/照片，页面跳转到图片选择页面； 312. 进入图片选择页面后，选择需要显示的图片； 323. 选中图片后，页面会跳转到发表评价页面，点击图片跳转到图片编辑删除页面，点击编辑进入到编辑功能页； 334. 调整菜单有裁剪、缩放、旋转、调色功能； 345. 标记菜单有添加文字、添加贴纸功能； 356. 编辑完成后，点击撤回按钮图片会还原到上一个编辑状态； 367. 图片编辑完成后，点击保存，页面会跳转到发表评价页面，显示相关照片； 378. 点击返回按钮，退出应用。 38 39### 工程目录 40 41``` 42entry/src/main/ets/ 43|---pages 44| |---EditImages.ets // 图片编辑 45| |---GetPictrues.ets // 图片选择 46| |---Index.ets // 首页 47| |---UpadatePages.ets // 编辑删除界面 48photomodify/src/main/ets/components 49|---featrue 50| |---ComputeFeature.ets // 计算功能 51| |---PixelMapQueue.ets // PixelMap队列 52|---model 53| |---AdjustData.ets // 功能数据 54| |---AdjustModels.ets // 功能模型 55| |---MaterialData.ets // 素材数据 56| |---MaterialModels.ets // 素材模型 57|---pages 58| |---EditImage.ets // 图片编辑 59| |---InputTextDialog.ets // 输入框弹窗 60| |---MaterialEdit.ets // 素材编辑组件 61| |---ScalePhotoPage.ets // 图片缩放 62| |---ColorSpacePage.ets // 色域修改 63| |---UpdatePage.ets // 编辑删除界面 64|---util 65| |---CoordinatesUtil.ets // 转换坐标系 66| |---CopyObj.ets // 对象克隆 67| |---ImageUtil.ets // 图片宽高处理 68| |---Logger.ets // 日志工具 69| |---MediaUtil.ts // 媒体帮助类 70| |---SvgUtil.ts // svg操作帮助类 71``` 72 73### 具体实现 74 75+ 图片选择功能在GetPictures中实现，源码参考[GetPictures.ets](entry%2Fsrc%2Fmain%2Fets%2Fpages%2FGetPictures.ets): 76 + 图片选择：首先使用startAbilityForResult()启动系统图库应用，然后将选择的图片用select数组保存路径，展示到页面便于选择，选择完跳转到首页，点击一张图片，进入到编辑删除界面。 77+ 图片编辑功能在EditImage中实现，源码参考[EditImage.ets](photomodify%2Fsrc%2Fmain%2Fets%2Fcomponents%2Fpages%2FEditImage.ets): 78 + 图片编辑：图片编辑权限需要使用[requestPermissionsFromUser](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-ability-kit/js-apis-abilityAccessCtrl.md#requestpermissionsfromuser9) 79 申请，源码参考[MainAbility.ts](entry/src/main/ets/MainAbility/MainAbility.ts) 80 ，首先根据选择图片获取到的uri打开图片文件，fileAsset.open选择‘rw'读写模式，然后使用image.createImageSource创建图片源实例，接下来使用createPixelMap创建PixelMap对象，便于处理图片，最后使用crop对图像进行裁剪处理，使用scale对图像进行缩放处理，rotate进行旋转处理。亮度调节使用effectKit.getHighestSaturationColor() 81 接口实现对图片的高亮调节。添加文字/贴纸，编辑模式下，使用组件组合（Image、Shape、Text）进行交互完成素材大小和位置选择；编辑确认后，再使用OffscreenCanvasRenderingContext2D进行离屏绘制，保存为新的pixelMap。 82 83### 相关权限 84 85[ohos.permission.READ_MEDIA](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissionread_media) 86 87[ohos.permission.WRITE_MEDIA](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissionwrite_media) 88 89[ohos.permission.MEDIA_LOCATION](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissionmedia_location) 90 91### 依赖 92 93不涉及。 94 95### 约束与限制 96 971. 本示例仅支持标准系统上运行，支持设备：RK3568; 982. 本示例为Stage模型，已适配API version 11版本SDK，SDK版本号(API Version 11 4.1.3.5),镜像版本号(4.1.3.5); 993. 本示例需要使用DevEco Studio 版本号(3.1.0.501)及以上版本才可编译运行。 100 101### 下载 102 103如需单独下载本工程，执行如下命令： 104 105``` 106git init 107git config core.sparsecheckout true 108echo code/BasicFeature/Media/Image/ > .git/info/sparse-checkout 109git remote add origin https://gitee.com/openharmony/applications_app_samples.git 110git pull origin master 111``` 112
