【鸿蒙实战开发】ImageKnife组件解析

前言

图片是 UI 界面的重要元素之一，图片加载速度及效果直接影响应用体验。ArkUI 开发框架提供了丰富的图像处理能力，如图像解码、图像编码、图像编辑及基本的位图操作等，满足了开发者日常开发所需。但随着产品需求的日益增长，基本的图像处理能力已不能胜任某些比较复杂的应用场景，如无法直接获取缓存图片、无法配置占位图、无法进行自定义 PixelMap 图片变换等。为增强 ArkUI 开发框架的图像处理能力，ImageKnife 组件应运而生，本期我们将为大家带来 ImageKnife 的介绍。

一、ImageKnife简介

ImageKnife 是一个参考 Glide 框架进行设计，并基于 eTS 语言实现的图片处理组件，让开发者能轻松且高效地进行图片开发。而 Glide 是一个快速高效的图片加载库，它注重于平滑的滚动，提供了易用的 API，高性能、可扩展的图片解码管道，以及自动的资源池技术。

功能方面，ImageKnife 提供了自定义图片变换、占位图等图片处理能力，几乎满足了开发者进行图片处理的一切需求。性能方面，ImageKnife 采用 LRU 策略实现二级缓存，可灵活配置，有效减少内存消耗，提升了应用性能。使用方面，ImageKnife 封装了一套完整的图片加载流程，开发者只需根据 ImageKnifeOption 配置相关信息即可完成图片的开发，降低了开发难度，提升了开发效率。如图 1 所示，是 ImageKnife 加载图片的整体流程。

二、ImageKnife实现原理

下面我们将为大家介绍 ImageKnife 加载图片过程中每个环节的实现原理，让大家更深刻地认识 ImageKnife 组件。图 2 是 ImageKnife 加载图片的时序图：

2.1 用户配置信息

在加载图片前，用户需根据自身需求配置相应的参数，包括图片路径、图片大小、占位图及缓存策略等。ImageKnife 提供了 RequestOption 类，用于封装用户配置信息的接口，如图 3 所示列举了部分接口供大家参考：

通过 imageKnifeExecute() 方法获取用户配置信息，然后执行 ImageKnife.call(request)，正式启动图片加载任务。相关实现代码如下：

imageKnifeExecute() {
  // 首先需要确保获取ImageKnife单例对象
  if(ImageKnife){
  }else{
    ImageKnife = globalThis.exports.default.data.imageKnife;
  }
  // 生成配置信息requestOption
  let request = new RequestOption();
  // 配置必要信息和回调
  this.configNecessary(request);
  // 配置缓存相关信息   
  this.configCacheStrategy(request);
  // 配置显示信息和回调 
  this.configDisplay(request);
  // 启动ImageKnife执行请求
  ImageKnife.call(request);
}

2.2 加载图片

加载图片过程是 ImageKnife 组件的核心部分，如图 4 所示，包含占位图填充、缓存实现及图片解码三个环节。下面我们将为大家分别介绍每个环节的实现。

2.2.1 占位图填充

占位图就是图片加载过程中页面上的过渡效果，通常表现形式是在页面上待加载区域填充灰色的占位图，可以使得页面框架不会因为加载失败而变形。ImageKnife 提供了占位图功能，开发者可在 RequestOption 中配置是否启动占位图任务。如图 5 所示是占位图工作流程，执行图片加载任务后，占位图会填充加载页面。如果图片解析成功则将页面上填充的占位图替换为待加载的图片。如果图片解析失败，则将页面上填充的占位图替换为“图片解析失败占位图”。

相关实现代码如下：

// 占位图解析成功
placeholderOnComplete(imageKnifeData: ImageKnifeData) {
// 主图未加载成功，并且未加载失败  显示占位图