GlideJS

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

简介

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

目录

/entry/src/
- main/ets/default
    - cache               # 缓存相关内容
    	- diskstrategy		# 缓存策略
    	- key				# 缓存key生成策略
    	- Base64.ets		# Base64算法
    	- CustomMap.ets		# 自定义Map封装
    	- DiskCacheEntry.ets# 磁盘缓存entry
    	- DiskLruCache.ets  # 磁盘LRU缓存策略
    	- FileReader.ets  	# 文件读取相关
    	- FileUtils.ets		# 文件工具类
    	- LruCache.ets		# 内存LRU缓存策略
    	- Md5.ets			# MD5算法
    	
    - glide               # glide主要内容
    	- compress			# 压缩相关
    	- constants			# 常量相关
    	- entry				# 部分数据结构
    	- holder			# 占位图相关解析
    	- interface			# 接口相关
    	- networkmanage		# 网络相关
    	- pngj				# pngj相关
    	- requestmanage		# Glide请求相关
    	- resourcemanage	# 本地资源解析相关
    	- transform			# 图片变换相关
    	- utils				# 工具类相关
    	- Glide.ets			# Glide门面，app持久化类
    	- GlideData.ets		# 数据封装
    	- GlideImage.ets	# 自定义控件封装
    	- GlideOption.ets	# 用户传参数封装
    	- PixelMapPack.ets	# PixelMap封装
    	- RequestOption.ets # 用户设置参数封装
    	
    - pages               # 测试page页面列表
    	- basicTestFeatureAbilityPage.ets		# 测试元能力
    	- basicTestFileIOPage.ets				# 测试fileio
    	- basicTestMediaImage.ets				# 测试媒体image
    	- basicTestResourceManagerPage.ets		# 测试本地资源解析
    	- CompressPage.ets						# 压缩页面
    	- frescoImageTestCasePage.ets			# 测试属性动画组件切换
    	- frescoLayerTestCasePage.ets			# 测试GlideImage组件切换配合属性动画
    	- frescoRetryTestCasePage.ets			# 测试GlideImage加载失败重试
    	- index.ets								# 测试页面入口
    	- indexFresco.ets						# 二级测试页面入口
    	- loadNetworkTestCasePage.ets			# 网络加载测试
    	- loadResourceTestCasePage.ets			# 本地加载测试
    	- showErrorholderTestCasePage.ets		# 加载失败占位图测试
    	- storageTestDiskLruCache.ets			# 磁盘缓存测试
    	- storageTestLruCache.ets				# 内存缓存测试
    	- testAllCacheInfoPage.ets				# 所有缓存信息获取测试
    	- testAllTypeGlideImagePage.ets 		# 所有类型图片加载测试
    	- testAllTypeNativeImagePage.ets 		# 所有类型本地图片加载测试
    	- testGifDontAnimatePage.ets 			# gif加载静态图片测试
    	- testGlideOptionChangedPage.ets 		# GlideOption数据切换测试
    	- testGlideOptionChangedPage2.ets 		# GlideOption数据切换测试
    	- testMultiThreadWorkerPage2.ets 		# 多线程测试
    	- testPlaceholderPage.ets 				# 加载占位图测试
    	- testPreloadPage.ets 					# 预加载测试
    	- testResourceManagerPage.ets 			# 解析本地资源测试
    	- TransformPixelMapPage.ets 			# 所有类型变换测试
    	- transformTestCasePage.ets 			# 所有类型变换配合GlideImage测试
    	
    - workers             # 测试worker多线程
    	- worker1.js			# worker多线程测试

接口说明

RequestOpton 用户配置参数

方法名	入参	接口描述
load(src: string | PixelMap | Resource)	string | PixelMap | Resource	待加载图片的资源
setImageViewSize(imageSize: { width: number, height: number })	{ width: number, height: number }	传入显示图片组件的大小，变换的时候需要作为参考
diskCacheStrategy(strategy: DiskStrategy)	DiskStrategy	配置磁盘缓存策略 NONE SOURCE RESULT ALL AUTOMATIC
placeholder(src: PixelMap | Resource, func?: AsyncSuccess)	src: PixelMap | Resource, func?: AsyncSuccess	配置占位图，其中func为数据回调函数
errorholder(src: PixelMap | Resource, func?: AsyncSuccess)	src: PixelMap | Resource, func?: AsyncSuccess	配置加载失败占位图，其中func为数据回调函数
addListener(func: AsyncCallback)	func: AsyncCallback	配置整个监听回调，数据正常加载返回，加载失败返回错误信息
thumbnail(sizeMultiplier:number, func?: AsyncSuccess)	sizeMultiplier:number, func?: AsyncSuccess	设置缩略图比例，缩略图返回后，加载并展示缩略图
addProgressListener(func?: AsyncSuccess){ this.progressFunc = func; return this; }	func?: AsyncSuccess	设置网络下载百分比监听，返回数据加载百分比数值
addRetryListener(func?: AsyncSuccess){ this.retryFunc = func; return this; }	func?: AsyncSuccess	设置重试监听
addAllCacheInfoCallback(func: IAllCacheInfoCallback)	func: IAllCacheInfoCallback	设置获取所有缓存信息监听
skipMemoryCache(skip: boolean)	skip: boolean	配置是否跳过内存缓存
retrieveDataFromCache(flag: boolean)	flag: boolean	配置仅从缓存中加载数据
transform(transform: BaseTransform)	transform: BaseTransform	配置自定义变换类型
centerCrop(fd: number, out_width: number, out_height: number, callback?: AsyncTransform<Promise>)	fd: number, out_width: number, out_height: number, callback?: AsyncTransform<Promise>	静态方法可以根据图片文件，目标显示大小，进行对应centerCrop
rotateImage(fd: number, degreesToRotate: number)	fd: number, degreesToRotate: number	静态方法可以根据图片文件，和旋转角度，进行对应rotateImaroge
centerInside(fd: number, out_width: number, out_height: number, callback?: AsyncTransform<Promise>)	fd: number, out_width: number, out_height: number, callback?: AsyncTransform<Promise>	静态方法可以根据图片文件，目标显示大小，进行对应centerInside
fitCenter(fd: number, out_width: number, out_height: number , callback?: AsyncTransform<Promise>)	fd: number, out_width: number, out_height: number , callback?: AsyncTransform<Promise>	静态方法可以根据图片文件，目标显示大小，进行对应fitCenter

Glide 启动器/门面类

方法名	入参	接口描述
call(request: RequestOption)	request: RequestOption	根据用户配置参数具体执行加载流程
preload(request: RequestOption)	request: RequestOption	根据用户配置参数具体执行预加载流程

缓存策略相关

使用方法	类型	策略描述
request.diskCacheStrategy(new ALL())	ALL	表示既缓存原始图片，也缓存转换过后的图片
request.diskCacheStrategy(new AUTOMATIC())	AUTOMATIC	表示尝试对本地和远程图片使用最佳的策略
request.diskCacheStrategy(new DATA())	DATA	表示只缓存原始图片
request.diskCacheStrategy(new NONE())	NONE	表示不缓存任何内容
request.diskCacheStrategy(new RESOURCE())	RESOURCE	表示只缓存转换过后的图片

图片变换相关

使用方法	类型	相关描述
request.transforms(new BlurTransformation())	BlurTransformation	模糊处理
request.transforms(new BrightnessFilterTransformation())	BrightnessFilterTransformation	亮度滤波器
request.transforms(new ContrastFilterTransformation())	ContrastFilterTransformation	对比度滤波器
request.transforms(new CropCircleTransformation())	CropCircleTransformation	圆形剪裁显示
request.transforms(new CropCircleWithBorderTransformation())	CropCircleWithBorderTransformation	圆环展示
request.transforms(new CropSquareTransformation())	CropSquareTransformation	正方形剪裁
request.transforms(new CropTransformation())	CropTransformation	自定义矩形剪裁
request.transforms(new GrayscaleTransformation())	GrayscaleTransformation	灰度级转换
request.transforms(new InvertFilterTransformation())	InvertFilterTransformation	反转滤波器
request.transforms(new PixelationFilterTransformation())	PixelationFilterTransformation	像素化滤波器
request.transforms(new RotateImageTransformation())	RotateImageTransformation	图片旋转
request.transforms(new RoundedCornersTransformation())	RoundedCornersTransformation	圆角剪裁
request.transforms(new SepiaFilterTransformation())	SepiaFilterTransformation	乌墨色滤波器
request.transforms(new SketchFilterTransformation())	SketchFilterTransformation	素描滤波器

代码示例

1.首先初始化全局Glide实例，在app.ets中调用Glide.with()进行初始化

import {Glide} from './glide/Glide.ets'
export default {
  data: {
    glide: {} // Glide全局占位符
  },
  onCreate() {
    this.data.glide = Glide.with();// Glide占位符全局初始化赋值
  }
}

2.在页面index.ets中使用Glide

@Entry
@Component
struct Index {
  build() {
    
  }
  
  // 页面初始化完成，生命周期回调函数中 进行调用Glide
  aboutToAppear() {
  let requestOption = new RequestOption();
  requestOptin.load($r('app.media.IceCream'))
  .addListener((err,data) => {
      //加载成功/失败回调监听
    })
    ...
  Glide.call(requestOption)
  }
}

var Glide;
var defaultTemp = globalThis.exports.default
if (defaultTemp != undefined) {
  Glide = defaultTemp.data.glide;
}

推荐使用：

使用GlideOption作为入参，配合自定义组件GlideImage使用。

@Entry
@Component
struct Index {
  @State glideOption1: GlideOption =
    {
      loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
      size: { width: 300, height: 300 },
      placeholderSrc: $r('app.media.icon_loading'),
      errorholderSrc: $r('app.media.icon_failed'),
    };


  build() {
    Scroll() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        GlideImage({ glideOption: $glideOption1 })
      }
    }
    .width('100%')
    .height('100%')
  }
}

自定义实现：

使用原生Image组件，配合用户配置参数实现。

步骤1：

定义一个入参 PixelMap

@State  tomatoPixelMap:PixelMap = new PixelMap();
width:number = 200;
height:number = 200;

步骤2：

在你的component组件中，写下一个Image组件，将基础参数（入参PixelMap，组件的宽、高）配置好

Image(this.tomatoPixelMap)
        .backgroundColor(Color.Grey)
        .objectFit(ImageFit.Contain)
        .width(this.width)
        .height(this.height)

步骤3：

在aboutToAppear() 函数中调用加载流程

//配置参数
let requestOptin = new RequestOption();    
	//加载本地图片
    requestOptin.load($r('app.media.IceCream'))
    .addListener((err,data) => {
      //加载成功/失败回调监听
    })
    .placeholder( $r('app.media.icon_loading'), (data)=>{
        // 占位图回调监听
      })
	.errorholder(this.glideOption.errorholderSrc, (data)=>{
        // 失败占位图回调监听
      })
     .thumbnail(this.glideOption.thumbSizeMultiplier, (data) => {
        // 缩略图加载成功回调
    })
		// 一定要把控件大小传给RequestOption,图片变换必须
      .setImageViewSize({width:this.width, height:this.height})
		// 设置缓存策略
	  .diskCacheStrategy(new Strategy())
	  .addProgressListener((percentValue: string) => {
        // 图片网络加载进度条百分比回调
      })
	  .addRetryListener((error: any) => {
       	// 加载失败重试监听 图片加载失败时优先展示重试图层，点击重试图层，会重新进行一次加载流程
      })
		.transforms(new RoundedCornersTransformation({top:10}))
    // 启动加载流程，执行结果将会返回到上面的回调接口中
    Glide.call(requestOptin);

步骤4：

更多细节设置请参考自定义Component的GlideImage实现

演示