forked from floraachy/ImageKnife
183 lines
7.5 KiB
Markdown
183 lines
7.5 KiB
Markdown
# ImageKnife
|
||
|
||
**专门为OpenHarmony打造的一款图像加载缓存库，致力于更高效、更轻便、更简单。**
|
||
|
||
## 简介
|
||
|
||
本项目参考开源库 [Glide](https://github.com/bumptech/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 | 图片展示样式（可选） |
|
||
| writeCacheStrategy | WriteCacheStrategyType | 写入缓存策略(可选) |
|
||
| onlyRetrieveFromCache | boolean | 是否跳过网络和本地请求（可选） |
|
||
| customGetImage | (context: Context, src: string | 自定义下载图片（可选） | | Resource | 错误占位图数据源 |
|
||
| border | BorderOptions | 边框圆角（可选） |
|
||
| priority | taskpool.Priority | 加载优先级（可选） |
|
||
| context | common.UIAbilityContext | 上下文（可选） |
|
||
| progressListener | (progress: number)=>void | 进度（可选） |
|
||
| signature | String | 自定义缓存关键字（可选） |
|
||
| headerOption | Array<HeaderOptions> | 设置请求头（可选） |
|
||
| transformation | PixelMapTransformation | 图片变换（可选） |
|
||
|
||
### ImageKnife接口
|
||
| 参数名称 | 入参内容 | 功能简介 |
|
||
|------------------|---------------------------|---------------|
|
||
| initMemoryCache | newMemoryCache: IMemoryCache | 自定义内存缓存策略 |
|
||
| initFileCache | context: Context, size: number, memory: number | 初始化文件缓存数量和大小 |
|
||
| preLoadCache | url:string | 预加载并返回文件缓存路径 |
|
||
| getCacheImage | url: string, cacheType: CacheType | 从内存或文件缓存中获取资源 |
|
||
| addHeader | key: string, value: Object | 全局添加http请求头 |
|
||
| setHeaderOptions | Array<HeaderOptions> | 全局设置http请求头 |
|
||
| deleteHeader | key: string | 全局删除http请求头 |
|
||
| setEngineKeyImpl | IEngineKey | 全局配置缓存key生成策略 |
|
||
|
||
## 约束与限制
|
||
在下述版本验证通过：
|
||
DevEco Studio 5.0 Canary3（5.0.3.221）--SDK:API12
|
||
## 贡献代码
|
||
|
||
使用过程中发现任何问题都可以提 [issue](https://gitee.com/openharmony-tpc/ImageKnife/issues)
|
||
给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-tpc/ImageKnife/issues) 。
|
||
|
||
## 开源协议
|
||
|
||
本项目基于 [Apache License 2.0](https://gitee.com/openharmony-tpc/ImageKnife/blob/master/LICENSE) ，请自由的享受和参与开源。
|
||
|
||
## 遗留问题
|
||
- 添加组件闪动问题 |