【知识汇总】PixelMap 和 ArrayBuffer 详解

特性	说明
本质	一块固定长度的内存空间
用途	存储任何类型的二进制数据（图片、文件、网络数据等）
不可直接操作	需要通过 `TypedArray`（如 `Uint8Array`）或 `DataView` 来读写
典型来源	网络请求响应、文件读取、Blob 转换

示例

复制代码

// 创建一个 10 字节的 ArrayBuffer
const buffer = new ArrayBuffer(10);
console.log(buffer.byteLength); // 输出: 10

// 通过 Uint8Array 读写数据
const uint8Array = new Uint8Array(buffer);
uint8Array[0] = 255;  // 写入第一个字节
console.log(uint8Array[0]); // 输出: 255

在图片加载中的角色

复制代码

// 网络请求返回的图片原始数据（JPEG/PNG 格式的二进制数据）
const arrayBuffer = response.body as ArrayBuffer;  // 例如: 一张 JPEG 图片的原始字节

🖼️ PixelMap

什么是 PixelMap？

PixelMap 是鸿蒙系统中像素图 的表示，是可以被 UI 直接渲染的图像数据。

特点

特性	说明
本质	解码后的像素数据（RGBA 格式）
用途	直接在 `Image` 组件中显示
特点	已解码，可立即渲染
来源	从 `ArrayBuffer` 解码得到

示例

复制代码

import image from '@ohos.multimedia.image';

// 将 ArrayBuffer 转换为 PixelMap
const arrayBuffer: ArrayBuffer = ...; // 原始图片数据
const imageSource = image.createImageSource(arrayBuffer);
const pixelMap = await imageSource.createPixelMap();

// 在 Image 组件中使用
Image(pixelMap)
  .width(100)
  .height(100)

🔄 两者的关系与转换

关系图

复制代码

网络请求
   ↓
ArrayBuffer (原始二进制数据，如 JPEG 文件)
   ↓ image.createImageSource() + createPixelMap()
PixelMap (解码后的像素数据，可渲染)
   ↓
Image 组件显示

完整转换流程

复制代码

import image from '@ohos.multimedia.image';

// 1. 获取原始图片数据 (ArrayBuffer)
const arrayBuffer: ArrayBuffer = await downloadImage(url);

// 2. 创建图片源 (ImageSource)
const imageSource = image.createImageSource(arrayBuffer);

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

// 4. 在 UI 中显示
Image(pixelMap)
  .width(100)
  .height(100)

📊 详细对比

维度	ArrayBuffer	PixelMap
数据状态	编码状态（JPEG/PNG 压缩格式）	解码状态（RGBA 像素数据）
大小	较小（压缩后）	较大（解压后，宽×高×4 字节）
是否可渲染	❌ 不能直接渲染	✅ 可直接渲染
主要用途	网络传输、文件存储	UI 显示、图像处理
创建方式	`new ArrayBuffer(size)`	`imageSource.createPixelMap()`
内存占用	相对较小	相对较大
操作方式	通过 TypedArray	通过 PixelMap API

💡 实际应用场景

场景一：网络图片加载

复制代码

// 1. 网络请求返回 ArrayBuffer
const arrayBuffer = await downloadImage(url);

// 2. 转换为 PixelMap
const pixelMap = await arrayBufferToPixelMap(arrayBuffer);

// 3. 显示
Image(pixelMap)

场景二：图片处理（裁剪、旋转）

复制代码

// 已有 PixelMap，可以进行图像处理
const pixelMap: PixelMap = ...;

// 获取图片信息
const imageInfo = await pixelMap.getImageInfo();
console.log(`尺寸: ${imageInfo.size.width} x ${imageInfo.size.height}`);

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

场景三：保存图片到本地

复制代码

import fileio from '@ohos.fileio';

// 将 PixelMap 编码为 ArrayBuffer（如 JPEG）
const packOpts: image.PackingOption = {
  format: 'image/jpeg',
  quality: 90
};
const imagePacker = image.createImagePacker();
const arrayBuffer = await imagePacker.pack(pixelMap, packOpts);

// 保存到文件
const file = fileio.openSync('/path/to/save.jpg', 
  fileio.OpenMode.CREATE | fileio.OpenMode.WRITE_ONLY);
fileio.writeSync(file.fd, arrayBuffer);
fileio.closeSync(file.fd);

🔧 常用 API 速查

ArrayBuffer 相关

API	说明
`new ArrayBuffer(size)`	创建指定大小的缓冲区
`Uint8Array(buffer)`	创建 TypedArray 视图
`arrayBuffer.byteLength`	获取缓冲区大小（字节）
`response.body as ArrayBuffer`	rcp 响应中获取 ArrayBuffer

PixelMap 相关

API	说明
`image.createImageSource(arrayBuffer)`	从 ArrayBuffer 创建图片源
`imageSource.createPixelMap()`	从图片源创建 PixelMap
`imageSource.createPixelMap(options)`	指定尺寸创建 PixelMap
`pixelMap.getImageInfo()`	获取图片信息（宽、高等）
`pixelMap.readPixelsToBuffer()`	读取像素数据到 ArrayBuffer
`pixelMap.writePixelsFromBuffer()`	从 ArrayBuffer 写入像素数据

📌 简单理解

把图片想象成一封信：

概念	类比	说明
ArrayBuffer	信封里的信纸（折叠、压缩）	原始数据，需要解码才能阅读
PixelMap	展开的信纸（展开、可读）	解码后的数据，可直接查看
Image 组件	你的眼睛	只能看 PixelMap，不能直接看 ArrayBuffer

复制代码

// ArrayBuffer → PixelMap 的过程就是"展开信纸"
const arrayBuffer = await fetch(url);  // 收到折叠的信纸
const pixelMap = await decode(arrayBuffer); // 展开信纸
Image(pixelMap)  // 阅读信纸内容

✅ 总结

类型	一句话概括	何时使用
ArrayBuffer	原始二进制数据（压缩的图片）	网络传输、文件存储
PixelMap	可渲染的像素数据（解压的图片）	UI 显示、图像处理

在你的头像加载代码中：

response.body 返回的是 ArrayBuffer（原始图片数据）
通过 image.createImageSource() + createPixelMap() 转换为 PixelMap
最终 Image(this.pixelMap) 显示在屏幕上