适用版本HarmonyOS NEXTAPI 12ArkTSStage ModelDevEco Studio 5.x前言在移动应用开发中图片编辑几乎是所有 App 的基础能力。例如微信头像裁剪小红书图片编辑美图秀秀滤镜抖音封面制作企业OA上传图片电商商品图片处理相册编辑几乎都会涉及图片裁剪Crop图片旋转Rotate图片缩放Scale图片镜像Flip图片水印Watermark图片压缩Compress图片保存SaveHarmonyOS NEXT 已经提供了完善的ImageSourcePixelMapDrawingImagePackerImageReceiverPhotoAccessHelper可以完成绝大多数图片编辑需求。本文将从零开始带大家完成一个企业级图片编辑器。最终效果包括✅ 图片选择✅ 图片预览✅ 双指缩放✅ 图片拖动✅ 任意角度旋转✅ 90°旋转✅ 图片裁剪✅ 圆形头像裁剪✅ 添加文字水印✅ 添加图片水印✅ 图片压缩✅ 保存到相册全部使用 HarmonyOS NEXT 原生 API 实现。目录全文约 2 万字共二十一个章节第一章 图片编辑整体架构 第二章 PixelMap编辑原理 第三章 ImageSource解析图片 第四章 获取PixelMap 第五章 Drawing绘图系统 第六章 Canvas绘制 第七章 Matrix矩阵变换 第八章 图片缩放 第九章 图片平移 第十章 图片旋转 第十一章 图片镜像 第十二章 自定义裁剪框 第十三章 图片裁剪算法 第十四章 圆形头像裁剪 第十五章 添加文字水印 第十六章 添加图片水印 第十七章 图片压缩 第十八章 保存PixelMap 第十九章 保存到系统相册 第二十章 企业级图片编辑器封装 第二十一章 完整项目源码第一章 图片编辑整体架构很多人认为图片编辑 修改图片。其实不是。真正的编辑器分成两种第一种 修改显示 第二种 修改像素例如用户旋转图片。真正发生的是PixelMap ↓ Canvas ↓ Matrix旋转 ↓ 重新绘制 ↓ 显示而不是直接修改图片文件所以图片编辑本质就是不断重新绘制 PixelMap。整个流程如下PhotoPicker ↓ ImageSource ↓ PixelMap ↓ Canvas ↓ Drawing ↓ ImagePacker ↓ JPEG/PNG ↓ 保存这是 HarmonyOS 官方推荐流程。图片编辑整体架构企业级项目一般都会这样分层UI层 ↓ 编辑控制器 ↓ Drawing ↓ PixelMap ↓ ImageSource ↓ 文件系统每层职责完全不同。第一层UI负责按钮 缩放 旋转 裁剪框 手势例如Rotate Crop Save Cancel所有按钮点击事件都发生在这里。第二层编辑控制器例如ImageEditor rotate() crop() scale() drawWatermark() compress()所有编辑逻辑全部集中。而不是页面里面写几千行代码。推荐封装class ImageEditor { rotate() crop() addText() addImage() save() }以后维护非常方便。第三层PixelMapPixelMap 是整个编辑器核心。所有操作都是PixelMap ↓ 重新绘制 ↓ 生成新的PixelMap例如旋转PixelMap ↓ Canvas.rotate() ↓ 新的PixelMap第四层DrawingDrawing 提供Canvas Brush Pen Path Paint Matrix所有编辑能力都来自这里。例如画水印Canvas.drawText() Canvas.drawImage() Canvas.drawRect() Canvas.drawCircle()第五层ImagePacker编辑完成以后不能直接保存 PixelMap。因为PixelMap 是内存对象。需要PixelMap ↓ ImagePacker ↓ JPEG ↓ PNG ↓ FileImagePacker 负责编码 压缩 输出图片编辑完整生命周期整个编辑器生命周期如下选择图片 ↓ ImageSource ↓ PixelMap ↓ 显示 ↓ 缩放 ↓ 旋转 ↓ 裁剪 ↓ 加水印 ↓ 压缩 ↓ ImagePacker ↓ 保存文件 ↓ 保存相册这也是微信、美团、小红书等应用普遍采用的图片处理流程。企业项目架构建议建议将图片编辑模块拆分如下entry │ ├── pages │ ImageEditorPage.ets │ ├── editor │ ImageEditor.ets │ CropController.ets │ RotateController.ets │ WatermarkController.ets │ CompressController.ets │ ├── drawing │ CanvasHelper.ets │ MatrixHelper.ets │ ├── utils │ ImageUtils.ets │ └── model EditState.ets这样做的优点包括高内聚、低耦合每个模块职责清晰。易于扩展后续增加滤镜、马赛克、涂鸦等功能无需改动核心架构。便于测试裁剪、旋转、水印等能力可以单独编写单元测试。适合企业级项目支持多人协同开发和长期维护。
