OpenHarmony图形图像如何实现图像编辑

OpenHarmony图形图像实现图像编辑

一 核心思路与流程

• 获取图片源：从应用资源、相册或文件系统中读取图片，得到ArrayBuffer或文件描述符 fd。
• 解码为 PixelMap：使用 image.createImageSource 创建图片源，再调用 createPixelMap 生成可编辑的 PixelMap（建议创建时开启 editable: true，便于后续像素级处理）。
• 编辑处理：基于 PixelMap 执行裁剪、旋转、缩放、翻转、透明度、亮度、饱和度等；像素级处理建议放入 Worker 线程，避免阻塞 UI。
• 渲染与回显：编辑完成后用 CanvasRenderingContext2D 绘制回显，或直接用 Image 组件展示。
• 编码与保存：将结果 PixelMap 编码为 PNG/JPEG 并写入应用缓存或相册目录，涉及媒体文件读写需声明权限。

二 环境准备与权限配置

• 开发环境：DevEco Studio 3.1+、API 9+、系统 3.2 Release+；真机或开发板（如 RK3568）调测更稳定。
• 权限声明（module.json5/配置文件）：
  • ohos.permission.READ_MEDIA
  • ohos.permission.WRITE_MEDIA
  • 如读取图片地理位置信息，补充 ohos.permission.MEDIA_LOCATION
• 典型目录结构（ArkTS）：pages 存放页面，utils 存放 DecodeUtil/EncodeUtil/AdjustUtil/OpacityUtil/CropUtil，workers 存放异步任务。

三 关键实现步骤与代码示例

• 1. 解码为 PixelMap（ArkTS）

import image from '@ohos.multimedia.image';
import fs from '@ohos.file.fs';
import { getContext } from '@ohos.app.ability.common';

async function getPixelMapFromResource(resName: string): Promise<image.PixelMap> {
  const ctx = getContext(this) as common.UIAbilityContext;
  const resMgr = ctx.resourceManager;
  const fileData = await resMgr.getMediaContent($r(`app.media.${resName}`));
  const buffer = fileData.buffer;

  const imageSource = image.createImageSource(buffer);
  return await imageSource.createPixelMap({ editable: true }); // 可编辑
}

• 2. 常见编辑操作（PixelMap 方法）

// 裁剪
await pixelMap.crop({ x: 0, y: 0, size: { width: 300, height: 300 } });

// 缩放
await pixelMap.scale(0.5, 0.5);

// 旋转（角度制）
await pixelMap.rotate(90);

// 翻转：水平 false、垂直 true
await pixelMap.flip(false, true);

// 透明度（0.0 ~ 1.0）
await pixelMap.opacity(0.8);

• 3. 像素级处理与异步（亮度/饱和度示例）

// workers/adjustBrightnessWork.ts
import image from '@ohos.multimedia.image';

export function adjustBrightness(pixelMap: image.PixelMap, brightness: number): image.PixelMap {
  // 读取像素、按 brightness 调整（示例略）
  // 返回新的 PixelMap
  return pixelMap;
}

• 4. 渲染与保存

// ArkTS UI 回显
Image(this.editedPixelMap).objectFit(ImageFit.Contain).width('100%').height('80%');

// 编码为 PNG 并保存
import { util } from '@ohos.util';
async function savePixelMap(pixelMap: image.PixelMap, fileName: string) {
  const ctx = getContext(this) as common.UIAbilityContext;
  const encoder = image.createImagePacker();
  const data = await encoder.packToData(pixelMap, { format: 'image/png', quality: 100 });
  const filePath = `${ctx.cacheDir}/${fileName}`;
  const file = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
  fs.writeSync(file.fd, data.buffer);
  fs.closeSync(file.fd);
}

• 5. 基于 Canvas 的绘制回显（JS/ETS 均可）

// 获取 Canvas 2D 上下文并绘制
const canvas = this.$element('canvasOne') as HTMLCanvasElement;
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(pixelMap, 0, 0, canvas.width, canvas.height);

以上流程与 API 在 ArkTS/JS 项目中均适用，裁剪、旋转、缩放、翻转、透明度等方法为 PixelMap 常用编辑接口；像素级调节建议放入 Worker 执行。

四 性能与体验优化

• 大图处理务必使用 Worker，避免主线程卡顿；编辑结果可先低分辨率预览，保存时再用高质量参数。
• 频繁编辑时复用同一 PixelMap 或采用**命令栈（Command Pattern）**记录操作，便于撤销/重做与节流刷新。
• 合理选择渲染路径：仅预览可用 Image 组件；需要叠加标注/选区时再用 Canvas 绘制。
• 保存格式与质量：无损优先 PNG；有损用 JPEG 并控制 quality；大图可先压缩再保存。
• 权限与路径：读写相册/缓存目录需声明权限；保存后如需相册可见，按系统规范写入媒体库并更新相册索引。