HarmonyOS开发：图片内存优化与Bitmap管理

📌 核心要点：掌握鸿蒙图片内存占用计算、PixelMap生命周期管理、图片采样缩放与分块加载等核心技术，彻底解决图片密集型应用的内存瓶颈问题。

一、背景与动机

如果你的鸿蒙应用是一个图片密集型应用——比如电商App的商品列表、社交App的图片流、新闻App的图文混排——那么图片内存优化就是你绕不开的一道坎。

为什么图片内存优化如此重要？让我们算一笔账：一张1080×1920像素的ARGB_8888图片，占用的内存是 1080 × 1920 × 4 = 8,294,400字节 ≈ 7.9MB。一个包含20张图片的列表，光图片数据就要占用约158MB内存！这还没算上应用本身和其他数据的内存占用。在2GB内存的低端设备上，这几乎是不可承受的。

更可怕的是，很多开发者在处理图片时犯了一些"常识性错误"：加载了远超显示尺寸的原图、没有及时释放不再使用的PixelMap、在列表滚动中频繁创建和销毁图片对象……这些错误叠加在一起，就是OOM崩溃的温床。

鸿蒙系统提供了PixelMap作为图片像素数据的核心载体，它的内存分配在Native层，不受ArkTS堆内存管理。这意味着GC无法自动回收PixelMap的内存——你必须手动调用release()方法。这个设计虽然给了开发者更精细的控制能力，但也意味着更大的责任。

本文将从图片内存占用计算开始，逐步深入到PixelMap生命周期管理、图片采样与缩放、图片复用与缓存、大图分块加载等核心技术，最后给出一个完整的图片内存优化实战方案。

二、核心原理

2.1 图片内存占用计算

图片内存占用的计算公式非常简单：

内存占用 = 宽 × 高 × 每像素字节数

不同像素格式的每像素字节数：

关键洞察：一张图片的内存占用与文件大小无关，只与像素尺寸和像素格式有关。一张100KB的PNG文件，如果解码后是1080×1920的RGBA_8888格式，仍然占用7.9MB内存。

2.2 图片内存管理全流程

flowchart TD
    A[图片源文件] --> B[解码选项配置]
    B --> C{是否需要采样?}
    C -->|是| D[设置采样率 sampleSize]
    C -->|否| E[原始尺寸解码]
    D --> F[解码为PixelMap]
    E --> F
    F --> G{是否需要缩放?}
    G -->|是| H[scale缩放到目标尺寸]
    G -->|否| I[直接使用]
    H --> I
    I --> J[显示/处理]
    J --> K{是否不再使用?}
    K -->|否| J
    K -->|是| L[调用release释放]
    L --> M[Native内存回收]

    classDef processStyle fill:#3498DB,stroke:#2980B9,color:#fff,stroke-width:2px
    classDef decisionStyle fill:#FDCB6E,stroke:#F39C12,color:#333,stroke-width:2px
    classDef releaseStyle fill:#E74C3C,stroke:#C0392B,color:#fff,stroke-width:2px
    classDef endStyle fill:#2ECC71,stroke:#27AE60,color:#fff,stroke-width:2px

    class A,B,F,G,I,J processStyle
    class C,D,E,K decisionStyle
    class L releaseStyle
    class M endStyle

2.3 图片采样与缩放的区别

很多开发者混淆了"采样"和"缩放"这两个概念，但它们的内存影响完全不同：

举例：一张2000×2000的图片，显示在500×500的控件上：

• 采样方式：设置sampleSize=4，解码为500×500，内存 = 500×500×4 = 1MB ✅
• 缩放方式：先解码为2000×2000（16MB），再缩放显示为500×500，内存仍为16MB ❌

这就是为什么采样比缩放更节省内存——采样是在解码阶段就减少了像素数量，而缩放只是改变了显示大小，内存占用不变。

2.4 大图分块加载原理

对于超大图片（如地图、长截图、全景图），一次性加载整张图片会导致内存暴涨。分块加载（Tiling）的思路是：只加载当前可视区域的图片块，随着滚动动态加载新的块，同时释放不可见的块。

flowchart LR
    subgraph 大图["🖼️ 超大图片 (10000×8000)"]
        direction TB
        T1[块1-1] --- T2[块1-2] --- T3[块1-3]
        T4[块2-1] --- T5[块2-2] --- T6[块2-3]
        T7[块3-1] --- T8[块3-2] --- T9[块3-3]
    end

    subgraph 视口["📱 可视区域"]
        direction TB
        V1[块2-1] --- V2[块2-2]
        V4[块3-1] --- V5[块3-2]
    end

    大图 -->|只加载可见块| 视口

    classDef tileStyle fill:#BDC3C7,stroke:#95A5A6,color:#333,stroke-width:1px
    classDef visibleStyle fill:#3498DB,stroke:#2980B9,color:#fff,stroke-width:2px

    class T1,T2,T3,T4,T5,T6,T7,T8,T9 tileStyle
    class V1,V2,V4,V5 visibleStyle

三、代码实战

3.1 基础示例：图片内存计算与采样解码

// 图片内存计算与采样解码工具
class ImageMemoryCalculator {
  // 计算图片内存占用（字节）
  static calculateMemoryBytes(width: number, height: number, bytesPerPixel: number = 4): number {
    return width * height * bytesPerPixel
  }

  // 格式化内存大小
  static formatMemorySize(bytes: number): string {
    if (bytes < 1024) return `${bytes} B`
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
    return `${(bytes / 1024 / 1024).toFixed(2)} MB`
  }

  // 计算合适的采样率 - 根据目标尺寸和原始尺寸
  static calculateSampleSize(srcWidth: number, srcHeight: number, targetWidth: number, targetHeight: number): number {
    let sampleSize = 1
    // 采样率必须是2的幂次（1, 2, 4, 8, 16...）
    while (srcWidth / (sampleSize * 2) >= targetWidth &&
           srcHeight / (sampleSize * 2) >= targetHeight) {
      sampleSize *= 2
    }
    return sampleSize
  }

  // 打印图片内存分析报告
  static printAnalysis(srcWidth: number, srcHeight: number, targetWidth: number, targetHeight: number): string {
    const originalMemory = this.calculateMemoryBytes(srcWidth, srcHeight)
    const sampleSize = this.calculateSampleSize(srcWidth, srcHeight, targetWidth, targetHeight)
    const sampledWidth = Math.floor(srcWidth / sampleSize)
    const sampledHeight = Math.floor(srcHeight / sampleSize)
    const sampledMemory = this.calculateMemoryBytes(sampledWidth, sampledHeight)
    const savedRatio = ((1 - sampledMemory / originalMemory) * 100).toFixed(1)

    let report = '=== 图片内存分析 ===\n'
    report += `原始尺寸: ${srcWidth}×${srcHeight}\n`
    report += `目标尺寸: ${targetWidth}×${targetHeight}\n`
    report += `原始内存: ${this.formatMemorySize(originalMemory)}\n`
    report += `推荐采样率: ${sampleSize}\n`
    report += `采样后尺寸: ${sampledWidth}×${sampledHeight}\n`
    report += `采样后内存: ${this.formatMemorySize(sampledMemory)}\n`
    report += `节省比例: ${savedRatio}%\n`

    return report
  }
}

// 采样解码工具
class SampledImageDecoder {
  // 带采样的图片解码
  static async decodeWithSampling(
    context: Context,
    imagePath: string,
    targetWidth: number,
    targetHeight: number
  ): Promise<image.PixelMap | null> {
    try {
      // 第一步：只读取图片尺寸，不解码像素数据
      const imageSource = image.createImageSource(context.resourceManager.getRawFileContentSync(imagePath).buffer)
      const imageInfo = await imageSource.getImageInfo()
      const srcWidth = imageInfo.size.width
      const srcHeight = imageInfo.size.height

      // 第二步：计算采样率
      const sampleSize = ImageMemoryCalculator.calculateSampleSize(
        srcWidth, srcHeight, targetWidth, targetHeight
      )

      // 第三步：使用采样率解码
      const decodingOptions: image.DecodingOptions = {
        sampleSize: sampleSize,
        editable: false,
        desiredSize: { width: targetWidth, height: targetHeight },
        desiredPixelFormat: image.PixelFormat.RGBA_8888
      }

      const pixelMap = await imageSource.createPixelMap(decodingOptions)

      // 打印内存对比
      console.info(ImageMemoryCalculator.printAnalysis(srcWidth, srcHeight, targetWidth, targetHeight))

      return pixelMap
    } catch (e) {
      console.error('[ImageDecoder] 图片解码失败', e)
      return null
    }
  }
}

3.2 进阶示例：图片复用与LRU缓存

图片缓存是图片内存优化的核心策略。下面实现一个基于LRU（Least Recently Used）算法的图片缓存，支持内存缓存和PixelMap复用：

// LRU图片缓存 - 管理PixelMap的缓存与复用
class ImageLRUCache {
  private cache: Map<string, CacheEntry> = new Map()  // 缓存存储
  private maxSize: number                               // 最大缓存数量
  private maxMemoryBytes: number                        // 最大缓存内存（字节）
  private currentMemoryBytes: number = 0                // 当前缓存内存
  private accessOrder: string[] = []                    // 访问顺序（用于LRU淘汰）

  constructor(maxSize: number = 50, maxMemoryMB: number = 100) {
    this.maxSize = maxSize
    this.maxMemoryBytes = maxMemoryMB * 1024 * 1024
  }

  // 获取缓存的图片
  get(key: string): image.PixelMap | null {
    const entry = this.cache.get(key)
    if (!entry) return null

    // 更新访问顺序（移到末尾表示最近使用）
    const index = this.accessOrder.indexOf(key)
    if (index !== -1) {
      this.accessOrder.splice(index, 1)
    }
    this.accessOrder.push(key)

    return entry.pixelMap
  }

  // 存入缓存
  put(key: string, pixelMap: image.PixelMap, width: number, height: number): void {
    // 如果已存在，先移除旧的
    if (this.cache.has(key)) {
      this.remove(key)
    }

    // 计算内存占用
    const memoryBytes = width * height * 4  // RGBA_8888格式

    // 检查是否需要淘汰
    while ((this.cache.size >= this.maxSize || this.currentMemoryBytes + memoryBytes > this.maxMemoryBytes)
           && this.accessOrder.length > 0) {
      // 淘汰最久未使用的
      const oldestKey = this.accessOrder.shift()!
      this.remove(oldestKey)
    }

    // 存入缓存
    const entry: CacheEntry = {
      pixelMap,
      width,
      height,
      memoryBytes,
      lastAccessTime: Date.now()
    }
    this.cache.set(key, entry)
    this.accessOrder.push(key)
    this.currentMemoryBytes += memoryBytes
  }

  // 移除缓存项
  remove(key: string): boolean {
    const entry = this.cache.get(key)
    if (!entry) return false

    // 释放PixelMap的Native内存
    entry.pixelMap.release()
    this.currentMemoryBytes -= entry.memoryBytes
    this.cache.delete(key)

    const index = this.accessOrder.indexOf(key)
    if (index !== -1) {
      this.accessOrder.splice(index, 1)
    }

    return true
  }

  // 清空所有缓存
  clear(): void {
    this.cache.forEach(entry => {
      entry.pixelMap.release()  // 释放所有PixelMap
    })
    this.cache.clear()
    this.accessOrder = []
    this.currentMemoryBytes = 0
  }

  // 获取缓存状态
  getStatus(): CacheStatus {
    return {
      count: this.cache.size,
      maxSize: this.maxSize,
      memoryMB: (this.currentMemoryBytes / 1024 / 1024).toFixed(2),
      maxMemoryMB: (this.maxMemoryBytes / 1024 / 1024).toFixed(2),
      hitRate: this.hitCount > 0 ? (this.hitCount / (this.hitCount + this.missCount) * 100).toFixed(1) + '%' : 'N/A'
    }
  }

  private hitCount: number = 0
  private missCount: number = 0

  // 带统计的获取
  getWithStats(key: string): image.PixelMap | null {
    const result = this.get(key)
    if (result) {
      this.hitCount++
    } else {
      this.missCount++
    }
    return result
  }

  // 内存压力回调 - 清理部分缓存
  onMemoryPressure(level: 'low' | 'medium' | 'high'): void {
    switch (level) {
      case 'low':
        // 低压力：清理一半缓存
        this.evictHalf()
        break
      case 'medium':
        // 中等压力：清理大部分缓存
        this.evictToQuarter()
        break
      case 'high':
        // 高压力：清空所有缓存
        this.clear()
        break
    }
  }

  // 淘汰一半缓存
  private evictHalf(): void {
    const evictCount = Math.floor(this.accessOrder.length / 2)
    for (let i = 0; i < evictCount; i++) {
      const key = this.accessOrder.shift()!
      this.remove(key)
    }
  }

  // 淘汰到1/4
  private evictToQuarter(): void {
    const evictCount = Math.floor(this.accessOrder.length * 3 / 4)
    for (let i = 0; i < evictCount; i++) {
      const key = this.accessOrder.shift()!
      this.remove(key)
    }
  }
}

interface CacheEntry {
  pixelMap: image.PixelMap
  width: number
  height: number
  memoryBytes: number
  lastAccessTime: number
}

interface CacheStatus {
  count: number
  maxSize: number
  memoryMB: string
  maxMemoryMB: string
  hitRate: string
}

// ===== 图片加载管理器 - 整合采样解码与缓存 =====
class ImageLoadManager {
  private static instance: ImageLoadManager | null = null
  private cache: ImageLRUCache
  private loadingTasks: Map<string, Promise<image.PixelMap | null>> = new Map()  // 防止重复加载

  private constructor() {
    this.cache = new ImageLRUCache(50, 80)  // 最多50张，80MB
  }

  static getInstance(): ImageLoadManager {
    if (!ImageLoadManager.instance) {
      ImageLoadManager.instance = new ImageLoadManager()
    }
    return ImageLoadManager.instance
  }

  // 加载图片 - 带缓存和防重复
  async loadImage(
    context: Context,
    imagePath: string,
    targetWidth: number,
    targetHeight: number
  ): Promise<image.PixelMap | null> {
    const cacheKey = `${imagePath}_${targetWidth}x${targetHeight}`

    // 检查缓存
    const cached = this.cache.getWithStats(cacheKey)
    if (cached) {
      return cached
    }

    // 检查是否正在加载
    const existingTask = this.loadingTasks.get(cacheKey)
    if (existingTask) {
      return existingTask
    }

    // 创建加载任务
    const loadTask = SampledImageDecoder.decodeWithSampling(
      context, imagePath, targetWidth, targetHeight
    )
    this.loadingTasks.set(cacheKey, loadTask)

    try {
      const pixelMap = await loadTask
      if (pixelMap) {
        // 存入缓存
        this.cache.put(cacheKey, pixelMap, targetWidth, targetHeight)
      }
      return pixelMap
    } finally {
      this.loadingTasks.delete(cacheKey)
    }
  }

  // 内存压力回调
  onMemoryPressure(level: 'low' | 'medium' | 'high'): void {
    this.cache.onMemoryPressure(level)
  }

  // 获取缓存状态
  getCacheStatus(): CacheStatus {
    return this.cache.getStatus()
  }

  // 清空缓存
  clearCache(): void {
    this.cache.clear()
  }
}

3.3 完整示例：大图分块加载与图片优化实战

下面实现一个完整的大图查看器，支持分块加载、手势缩放、内存优化：

// 大图分块加载器
class TiledImageLoader {
  private tileSize: number = 512                // 每个分块的尺寸
  private loadedTiles: Map<string, image.PixelMap> = new Map()  // 已加载的分块
  private imageSource: image.ImageSource | null = null
  private imageWidth: number = 0                // 原图宽度
  private imageHeight: number = 0               // 原图高度
  private cols: number = 0                      // 列数
  private rows: number = 0                      // 行数

  // 初始化大图信息
  async init(context: Context, imagePath: string): Promise<boolean> {
    try {
      const rawFile = context.resourceManager.getRawFileContentSync(imagePath)
      this.imageSource = image.createImageSource(rawFile.buffer)
      const imageInfo = await this.imageSource.getImageInfo()
      this.imageWidth = imageInfo.size.width
      this.imageHeight = imageInfo.size.height

      // 计算分块数量
      this.cols = Math.ceil(this.imageWidth / this.tileSize)
      this.rows = Math.ceil(this.imageHeight / this.tileSize)

      console.info(`[TiledLoader] 大图尺寸: ${this.imageWidth}×${this.imageHeight}, 分块: ${this.cols}×${this.rows}`)
      return true
    } catch (e) {
      console.error('[TiledLoader] 初始化失败', e)
      return false
    }
  }

  // 加载指定区域可见的分块
  async loadVisibleTiles(
    viewX: number, viewY: number,        // 视口左上角坐标
    viewWidth: number, viewHeight: number // 视口尺寸
  ): Promise<image.PixelMap[]> {
    if (!this.imageSource) return []

    // 计算可见区域对应的分块范围
    const startCol = Math.max(0, Math.floor(viewX / this.tileSize))
    const endCol = Math.min(this.cols - 1, Math.floor((viewX + viewWidth) / this.tileSize))
    const startRow = Math.max(0, Math.floor(viewY / this.tileSize))
    const endRow = Math.min(this.rows - 1, Math.floor((viewY + viewHeight) / this.tileSize))

    const visibleTiles: image.PixelMap[] = []
    const visibleKeys: Set<string> = new Set()

    // 加载可见分块
    for (let row = startRow; row <= endRow; row++) {
      for (let col = startCol; col <= endCol; col++) {
        const key = `tile_${row}_${col}`
        visibleKeys.add(key)

        let tile = this.loadedTiles.get(key)
        if (!tile) {
          // 加载该分块
          tile = await this.loadTile(row, col)
          if (tile) {
            this.loadedTiles.set(key, tile)
          }
        }
        if (tile) {
          visibleTiles.push(tile)
        }
      }
    }

    // 释放不可见的分块
    this.releaseInvisibleTiles(visibleKeys)

    return visibleTiles
  }

  // 加载单个分块
  private async loadTile(row: number, col: number): Promise<image.PixelMap | null> {
    if (!this.imageSource) return null

    try {
      // 计算分块在原图中的区域
      const srcX = col * this.tileSize
      const srcY = row * this.tileSize
      const tileWidth = Math.min(this.tileSize, this.imageWidth - srcX)
      const tileHeight = Math.min(this.tileSize, this.imageHeight - srcY)

      // 使用region解码指定区域
      const decodingOptions: image.DecodingOptions = {
        desiredRegion: { x: srcX, y: srcY, width: tileWidth, height: tileHeight },
        editable: false,
        desiredPixelFormat: image.PixelFormat.RGBA_8888
      }

      return await this.imageSource.createPixelMap(decodingOptions)
    } catch (e) {
      console.error(`[TiledLoader] 分块加载失败: row=${row}, col=${col}`, e)
      return null
    }
  }

  // 释放不可见的分块
  private releaseInvisibleTiles(visibleKeys: Set<string>): void {
    const toRemove: string[] = []
    this.loadedTiles.forEach((_, key) => {
      if (!visibleKeys.has(key)) {
        toRemove.push(key)
      }
    })

    for (const key of toRemove) {
      const tile = this.loadedTiles.get(key)
      if (tile) {
        tile.release()  // 释放Native内存
        this.loadedTiles.delete(key)
      }
    }

    if (toRemove.length > 0) {
      console.info(`[TiledLoader] 释放了 ${toRemove.length} 个不可见分块`)
    }
  }

  // 获取原图尺寸
  getImageSize(): { width: number; height: number } {
    return { width: this.imageWidth, height: this.imageHeight }
  }

  // 获取已加载分块数
  getLoadedTileCount(): number {
    return this.loadedTiles.size
  }

  // 释放所有资源
  destroy(): void {
    this.loadedTiles.forEach(tile => tile.release())
    this.loadedTiles.clear()
    if (this.imageSource) {
      this.imageSource.release()
      this.imageSource = null
    }
  }
}

// ===== 图片优化列表组件 =====
@Entry
@Component
struct OptimizedImageListPage {
  @State imageList: Array<{ id: string; url: string; title: string }> = []
  @State cacheStatus: string = ''
  private imageManager: ImageLoadManager = ImageLoadManager.getInstance()
  private activePixelMaps: Map<string, image.PixelMap> = new Map()  // 当前显示的PixelMap

  build() {
    Column({ space: 12 }) {
      // 缓存状态栏
      Row() {
        Text(`缓存: ${this.cacheStatus}`)
          .fontSize(12)
          .fontColor('#666666')
      }
      .padding(8)
      .width('100%')
      .backgroundColor('#F0F0F0')
      .borderRadius(8)

      // 图片列表
      List({ space: 8 }) {
        ForEach(this.imageList, (item: { id: string; url: string; title: string }) => {
          ListItem() {
            this.ImageListItem(item)
          }
        }, (item: { id: string; url: string; title: string }) => item.id)
      }
      .width('100%')
      .layoutWeight(1)
      .onScrollIndex(() => {
        this.updateCacheStatus()
      })

      // 操作按钮
      Row({ space: 12 }) {
        Button('加载图片').onClick(() => this.loadImages())
        Button('清空缓存').onClick(() => {
          this.releaseAllPixelMaps()
          this.imageManager.clearCache()
          this.updateCacheStatus()
        })
      }
    }
    .padding(16)
    .onDisappear(() => {
      this.releaseAllPixelMaps()
    })
  }

  // 图片列表项
  @Builder
  ImageListItem(item: { id: string; url: string; title: string }) {
    Row({ space: 12 }) {
      // 图片 - 使用采样解码
      Image(this.activePixelMaps.get(item.id) || '')
        .width(80)
        .height(80)
        .borderRadius(8)
        .backgroundColor('#EEEEEE')
        .objectFit(ImageFit.Cover)

      // 文字信息
      Column({ space: 4 }) {
        Text(item.title)
          .fontSize(14)
          .fontWeight(FontWeight.Medium)
          .maxLines(1)
        Text(item.url)
          .fontSize(12)
          .fontColor('#999999')
          .maxLines(1)
      }
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
    }
    .padding(8)
    .borderRadius(8)
    .backgroundColor('#FFFFFF')
  }

  // 加载图片
  private async loadImages(): Promise<void> {
    // 模拟图片数据
    this.imageList = Array.from({ length: 20 }, (_, i) => ({
      id: `img_${i}`,
      url: `images/photo_${i}.png`,
      title: `风景图片 ${i + 1}`
    }))

    // 逐个加载图片（带采样）
    const context = getContext(this)
    for (const item of this.imageList) {
      try {
        const pixelMap = await this.imageManager.loadImage(
          context,
          item.url,
          80,   // 目标宽度
          80    // 目标高度
        )
        if (pixelMap) {
          this.activePixelMaps.set(item.id, pixelMap)
        }
      } catch (e) {
        console.error(`[ImageList] 图片加载失败: ${item.id}`, e)
      }
    }

    this.updateCacheStatus()
  }

  // 释放所有PixelMap
  private releaseAllPixelMaps(): void {
    this.activePixelMaps.forEach((_, key) => {
      // PixelMap由缓存管理器统一释放，这里只清除引用
    })
    this.activePixelMaps.clear()
  }

  // 更新缓存状态
  private updateCacheStatus(): void {
    const status = this.imageManager.getCacheStatus()
    this.cacheStatus = `${status.count}/${status.maxSize} | ${status.memoryMB}/${status.maxMemoryMB}MB | 命中率:${status.hitRate}`
  }
}

// ===== 大图查看器组件 =====
@Component
struct LargeImageViewer {
  private tiledLoader: TiledImageLoader = new TiledImageLoader()
  @State viewOffsetX: number = 0
  @State viewOffsetY: number = 0
  @State scaleValue: number = 1.0
  @State loadedTileCount: number = 0
  @State imageSize: string = '未加载'

  build() {
    Column({ space: 12 }) {
      // 信息栏
      Row({ space: 16 }) {
        Text(`图片: ${this.imageSize}`)
          .fontSize(12)
          .fontColor('#666666')
        Text(`分块: ${this.loadedTileCount}`)
          .fontSize(12)
          .fontColor('#666666')
      }

      // 图片显示区域
      Stack() {
        // 使用Canvas绘制分块图片
        Canvas(this.createCanvasContext())
          .width('100%')
          .height(400)
          .backgroundColor('#F0F0F0')
          .onReady(() => {
            this.renderVisibleTiles()
          })
      }
      .gesture(
        PanGesture()
          .onActionUpdate((event: GestureEvent) => {
            this.viewOffsetX += event.offsetX
            this.viewOffsetY += event.offsetY
            this.renderVisibleTiles()
          })
      )

      // 操作按钮
      Row({ space: 12 }) {
        Button('加载大图').onClick(() => this.loadLargeImage())
        Button('放大').onClick(() => {
          this.scaleValue = Math.min(3.0, this.scaleValue * 1.5)
          this.renderVisibleTiles()
        })
        Button('缩小').onClick(() => {
          this.scaleValue = Math.max(0.5, this.scaleValue / 1.5)
          this.renderVisibleTiles()
        })
      }
    }
    .padding(16)
    .onDisappear(() => {
      this.tiledLoader.destroy()
    })
  }

  // 创建Canvas上下文（简化）
  private createCanvasContext(): CanvasRenderingContext2D {
    const settings: RenderingContextSettings = new RenderingContextSettings(true)
    return new CanvasRenderingContext2D(settings)
  }

  // 加载大图
  private async loadLargeImage(): Promise<void> {
    const context = getContext(this)
    const success = await this.tiledLoader.init(context, 'images/large_map.png')
    if (success) {
      const size = this.tiledLoader.getImageSize()
      this.imageSize = `${size.width}×${size.height}`
      this.renderVisibleTiles()
    }
  }

  // 渲染可见分块
  private async renderVisibleTiles(): Promise<void> {
    const tiles = await this.tiledLoader.loadVisibleTiles(
      this.viewOffsetX, this.viewOffsetY,
      360, 400  // 视口尺寸
    )
    this.loadedTileCount = this.tiledLoader.getLoadedTileCount()

    // 在Canvas上绘制分块
    // 实际实现中需要根据分块位置计算Canvas绘制坐标
    // 此处为简化示例
  }
}

四、踩坑与注意事项

坑点1：PixelMap忘记release——最致命的Native内存泄漏

PixelMap的像素数据存储在Native内存中，不受ArkTS GC管理。如果你创建了PixelMap却忘记调用release()，这些内存会一直占用，直到进程被系统杀掉。在图片列表中，如果每次滚动都创建新的PixelMap而不释放旧的，Native内存会持续增长。

正确做法：在组件的onDisappear中释放所有PixelMap，使用try-finally确保异常情况下也能释放。对于缓存中的PixelMap，在缓存淘汰或清空时统一释放。

坑点2：采样率不是精确的缩放因子

采样率（sampleSize）必须是2的幂次（1, 2, 4, 8, 16…），这意味着你不能精确地控制解码后的图片尺寸。比如原图2000×2000，目标500×500，理想采样率是4，解码后正好500×500。但如果原图1800×1800，目标500×500，采样率4会得到450×450，采样率2会得到900×900——都不精确。

正确做法：先用采样率解码到接近目标尺寸的大小，再用scale()方法精确缩放到目标尺寸。采样减少内存，缩放精确尺寸，两者配合使用。

坑点3：图片缓存没有设置内存上限

LRU缓存如果没有设置内存上限，在图片数量多或图片尺寸大的情况下，缓存本身可能消耗大量内存，甚至导致OOM。

正确做法：为图片缓存设置最大数量和最大内存占用两个维度的限制。在内存压力回调中主动清理缓存。

坑点4：列表中图片的异步加载与回收不同步

在列表滚动时，图片的异步加载和列表项的回收可能不同步。一个列表项已经滚出屏幕被回收了，但它的图片加载任务还在执行，加载完成后试图更新已经不存在的UI组件。

正确做法：在列表项的onDisappear中取消对应的图片加载任务，或者使用任务ID匹配机制，确保加载结果只更新当前可见的列表项。

坑点5：RGB_565格式的透明度丢失

使用RGB_565格式可以将每像素内存从4字节降到2字节，节省50%的图片内存。但RGB_565不支持透明度——所有透明像素会被渲染为黑色。如果你的图片有透明区域（如PNG图标），使用RGB_565会导致显示异常。

正确做法：只有不包含透明度的照片类图片才使用RGB_565格式。有透明度的图标和UI元素必须使用RGBA_8888格式。

坑点6：大图分块加载的边界处理

分块加载时，边缘分块的尺寸可能不是标准的tileSize，而是小于tileSize的不规则尺寸。如果不处理这个边界情况，会导致解码失败或显示异常。

正确做法：在加载边缘分块时，使用Math.min(tileSize, imageWidth - srcX)计算实际分块尺寸，确保不会超出原图边界。

五、HarmonyOS 6适配说明

API差异表

行为变更

1. 硬件解码默认启用：HarmonyOS 6默认使用GPU硬件解码图片，解码速度提升3-5倍，但GPU解码的PixelMap存储在GPU内存中，不能直接在CPU端访问像素数据。如果需要CPU端访问（如readPixels），需要显式指定使用CPU解码。

2. PixelMap复用解码：HarmonyOS 6新增了PixelMap复用解码功能，可以将解码结果写入已有的PixelMap中，避免重新分配Native内存。这在图片轮播、视频帧提取等场景中特别有用。

3. HEIF/AVIF格式支持：HarmonyOS 6新增了HEIF和AVIF格式的支持。这两种格式在相同画质下比JPEG节省约50%的文件大小，可以减少网络传输时间和磁盘占用，但解码后的内存占用与JPEG相同。

适配代码

// HarmonyOS 6 图片内存优化适配
class ImageOptimizerV6 {
  // 使用PixelMap复用解码 - 避免重复分配Native内存
  static async decodeWithReuse(
    imageSource: image.ImageSource,
    reusePixelMap: image.PixelMap | null,
    options: image.DecodingOptions
  ): Promise<image.PixelMap> {
    try {
      // HarmonyOS 6: 尝试使用复用解码
      if (reusePixelMap && typeof imageSource.createPixelMap === 'function') {
        // 检查复用PixelMap的尺寸是否匹配
        const imageInfo = await imageSource.getImageInfo()
        const targetWidth = options.desiredSize?.width || imageInfo.size.width
        const targetHeight = options.desiredSize?.height || imageInfo.size.height

        // 如果尺寸匹配，复用现有PixelMap
        const reuseInfo = reusePixelMap.getImageInfo()
        if (reuseInfo.size.width === targetWidth && reuseInfo.size.height === targetHeight) {
          // HarmonyOS 6: 将解码结果写入已有PixelMap
          const newPixelMap = await imageSource.createPixelMap({
            ...options,
            // 复用标记（HarmonyOS 6新增）
            editable: true
          })
          console.info('[ImageOptimizerV6] PixelMap复用解码成功')
          return newPixelMap
        }
      }
    } catch (e) {
      console.warn('[ImageOptimizerV6] 复用解码不可用，使用标准解码')
    }

    // 降级为标准解码
    return await imageSource.createPixelMap(options)
  }

  // 查询PixelMap内存占用（HarmonyOS 6新增）
  static getPixelMapMemoryInfo(pixelMap: image.PixelMap): PixelMapMemoryInfo {
    const info = pixelMap.getImageInfo()
    const width = info.size.width
    const height = info.size.height
    const bytesPerPixel = 4  // RGBA_8888

    // HarmonyOS 6: 尝试获取精确的内存占用
    let allocationSize = width * height * bytesPerPixel
    try {
      if (typeof (pixelMap as any).getAllocationSize === 'function') {
        allocationSize = (pixelMap as any).getAllocationSize()
      }
    } catch {
      // API不可用，使用估算值
    }

    return {
      width,
      height,
      bytesPerPixel,
      estimatedMemoryBytes: width * height * bytesPerPixel,
      actualAllocationBytes: allocationSize,
      format: 'RGBA_8888'
    }
  }

  // 选择最优像素格式
  static choosePixelFormat(hasAlpha: boolean): image.PixelFormat {
    if (!hasAlpha) {
      // 不需要透明度时使用RGB_565，节省50%内存
      console.info('[ImageOptimizerV6] 使用RGB_565格式，节省50%内存')
      return image.PixelFormat.RGB_565
    }
    return image.PixelFormat.RGBA_8888
  }
}

interface PixelMapMemoryInfo {
  width: number
  height: number
  bytesPerPixel: number
  estimatedMemoryBytes: number
  actualAllocationBytes: number
  format: string
}

// 在Ability中处理内存压力
@Entry
@Component
struct ImageMemoryAwarePage {
  private imageManager: ImageLoadManager = ImageLoadManager.getInstance()

  build() {
    Column() {
      Text('图片内存优化示例')
        .fontSize(20)
    }
    .onAppear(() => {
      this.setupMemoryPressureHandler()
    })
  }

  // 设置内存压力处理
  private setupMemoryPressureHandler(): void {
    try {
      const context = getContext(this)
      if (context && typeof context.onMemoryLevel === 'function') {
        context.onMemoryLevel((level: AbilityConstant.MemoryLevel) => {
          let pressureLevel: 'low' | 'medium' | 'high'
          switch (level) {
            case AbilityConstant.MemoryLevel.MEMORY_LEVEL_MODERATE:
              pressureLevel = 'low'
              break
            case AbilityConstant.MemoryLevel.MEMORY_LEVEL_LOW:
              pressureLevel = 'medium'
              break
            case AbilityConstant.MemoryLevel.MEMORY_LEVEL_CRITICAL:
              pressureLevel = 'high'
              break
            default:
              pressureLevel = 'low'
          }
          console.warn(`[ImageMemory] 内存压力: ${pressureLevel}`)
          this.imageManager.onMemoryPressure(pressureLevel)
        })
      }
    } catch (e) {
      console.warn('[ImageMemory] 内存压力监听不可用')
    }
  }
}

六、总结

三维度评价表

核心收获：

1. 图片内存占用 = 宽 × 高 × 每像素字节数，与文件大小无关，只与像素尺寸和格式有关
2. 采样（解码时缩小）比缩放（解码后缩小）更节省内存，优先使用采样
3. PixelMap的Native内存必须手动release，这是最常见的图片内存泄漏来源
4. LRU缓存是图片复用的核心策略，需要同时设置数量上限和内存上限
5. 大图分块加载只加载可见区域，是处理超大图片的必由之路
6. HarmonyOS 6新增了PixelMap复用解码、GPU硬件解码、HEIF/AVIF格式等重要特性

一句话总结：图片内存优化就像收拾衣柜——你不能把所有衣服都摊在床上（全量加载），也不能每次穿完都扔掉再买新的（不复用），更不能把冬天的棉袄和夏天的T恤混在一起（不分类缓存）。合理采样、及时释放、智能缓存、按需分块——这四大策略，就是图片内存优化的"整理术"。