文档

简介

本项目基于开源库 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 = {
    // 占位图使用本地资源icon_loading（可选）
    placeholderSrc: $r('app.media.icon_loading'),
    loadSrc: 'https://aahyhy.oss-cn-beijing.aliyuncs.com/blue.jpg',
    // 绘制圆角30，边框5，边框"#ff00ff".用户自定义绘制（可选）      
   drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(5,"#ff00ff",30)
  }

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

加载流程

这里我们着重讲一下自定义实现绘制方案。为了增强绘制扩展能力，目前ImageKnifeComponent使用了Canvas的渲染能力作为基础。在此之上为了抽象组件绘制表达。我将图像的状态使用了 IDrawLifeCycle绘制生命周期进行表达，

大致流程 展示占位图->展示网络加载进度->展示缩略图->展示主图->展示重试图层->展示失败占位图

image.png

关键类和方法

类名	方法名	功能
ImageKnifeComponent	imageKnifeExecute	创建RequestOption对象、发起加载流程
ImageKnife	call	添加监听、生成cacheKey、解析占位图，解析request
ImageKnife	generateDataCacheKey	生成cachekey
ImageKnife	taskpoolLoadResource	多线程请求加载资源
ImageKnife	taskExecute	加载资源子线程包含流程：网络请求资源->下载资源到本地->解码成PixelMap、GIFFrame[]->缓存到内存和磁盘
占位图
PlaceHolderManager	displayPlaceholder	占位图
RetryHolderManager	displayRetryholder	重试占位图
ErrorHolderManager	displayErrorholder	错误占位图
加载主图
LoadLocalFileClient	loadData	本地沙盒加载数据
LoadDataShareFileClient	loadData	共享文件加载数据
HttpDownloadClient	loadData	网络下载数据
RequestManager	loadDiskFromTransform	加载磁盘缓存 变换后图片
RequestManager	loadDiskFromSource	加载磁盘缓存 原图
RequestManager	parseDiskFile2PixelMap	解析磁盘文件变成PixelMap
RequestManager	loadSourceFromNetwork	加载网络资源
RequestManager	downloadSuccess	下载成功缓存图片
图片处理
GIFParseImpl	parseGifs	处理gif、webp图
SVGParseImpl	parseSvg	处理svg图
ParseImageUtil	parseImage	原始尺寸
ParseImageUtil	parseImageThumbnail	省略图
缓存
DiskLruCache	saveFileCacheOnlyFile	子线程里只写入缓存文件
DiskLruCache	getFileCacheByFile	子线程中，通过文件名，直接查找是否有文件缓存
MemoryCacheProxy	loadMemoryCache	从内存中取值
LruCache	get	获取键为key的value
MemoryCacheProxy	putValue	存放view
LruCache	put	添加缓存键值对
ImageKnifeDrawFactory	createRoundLifeCycle	绘制图片圆角、边框