6.9 KiB

Raw Blame History

ImageKnife

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

简介

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

支持内存缓存，使用LRUCache算法，对图片数据进行内存缓存。
支持通过initMemoryCache自定义策略内存缓存策略和大小。
支持磁盘二级缓存，对于下载图片会保存一份至磁盘当中。
支持option自定义实现图片获取/网络下载
支持监听网络下载回调进度
继承Image的能力，支持option传入border，设置边框，圆角
继承Image的能力，支持option传入objectFit设置图片缩放，包括objectFit为auto时根据图片自适应高度
支持通过设置transform缩放图片
并发请求数量，支持请求排队队列的优先级
支持生命周期已销毁的图片，不再发起请求
自定义缓存key
自定义请求头规格
支持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

使用说明

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)

接口说明

ImageKnifeOption参数列表

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

ImageKnife接口

参数名称	入参内容	功能简介
preLoadCache	url:string	预加载并返回文件缓存路径
getCacheImage	url: string, cacheType: CacheType	从内存或文件缓存中获取资源
addHeader	key: string, value: Object	全局添加请求头属性
serHeaderOptions	Array	全局设置请求头
deleteHeader	key: string	全局删除请求头
setEngineKeyImpl	CustomEngineKeyImpl	全局配置缓存key

约束与限制

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

贡献代码

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

开源协议

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

遗留问题

添加组件闪动问题

6.9 KiB Raw Blame History Unescape Escape