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

鸿蒙Next图片开发指南：从解码、处理到接收的完整实践

news 2025/10/25 10:12:23

在鸿蒙应用开发中，图片作为最核心的视觉元素之一，其处理流程的性能和体验至关重要。鸿蒙Next提供了一套强大而统一的图片框架（Image Framework），为开发者提供了从加载到显示，从编辑到保存的全链路能力。本文将深入探讨图片开发的四个关键环节：解码、编码、编辑处理和接收，并通过代码示例展示如何高效地完成相关任务。

一、图片解码：高效的图片加载与显示

图片解码是将压缩的图片数据（如JPEG、PNG）转换为系统可识别和渲染的像素数据（PixelMap）的过程。鸿蒙Next的@ohos.multimedia.image模块让这个过程变得简单且高性能。

核心能力：

多格式支持：全面支持JPEG、PNG、WEBP、GIF、BMP、HEIF等主流格式。
渐进式与动图解码：支持JPEG渐进式加载和GIF动图的流畅播放。
精准采样与缩放：可在解码时直接指定采样率或目标尺寸，减少内存占用，这是避免OOM（内存溢出）的关键技巧。

实战代码：从资源文件解码并显示

typescript

import image from '@ohos.multimedia.image';
import { BusinessError } from '@ohos.base';@Entry
@Component
struct ImageDecodeSample {// 用于在UI中展示的PixelMap对象@State pixelMap: image.PixelMap | undefined = undefined;aboutToAppear() {// 1. 创建ImageSource对象，来源可以是资源、文件、ArrayBuffer等const imageSourceApi = image.createImageSource($r('app.media.example.jpg').id);// 2. 设置解码参数：希望输出的尺寸let decodingOptions: image.DecodingOptions = {desiredSize: { width: 200, height: 200 } // 直接解码为200x200的图，节省内存};// 3. 异步解码，获取PixelMapimageSourceApi.createPixelMap(decodingOptions).then((pixelMap: image.PixelMap) => {this.pixelMap = pixelMap;console.log('图片解码成功');}).catch((error: BusinessError) => {console.error(`解码失败，错误码：${error.code}, 信息：${error.message}`);});}build() {Column() {if (this.pixelMap) {// 使用PixelMap给Image组件赋值Image(this.pixelMap).width(200).height(200)} else {LoadingProgress() // 解码未完成时显示加载动画}}.width('100%').height('100%')}
}

二、图片编码：保存与分享

图片编码是将处理后的PixelMap对象压缩为指定格式文件的过程，常用于保存图片到相册或分享给其他应用。

核心能力：

格式转换：支持将PixelMap编码为JPEG、PNG、WEBP等格式。
质量参数可控：对于JPEG等有损格式，可以灵活设置压缩质量。

实战代码：将PixelMap编码为JPEG并保存

typescript

import image from '@ohos.multimedia.image';
import fileIo from '@ohos.file.fs'; // 文件系统模块async function encodeAndSaveImage(pixelMap: image.PixelMap) {// 1. 创建ImagePacker对象，用于编码let imagePackerApi = image.createImagePacker();// 2. 设置编码选项：格式和质量let packOptions: image.PackingOptions = {format: "image/jpeg",quality: 85 // 质量范围1-100，值越大质量越好文件越大};try {// 3. 进行编码，获取ArrayBuffer数据let data: ArrayBuffer = await imagePackerApi.packing(pixelMap, packOptions);// 4. 将ArrayBuffer数据写入文件let filePath = `/path/to/your/saved_image.jpg`; // 替换为实际可写的路径let file = await fileIo.open(filePath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);await fileIo.write(file.fd, data);await fileIo.close(file.fd);console.log('图片保存成功：' + filePath);} catch (error) {const err: BusinessError = error as BusinessError;console.error(`编码或保存失败：${err.code}, ${err.message}`);}
}

三、图片编辑和处理：释放创造力

这是最富有趣味和挑战性的环节，鸿蒙Next通过Image Kit (@ohos.multimedia.imageKit) 提供了丰富的编辑能力。

核心能力：

基础调整：旋转、裁剪、缩放。
滤镜与调色：应用LUT滤镜，调整亮度、对比度、饱和度等。
AI增强：智能抠图、人像美颜、图像超分等（部分为高级API）。

实战代码：应用滤镜并裁剪

typescript

import imageKit from '@ohos.multimedia.imageKit';async function editImage(sourcePixelMap: image.PixelMap): Promise<image.PixelMap> {try {// 1. 应用滤镜let filterOptions: imageKit.FilterOptions = {filter: imageKit.FilterType.FILTER_SNOW // 例如，使用“雪”滤镜};let filteredPixelMap: image.PixelMap = await imageKit.filter(sourcePixelMap, filterOptions);// 2. 进行裁剪let region: image.Region = { // 定义裁剪区域x: 50,y: 50,size: {height: 300,width: 300}};let croppedPixelMap: image.PixelMap = await imageKit.crop(filteredPixelMap, region);return croppedPixelMap;} catch (error) {const err: BusinessError = error as BusinessError;console.error(`图片编辑失败：${err.code}, ${err.message}`);// 失败则返回原图return sourcePixelMap;}
}

四、图片接收：处理外部传入的图片

当应用需要接收来自其他应用（如相册、文件管理器、分享菜单）的图片时，需要使用Want和File相关能力。

核心能力：

统一数据管理：通过ohos.app.ability.wantConstant定义的行为（Action）来接收数据。
安全的文件访问：通过Uri安全地访问其他应用提供的图片文件。

配置与实战：使应用能够接收图片

1. 在module.json5中配置Ability的skills，使其响应分享动作。

json

"skills": [{"entities": ["entity.system.home"],"actions": ["ohos.want.action.selectMedia", // 选择媒体文件的行为"ohos.want.action.sendData"     // 发送数据的行为（如分享）],"uris": [{"type": "image/*" // 指定可接收的文件类型为所有图片}]}
]

2. 在EntryAbility中接收并处理图片数据。

typescript

import AbilityConstant from '@ohos.app.ability.AbilityConstant';
import Want from '@ohos.app.ability.Want';export default class EntryAbility extends UIAbility {onWindowStageCreate(windowStage: window.WindowStage) {// ... 其他初始化代码}// 当Ability被创建时，通过want参数接收数据onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {// 判断want中是否包含图片Uriif (want.uri && want.uri.length > 0) {let receivedImageUri = want.uri;console.log(`接收到图片URI: ${receivedImageUri}`);// 将URI传递给Page，由Page进行解码和显示AppStorage.setOrCreate<string>('receivedImageUri', receivedImageUri);}}
}

3. 在Page中根据Uri解码图片。

typescript

// 在Page的aboutToAppear或自定义函数中
let receivedUri: string = AppStorage.get<string>('receivedImageUri');
if (receivedUri) {// 使用Uri创建ImageSourceconst imageSourceApi = image.createImageSource(receivedUri);imageSourceApi.createPixelMap().then((pixelMap: image.PixelMap) => {// 获取到PixelMap，可以显示或编辑this.receivedPixelMap = pixelMap;});
}