HarmonyOS鸿蒙Next ArkTS中如何实现带缓存的图片加载（如 Glide 效果）？

背景知识：

1、系统自带的 Image 组件是有缓存图片功能的

2、自己实现一个三级缓存功能

问题解决：

实现三级缓存功能实例工具：

import { fileIo, fileIo as fs } from '@kit.CoreFileKit';
import { common } from '@kit.AbilityKit';
import { MD5 } from '@yunkss/eftool';
import { image } from '@kit.ImageKit';
import { FileUtils } from './FileUtils';
import { request } from '@kit.BasicServicesKit';

// 生成缓存文件名（MD5示例）
function getCacheKey(url: string): string {
    return `avatar_${MD5.digest(url).getDataRow()}.jpg`; // 需自行实现MD5生成逻辑
}

// 获取缓存路径
function getCachePath(context: common.UIAbilityContext, url: string): string {
    const path = `${context.cacheDir}/image`
    const success = fs.accessSync(path)
    if (!success) {
        fs.mkdirSync(path)
    }
    return `${path}/${getCacheKey(url)}`;
}

// 检查文件缓存
function checkDiskCache(context: common.UIAbilityContext,
    url: string,
    call: (image: image.PixelMap | null) => void) {
    const cachePath = getCachePath(context, url);
    try {
        const exists = fs.accessSync(cachePath);
        if (exists) {
            const imageSource = image.createImageSource(cachePath);
            imageSource.createPixelMap((err: BusinessError, data: PixelMap) => {
                call(data)
            });
        } else {
            call(null)
        }
    } catch (err) {
        console.warn('Disk cache check failed:', err);
    }
}


const memoryCache = new Map<string, image.PixelMap>(); // 使用Map存储解码后图像

export function getCachedImage(context: common.UIAbilityContext,
    url: string,
    call: (image: image.PixelMap) => void) {
    // 1. 检查内存缓存
    console.log("获取图片：" + url)
    if (memoryCache.has(url)) {
        call(memoryCache.get(url)!);
        return
    }

    console.log("获取磁盘获取：" + url)
    // 2. 检查磁盘缓存
    checkDiskCache(context, url, (diskCache) => {
        if (diskCache) {
            console.log("获取磁盘获取成功")
            memoryCache.set(url, diskCache); // 写入内存缓存
            call(diskCache);
        } else {

            console.log("获取网络获取：" + url)
            // 3. 网络下载并缓存

            downloadFile(context, url, (path: string) => {
                const netSource = image.createImageSource(path);
                netSource.createPixelMap((err: BusinessError, pixelMap: PixelMap) => {
                    // 写入内存缓存
                    memoryCache.set(url, pixelMap);

                    console.log("获取缓存中到文件：" + url)
                    // 异步存储到磁盘
                    const cachePath = getCachePath(context, url);
                    const imagePacker = image.createImagePacker();
                    const packOpts: image.PackingOption = { format: "image/jpeg", quality: 90 };
                    imagePacker.packing(pixelMap, packOpts,
                        (err: BusinessError, data: ArrayBuffer) => {
                            const file =
                                fs.openSync(cachePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
                            fs.writeSync(file.fd, data);

                            call(pixelMap)
                        });
                });
            })
        }
    });


}

//网络下载图片
function downloadFile(context: common.UIAbilityContext, url: string, call: (path: string) => void) {
    const cachePath = getCachePath(context, url);
    const config: request.DownloadConfig = {
        url: url,
        filePath: cachePath
    }
    try {
        request.downloadFile(context, config, (err: BusinessError, data: request.DownloadTask) => {
            if (err) {
                console.error("下载异常2：" + err.message)
                return
            }
            data.on("complete", () => {
                console.log("图片下载完成 " + cachePath)
                call(cachePath)
            })
        })

    } catch (error) {
        console.error("下载异常1：" + error)
    }

}

使用：

import { PreferencesUtils } from '../utils/PreferencesUtils';
import { common } from '@kit.AbilityKit';
import { image } from '@kit.ImageKit';
import { getCachedImage } from '../utils/CacheUtils';

@Entry
@Component
struct SingleTitleSolutionOne {
        this.getUIContext().getHostContext() as common.UIAbilityContext
    @State pixelMap: image.PixelMap | null = null

    aboutToAppear() {
    }

    build() {
        Column() {
            Text('标题/Banner')
                .fontSize(30)
                .width('100%')
                .height(200)
                .backgroundColor('#66666666')
                .textAlign(TextAlign.Center)
                .onClick(async () => {
                    //获取缓存图片
                    getCachedImage(this.context,
                        'https://aisearch.cdn.bcebos.com/homepage/dashboard/ai_picture_create/01.png',
                        (pic: image.PixelMap) => {
                            this.pixelMap = pic
                        });
                })


            if (this.pixelMap) {
                Image(this.pixelMap)
                    .width("100")
                    .height("100")
            }
        }
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
        
    }
}

日志：

首次网络下载：

缓存获取：

本地获取：