实战：HarmonyOS 中 HEIF 图像开发全流程（图处理篇）

紧接着上篇文章。我们继续HarmonyOS 中 HEIF 图像开发全流程。这篇主要记录如何进行图处理。

实战 ：HEIF 图像自定义处理（进阶场景）

这里还是说一下环境吧。

环境要求

• HarmonyOS 版本：需基于 HarmonyOS 5.0 及以上（HEIF 解码性能优化、硬件编码支持均从 5.0 开始）。
• 开发工具：DevEco Studio 5.0 及以上（确保 ArkUI 组件与 Image Kit API 兼容）。
• 测试设备：搭载 HarmonyOS 5.x 的真机或模拟器（部分硬件解码能力需真机支持）。
• 图像资源：准备 1-2 张 HEIF 格式图片（后缀通常为 .heif 或 .heic，可通过手机拍摄或在线工具转换获取），并放入项目的 main_pages/images 目录下（需在 module.json5 中配置资源路径）。

在项目中，我们若需对 HEIF 图像进行 旋转、裁剪、滤镜 等后处理，需先通过 Image Kit 将 HEIF 解码为 PixelMap（像素数据），处理完成后再传给 Image 组件渲染。

1. 场景需求

加载一张 HEIF 格式的人物照片，先将其顺时针旋转 90 度，再裁剪为 200x200 的正方形，最后显示在页面中。

2. 操作步骤

步骤 1：解码 HEIF 为 PixelMap

通过 image.createImageSource() 创建图像源，再调用 createPixelMapSync() 解码为 PixelMap，同时指定解码参数（如像素格式、是否可编辑）：

import image from '@ohos.multimedia.image';
import { Column, Image, Text, FlexAlign, WidthPercent, Button } from '@ohos/ui';

@Entry
@Component
struct HEIFProcessPage {
  // 定义变量存储 PixelMap（处理后的图像像素数据）
  private processedPixelMap: image.PixelMap | null = null;

  // 页面加载时执行解码与处理
  aboutToAppear() {
    this.decodeAndProcessHEIF();
  }

  // 核心方法：解码 HEIF 并进行旋转、裁剪处理
  async decodeAndProcessHEIF() {
    try {
      // 1. 创建 HEIF 图像源（从资源文件读取）
      const imageSource = image.createImageSource($r('app.image.person').uri);

      // 2. 配置解码选项：指定可编辑、像素格式（RGBA_8888 支持透明通道）
      const decodeOpts: image.DecodingOptions = {
        editable: true,                // 必须设为 true，否则无法后续处理
        desiredPixelFormat: image.PixelMapFormat.RGBA_8888,
        desiredSize: { width: 400, height: 400 }  // 预指定解码尺寸，减少内存占用
      };

      // 3. 解码为 PixelMap
      let pixelMap = await imageSource.createPixelMap(decodeOpts);

      // 4. 后处理 1：顺时针旋转 90 度
      pixelMap = await pixelMap.rotate(90);  // 支持 0/90/180/270 度

      // 5. 后处理 2：裁剪为 200x200 正方形（左上角坐标 (100,100)，宽高 200）
      const cropOpts: image.CropOptions = {
        x: 100,
        y: 100,
        width: 200,
        height: 200
      };
      pixelMap = await pixelMap.crop(cropOpts);

      // 6. 存储处理后的 PixelMap，用于页面渲染
      this.processedPixelMap = pixelMap;

      // 7. 释放原始图像源（避免内存泄漏）
      imageSource.release();
    } catch (err) {
      console.error('HEIF 解码/处理失败：', err);
    }
  }

  build() {
    Column({ space: 20, alignItems: FlexAlign.Center }) {
      Text('HEIF 图像自定义处理（旋转+裁剪）')
        .fontSize(24)
        .fontWeight(FontWeight.Bold);

      // 显示处理后的图像
      if (this.processedPixelMap) {
        Image(this.processedPixelMap)
          .width(200)
          .height(200)
          .borderRadius(8);
      } else {
        // 加载中提示
        Text('处理中...').fontSize(16);
      }
    }
    .padding(20)
    .width('100%')
    .height('100%');
  }
}

步骤 2：运行测试

1. 将 person.heic 图片放入资源目录，确保解码参数中的 desiredSize 不小于裁剪尺寸（避免裁剪区域超出图像范围）。
2. 运行应用，观察页面：加载完成后应显示 “旋转 90 度 + 裁剪后” 的正方形图像，无拉伸或变形。

3. 关键注意点

• editable 必须为 true：若需对 PixelMap 进行旋转、裁剪，解码时需将 editable 设为 true，否则会抛出 “不可编辑” 异常。
• 内存管理：解码后的 imageSource 与临时 pixelMap 需及时调用 release() 释放，避免内存泄漏。
• 尺寸适配：desiredSize 建议设为 “略大于最终显示尺寸”，既减少解码耗时，又避免后续处理时图像质量损失。