OpenHarmony实战开发——图片加载 ImageKnife

ImageKnife

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

简介

本项目基于开源库 Glide 进行OpenHarmony的自研版本：

• 支持内存缓存，使用LRUCache算法，对图片数据进行内存缓存。
• 支持磁盘缓存，对于下载图片会保存一份至磁盘当中。
• 支持进行图片变换: 支持图像像素源图片变换效果。
• 支持用户配置参数使用:(
  例如：配置是否开启一级内存缓存，配置磁盘缓存策略，配置仅使用缓存加载数据，配置图片变换效果，配置占位图，配置加载失败占位图等)。
• 推荐使用ImageKnifeComponent组件配合ImageKnifeOption参数来实现功能。
• 支持用户自定义配置实现能力参考ImageKnifeComponent组件中对于入参ImageKnifeOption的处理。

下载安装

ohpm install @ohos/imageknife

使用说明

1.依赖配置

在entry\src\main\ets\entryability\EntryAbility.ts中做如下配置初始化全局ImageKnife实例：

import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';
import {
    ImageKnife } from '@ohos/imageknife'

export default class EntryAbility extends UIAbility {
   
  onWindowStageCreate(windowStage: window.WindowStage) {
   
    windowStage.loadContent('pages/Index', (err, data) => {
   
    });
    // 初始化全局ImageKnife 
    ImageKnife.with(this.context);
  	// 后续访问ImageKnife请通过:ImageKnifeGlobal.getInstance().getImageKnife()方式
  }
}

2.加载普通图片

接下来我们来写个简单实例看看:

import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State option: ImageKnifeOption = {
    loadSrc: $r('app.media.icon')
  }

  build() {
      Row() {
        Column() {
          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
          ImageKnifeComponent({ imageKnifeOption: this.option })
            .width(300)
            .height(300)
        }.width('100%')
      }.height('100%')
  }
}

非常简单，仅需定义一个ImageKnifeOption数据对象，然后在你需要的UI位置，加入ImageKnifeComponent自定义组件就可以加载出一张图像了。

3.加载SVG图片

加载svg其实和普通流程没有区别,只要将 loadSrc: $r('app.media.jpgSample'), 改成一张 loadSrc: $r('app.media.svgSample'),
svg类型图片即可。

4.加载GIF图片

加载GIF其实和普通流程也没有区别只要将 loadSrc: $r('app.media.jpgSample'), 改成一张 loadSrc: $r('app.media.gifSample'),
GIF图片即可。

4.1加载GIF图片

更改ImageKnifeOption对象的autoPlay（可选autoPlay = true为开始播放，autoPlay = false为暂停播放）

5.自定义Key

因为通常改变标识符比较困难或者根本不可能，所以ImageKnife也提供了 签名 API 来混合（你可以控制的）额外数据到你的缓存键中。
签名(signature)适用于媒体内容，也适用于你可以自行维护的一些版本元数据。

将签名传入加载请求

imageKnifeOption = {
                loadSrc: 'https://aahyhy.oss-cn-beijing.aliyuncs.com/blue.jpg',
                signature: new ObjectKey(new Date().getTime().toString())
              }

详细样例请参考SignatureTestPage文件

代码示例

进阶使用

如果简单的加载一张图像无法满足需求，我们可以看看ImageKnifeOption这个类提供了哪些扩展能力。

ImageKnifeOption参数列表

参数名称	入参内容	功能简介
loadSrc	string\	PixelMap\
mainScaleType	ScaleType	设置主图展示样式（可选）
strategy	DiskStrategy	设置磁盘缓存策略（可选）
dontAnimateFlag	boolean	gif加载展示一帧（可选）
placeholderSrc	PixelMap\	Resource
placeholderScaleType	ScaleType	设置占位图展示样式（可选）
errorholderSrc	PixelMap\	Resource
errorholderSrcScaleType	ScaleType	设置失败占位图展示样式（可选）
retryholderSrc	PixelMap\	Resource
retryholderScaleType	ScaleType	设置重试占位图展示样式（可选）
thumbSizeMultiplier	number 范围(0,1]	设置缩略图占比（可选）
thumbSizeDelay	number	设置缩略图展示时间（可选）
thumbSizeMultiplierScaleType	ScaleType	设置缩略图展示样式（可选）
displayProgress	boolean	设置是否展示下载进度条（可选）
canRetryClick	boolean	设置重试图层是否点击重试（可选）
onlyRetrieveFromCache	boolean	仅使用缓存加载数据（可选）
isCacheable	boolean	是否开启一级内存缓存（可选）
gif	{ // 返回一周期动画gif消耗的时间 loopFinish?: (loopTime?) => void // gif播放速率相关 speedFactory?: number // 直接展示gif第几帧数据 seekTo?: number playTimes?: number }	GIF播放控制能力（可选）
transformation	BaseTransform	单个变换（可选）
transformations	Array<BaseTransform>	多个变换,目前仅支持单个变换（可选）
allCacheInfoCallback	IAllCacheInfoCallback	输出缓存相关内容和信息（可选）
signature	ObjectKey	自定key（可选）
drawLifeCycle	IDrawLifeCycle	用户自定义实现绘制方案（可选）
imageSmoothingEnabled	boolean	抗锯齿是否开启属性配置，设置为false时，imageSmoothingQuality失效
imageSmoothingQuality	AntiAliasing	抗锯齿属性配置
autoPlay	boolean	GIF播放暂停控制（可选）

其他参数只需要在ImageKni