ImageKnife

专门为OpenHarmony打造的一款图像加载缓存库，致力于更高效、更轻便、更简单。

简介

本项目参考开源库 Glide 进行OpenHarmony的自研版本：

• 支持自定义内存缓存策略，支持设置内存缓存的大小(默认LRU策略)。
• 支持磁盘二级缓存，对于下载图片会保存一份至磁盘当中。
• 支持自定义实现图片获取/网络下载
• 支持监听网络下载回调进度
• 继承Image的能力，支持option传入border，设置边框，圆角
• 继承Image的能力，支持option传入objectFit设置图片缩放，包括objectFit为auto时根据图片自适应高度
• 支持通过设置transform缩放图片
• 并发请求数量，支持请求排队队列的优先级
• 支持生命周期已销毁的图片，不再发起请求
• 自定义缓存key
• 自定义http网络请求头
• 支持writeCacheStrategy控制缓存的存入策略(只存入内存或文件缓存)
• 支持preLoadCache预加载图片
• 支持onlyRetrieveFromCache仅用缓存加载
• 支持使用一个或多个图片变换，如模糊，高亮等

待实现特性

• gif/webp动图显示与控制
• 内存降采样优化，节约内存的占用
• 支持自定义图片解码

注意：3.x版本相对2.x版本做了重大的重构，主要体现在：

• 使用Image组件代替Canvas组件渲染
• 重构Dispatch分发逻辑，支持控制并发请求数，支持请求排队队列的优先级
• 支持通过initMemoryCache自定义策略内存缓存策略和大小
• 支持option自定义实现图片获取/网络下载

因此API及能力上，目前有部分差异，主要体现在：

• 不支持drawLifeCycle接口，通过canvas自会图片
• mainScaleType，border等参数，新版本与系统Image保持一致
• gif/webp动图播放与控制
• 抗锯齿相关参数

下载安装

ohpm install @ohos/imageknife

// 如果需要用文件缓存，需要提前初始化文件缓存
await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024)

使用说明

1.显示本地资源图片

ImageKnifeComponent({
  ImageKnifeOption: {
    loadSrc: $r("app.media.app_icon"),
    placeholderSrc: $r("app.media.loading"),
    errorholderSrc: $r("app.media.app_icon"),
    objectFit: ImageFit.Auto
  }
}).width(100).height(100)

2.显示本地context files下文件

ImageKnifeComponent({
  ImageKnifeOption: {
    loadSrc: this.localFile,
    placeholderSrc: $r("app.media.loading"),
    errorholderSrc: $r("app.media.app_icon"),
    objectFit: ImageFit.Auto
  }
}).width(100).height(100)

3.显示网络图片

ImageKnifeComponent({
  ImageKnifeOption: {
    loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
    placeholderSrc: $r("app.media.loading"),
    errorholderSrc: $r("app.media.app_icon"),
    objectFit: ImageFit.Auto
  }
}).width(100).height(100)

4.自定义下载图片

ImageKnifeComponent({
  ImageKnifeOption: {
    loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
    placeholderSrc: $r("app.media.loading"),
    errorholderSrc: $r("app.media.app_icon"),
    objectFit: ImageFit.Auto,
    customGetImage: custom
 }
}).width(100).height(100)

// 自定义实现图片获取方法，如自定义网络下载
@Concurrent
async function custom(context: Context, src: string | PixelMap | Resource): Promise<ArrayBuffer | undefined> {
  console.info("ImageKnife::  custom download：" + src)
  // 举例写死从本地文件读取，也可以自己请求网络图片
  return context.resourceManager.getMediaContentSync($r("app.media.bb").id).buffer as ArrayBuffer
}

5.监听网络下载进度

ImageKnifeComponent({
  ImageKnifeOption: {
    loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
    progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)}
  }
}).width(100).height(100)

6.支持option传入border，设置边框，圆角

ImageKnifeComponent({ ImageKnifeOption: 
{
   loadSrc: $r("app.media.rabbit"),
   border: {radius:50}
  }
}).width(100).height(100)

7.支持option图片变换

ImageKnifeComponent({ ImageKnifeOption: 
{
   loadSrc: $r("app.media.rabbit"),
   border: {radius:50},
   transformation: new BlurTransformation(3)
  }
}).width(100).height(100)

接口说明

ImageKnifeOption参数列表

参数名称	入参内容	功能简介
loadSrc	string、PixelMap、Resource	主图展示
placeholderSrc	PixelMap、Resource	占位图图展示（可选）
errorholderSrc	PixelMap、Resource	错误图展示（可选）
objectFit	ImageFit	主图填充效果（可选）
placeholderObjectFit	ImageFit	占位图填充效果（可选）
errorholderObjectFit	ImageFit	错误图填充效果（可选）
writeCacheStrategy	CacheStrategyType	写入缓存策略(可选)
onlyRetrieveFromCache	boolean	是否跳过网络和本地请求（可选）
customGetImage	(context: Context, src: string	自定义下载图片（可选）
border	BorderOptions	边框圆角（可选）
priority	taskpool.Priority	加载优先级（可选）
context	common.UIAbilityContext	上下文（可选）
progressListener	(progress: number)=>void	进度（可选）
signature	String	自定义缓存关键字（可选）
headerOption	Array	设置请求头（可选）
transformation	PixelMapTransformation	图片变换（可选）
onLoadListener	onLoadStart: () => void、onLoadSuccess: (data: string	PixelMap

ImageKnife接口

参数名称	入参内容	功能简介
initMemoryCache	newMemoryCache: IMemoryCache	自定义内存缓存策略
initFileCache	context: Context, size: number, memory: number	初始化文件缓存数量和大小
preLoadCache	loadSrc: string I ImageKnifeOption	预加载并返回文件缓存路径
getCacheImage	loadSrc: string, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string)	从内存或文件缓存中获取资源
addHeader	key: string, value: Object	全局添加http请求头
setHeaderOptions	Array	全局设置http请求头
deleteHeader	key: string	全局删除http请求头
setEngineKeyImpl	IEngineKey	全局配置缓存key生成策略
putCacheImage	url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string	写入内存磁盘缓存
removeMemoryCache	url: string	ImageKnifeOption
removeFileCache	url: string	ImageKnifeOption

约束与限制

在下述版本验证通过：
DevEco Studio 5.0 Canary3（5.0.3.221）--SDK:API12

贡献代码

使用过程中发现任何问题都可以提 issue 给我们，当然，我们也非常欢迎你给我们发 PR 。

开源协议

本项目基于 Apache License 2.0 ，请自由的享受和参与开源。

遗留问题

• 添加组件闪动问题