当前位置：首页 > news >正文

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

news 2025/9/10 6:13:07

紧接着上篇文章。我们继续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. 解码为 PixelMaplet 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：运行测试

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

3. 关键注意点

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