【鸿蒙南向开发】OpenHarmony图片加载——ImageKnife

---

📚鸿蒙开发往期学习笔录📌：

📌 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
📌 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
📌 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
📌 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
📌 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
📌 记录一场鸿蒙开发岗位面试经历~
📌 持续更新中……

---

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