圖片是 UI 界面的重要元素之一，圖片加載速度及效果直接影響應(yīng)用體驗(yàn)。ArkUI 開(kāi)發(fā)框架提供了豐富的圖像處理能力，如圖像解碼、圖像編碼、圖像編輯及基本的位圖操作等，滿足了開(kāi)發(fā)者日常開(kāi)發(fā)所需。但隨著產(chǎn)品需求的日益增長(zhǎng)，基本的圖像處理能力已不能勝任某些比較復(fù)雜的應(yīng)用場(chǎng)景，如無(wú)法直接獲取緩存圖片、無(wú)法配置占位圖、無(wú)法進(jìn)行自定義 PixelMap 圖片變換等。為增強(qiáng) ArkUI 開(kāi)發(fā)框架的圖像處理能力，ImageKnife 組件應(yīng)運(yùn)而生，本期我們將為大家?guī)?lái) ImageKnife 的介紹。

一、ImageKnife簡(jiǎn)介

ImageKnife 是一個(gè)參考 Glide 框架進(jìn)行設(shè)計(jì)，并基于 eTS 語(yǔ)言實(shí)現(xiàn)的圖片處理組件，讓開(kāi)發(fā)者能輕松且高效地進(jìn)行圖片開(kāi)發(fā)。而 Glide 是一個(gè)快速高效的圖片加載庫(kù)，它注重于平滑的滾動(dòng)，提供了易用的 API，高性能、可擴(kuò)展的圖片解碼管道，以及自動(dòng)的資源池技術(shù)。

功能方面，ImageKnife 提供了自定義圖片變換、占位圖等圖片處理能力，幾乎滿足了開(kāi)發(fā)者進(jìn)行圖片處理的一切需求。性能方面，ImageKnife 采用 LRU 策略實(shí)現(xiàn)二級(jí)緩存，可靈活配置，有效減少內(nèi)存消耗，提升了應(yīng)用性能。使用方面，ImageKnife 封裝了一套完整的圖片加載流程，開(kāi)發(fā)者只需根據(jù) ImageKnifeOption 配置相關(guān)信息即可完成圖片的開(kāi)發(fā)，降低了開(kāi)發(fā)難度，提升了開(kāi)發(fā)效率。如圖 1 所示，是 ImageKnife 加載圖片的整體流程。

圖1 ImageKnife加載圖片整體流程

二、ImageKnife實(shí)現(xiàn)原理

下面我們將為大家介紹 ImageKnife 加載圖片過(guò)程中每個(gè)環(huán)節(jié)的實(shí)現(xiàn)原理，讓大家更深刻地認(rèn)識(shí) ImageKnife 組件。圖 2 是 ImageKnife 加載圖片的時(shí)序圖：

圖2 ImageKnife加載圖片的時(shí)序圖

2.1 用戶配置信息

在加載圖片前，用戶需根據(jù)自身需求配置相應(yīng)的參數(shù)，包括圖片路徑、圖片大小、占位圖及緩存策略等。ImageKnife 提供了 RequestOption 類(lèi)，用于封裝用戶配置信息的接口，如圖 3 所示列舉了部分接口供大家參考：

圖3 用戶配置參數(shù)

通過(guò) imageKnifeExecute() 方法獲取用戶配置信息，然后執(zhí)行 ImageKnife.call(request)，正式啟動(dòng)圖片加載任務(wù)。相關(guān)實(shí)現(xiàn)代碼如下：

imageKnifeExecute() {  // 首先需要確保獲取ImageKnife單例對(duì)象  if(ImageKnife){  }else{    ImageKnife = globalThis.exports.default.data.imageKnife;  }  // 生成配置信息requestOption  let request = new RequestOption();  // 配置必要信息和回調(diào)  this.configNecessary(request);  // 配置緩存相關(guān)信息     this.configCacheStrategy(request);  // 配置顯示信息和回調(diào)   this.configDisplay(request);  // 啟動(dòng)ImageKnife執(zhí)行請(qǐng)求  ImageKnife.call(request);}

2.2 加載圖片

加載圖片過(guò)程是 ImageKnife 組件的核心部分，如圖 4 所示，包含占位圖填充、緩存實(shí)現(xiàn)及圖片解碼三個(gè)環(huán)節(jié)。下面我們將為大家分別介紹每個(gè)環(huán)節(jié)的實(shí)現(xiàn)。

圖4 圖片加載過(guò)程

2.2.1 占位圖填充

占位圖就是圖片加載過(guò)程中頁(yè)面上的過(guò)渡效果，通常表現(xiàn)形式是在頁(yè)面上待加載區(qū)域填充灰色的占位圖，可以使得頁(yè)面框架不會(huì)因?yàn)榧虞d失敗而變形。ImageKnife 提供了占位圖功能，開(kāi)發(fā)者可在 RequestOption 中配置是否啟動(dòng)占位圖任務(wù)。如圖 5 所示是占位圖工作流程，執(zhí)行圖片加載任務(wù)后，占位圖會(huì)填充加載頁(yè)面。如果圖片解析成功則將頁(yè)面上填充的占位圖替換為待加載的圖片。如果圖片解析失敗，則將頁(yè)面上填充的占位圖替換為“圖片解析失敗占位圖”。

圖5 占位圖工作流程

相關(guān)實(shí)現(xiàn)代碼如下：

// 占位圖解析成功placeholderOnComplete(imageKnifeData: ImageKnifeData) {// 主圖未加載成功，并且未加載失敗  顯示占位圖  主圖加載成功或者加載失敗后=>不展示占位圖  if (!this.loadMainReady && !this.loadErrorReady && !this.loadThumbnailReady) {        this.placeholderFunc(imageKnifeData)  }}// 加載失敗 占位圖解析成功errorholderOnComplete(imageKnifeData: ImageKnifeData) {  // 如果有錯(cuò)誤占位圖 先解析并保存在RequestOption中 等到加載失敗時(shí)候進(jìn)行調(diào)用  this.errorholderData = imageKnifeData;  if (this.loadErrorReady) {    this.errorholderFunc(imageKnifeData)}

2.2.2 緩存實(shí)現(xiàn)

緩存是圖片加載過(guò)程中最關(guān)鍵的環(huán)節(jié)，緩存機(jī)制直接影響了圖片加載速度及圖片滾動(dòng)效果，開(kāi)發(fā)者可通過(guò)以下方法來(lái)靈活配置緩存策略。

圖6 緩存策略API

為了保障圖片的加載速度，ImageKnife 通過(guò)使用 Least Recently Used（最近最少使用）清空策略來(lái)實(shí)現(xiàn)內(nèi)存緩存及磁盤(pán)緩存。如圖 7 所示，在圖片加載過(guò)程中，CPU 會(huì)首先讀取內(nèi)存緩存中的數(shù)據(jù)，如果讀取到圖片資源則直接顯示圖片，否則讀取磁盤(pán)緩存數(shù)據(jù)。如果在磁盤(pán)緩存上仍然沒(méi)有讀取到數(shù)據(jù)，則可判定為該圖片為網(wǎng)絡(luò)圖片，這時(shí)需要將網(wǎng)絡(luò)圖片解碼后再進(jìn)行顯示（后面章節(jié)會(huì)詳細(xì)介紹），并將解碼后的圖片文件緩存至磁盤(pán)。

圖7 圖片緩存過(guò)程

下面我們將分別介紹兩種緩存機(jī)制的具體實(shí)現(xiàn)。

（1）內(nèi)存緩存

內(nèi)存緩存，就是指當(dāng)前程序運(yùn)行內(nèi)存分配的臨時(shí)存儲(chǔ)器，當(dāng)我們使用 ImageKnife 加載圖片時(shí)，這張圖片會(huì)被緩存到內(nèi)存當(dāng)中，只要在它還沒(méi)從內(nèi)存中被清除之前，下次再加載這張圖片都會(huì)直接從內(nèi)存中讀取，而不用重新從網(wǎng)絡(luò)或硬盤(pán)上讀取，大幅度提升圖片的加載效率。ImageKnife 內(nèi)存緩存的實(shí)現(xiàn)，需控制最大空間（maxsize），以及目前占用空間（size），相關(guān)實(shí)現(xiàn)代碼如下：

// 移除較少使用的緩存數(shù)據(jù)trimToSize(tempsize: number) {  while (true) {    if (tempsize < 0) {      this.map.clear()      this.size = 0      break    }    if (this.size <= tempsize || this.map.isEmpty()) {      break    }    var delkey = this.map.getFirstKey()    this.map.remove(delkey)    this.size--  }}
// 緩存數(shù)據(jù)最大值maxSize(): number{  return this.maxsize}
// 設(shè)置緩存數(shù)據(jù)量最大值resize(maxsize: number) {  if (maxsize < 0) {    throw new Error('maxsize <0 & maxsize invalid');  }  this.maxsize = maxsize  this.trimToSize(maxsize)}
// 清除緩存evicAll() {  this.trimToSize(-1)}

（2）磁盤(pán)緩存

默認(rèn)情況下，磁盤(pán)緩存的是解碼后的圖片文件，需防止應(yīng)用重復(fù)從網(wǎng)絡(luò)或其他地方下載和讀取數(shù)據(jù)。ImageKnife 磁盤(pán)緩存的實(shí)現(xiàn)，主要依靠 journal 文件對(duì)緩存數(shù)據(jù)進(jìn)行保存，保證程序磁盤(pán)緩存內(nèi)容的持久化問(wèn)題。相關(guān)實(shí)現(xiàn)代碼：

//讀取journal文件的緩存數(shù)據(jù)readJournal(path: string) {  var fileReader = new FileReader(path)  var line: string = ''  while (!fileReader.isEnd()) {    line = fileReader.readLine()    line = line.replace('
', '').replace('
', '')    this.dealwithJournal(line)  }  this.fileUtils.deleteFile(this.journalPathTemp)  this.trimToSize()}
//根據(jù)LRU算法刪除多余緩存數(shù)據(jù)private trimToSize() {  while (this.size > this.maxSize) {    var tempkey: string = this.cacheMap.getFirstKey()    var fileSize = this.fileUtils.getFileSize(this.dirPath + tempkey)    if (fileSize > 0) {      this.size = this.size - fileSize    }    this.fileUtils.deleteFile(this.dirPath + tempkey)    this.cacheMap.remove(tempkey)    this.fileUtils.writeData(this.journalPath, 'remove ' + tempkey + '
')  }}
//清除所有disk緩存數(shù)據(jù)cleanCacheData() {  var length = this.cacheMap.size()  for (var index = 0; index < length; index++) {    this.fileUtils.deleteFile(this.dirPath + this.cacheMap[index])  }  this.fileUtils.deleteFile(this.journalPath)  this.cacheMap.clear()  this.size = 0}

2.2.3 圖片解碼

當(dāng)我們使用 ImageKnife 去加載一張圖片的時(shí)候，并不是將原始圖片直接顯示出來(lái)，而是會(huì)進(jìn)行圖片解碼后再顯示到頁(yè)面。圖片解碼就是將不同格式的圖片（包括 JPEG、PNG、GIF、WebP、BMP）解碼成統(tǒng)一格式的 PixelMap 圖片文件。ImageKnife 的圖片解碼能力依賴(lài)的是 ArkUI 開(kāi)發(fā)框架提供的 ImageSource 解碼能力。通過(guò) import image from '@ohos.multimedia.image'導(dǎo)入 ArkUI 開(kāi)發(fā)框架的圖片能力，并調(diào)用 createImageSource（） 方法獲取，實(shí)現(xiàn)代碼如下：

import image from '@ohos.multimedia.image'
export class TransformUtils {  static centerCrop(buf: ArrayBuffer, outWidth: number, outHeihgt: number,                    callback?: AsyncTransform>) {    // 創(chuàng)建媒體解碼imageSource    var imageSource = image.createImageSource(buf as any);    // 獲取圖片信息    imageSource.getImageInfo()      .then((p) => {        var sw;        var sh;        var scale;        var pw = p.size.width;        var ph = p.size.height;        // 根據(jù)centerCrop規(guī)則控制縮放比例        if (pw == outWidth && ph == outHeihgt) {          sw = outWidth;          sh = outHeihgt;        } else {          if (pw * outHeihgt > outWidth * ph) {            scale = outHeihgt / ph;          } else {            scale = outWidth / pw;          }          sw = pw * scale;          sh = ph * scale;        }        var options = {          editable: true,          rotate: 0,          desiredRegion: { size: { width: sw, height: sh },            x: pw / 2 - sw / 2,            y: ph / 2 - sh / 2,          },        }        if (callback) {          // 回調(diào)，創(chuàng)建相關(guān)配置pixelmap          callback('', imageSource.createPixelMap(options));        }      })      .catch((error) => {        callback(error, null);      })  }}

2.3 顯示圖片

獲取到 PixelMap 解碼文件后，接下來(lái)就是將它渲染到應(yīng)用界面上。ImageKnife 的圖片渲染能力依賴(lài)的是 ArkUI 開(kāi)發(fā)框架提供的 image 組件的渲染能力。由于 eTS 是聲明式的，我們無(wú)法直接獲得 Image 組件的對(duì)象，需要依賴(lài) ArkUI 開(kāi)發(fā)框架的 @State 能力綁定輸入?yún)?shù)，在改變屬性對(duì)象之后，通知 UI 組件重新渲染，達(dá)到圖片顯示的效果，相關(guān)代碼如下：

@Componentexport struct ImageKnifeComponent {  @Watch('watchImageKnifeOption') @Link imageKnifeOption: ImageKnifeOption;  @State imageKnifePixelMapPack: PixelMapPack = new PixelMapPack();  @State imageKnifeResource: Resource = $r('app.media.icon_loading')  @State imageKnifeString: string = ''  @State normalPixelMap: boolean = false;  @State normalResource: boolean = true;  previousData: ImageKnifeData = null;  nowData: ImageKnifeData = null;
  build() {    Stack() {      //Image組件配置      Image(this.normalPixelMap ? this.imageKnifePixelMapPack.pixelMap : (this.normalResource ? this.imageKnifeResource : this.imageKnifeString))        .objectFit(this.imageKnifeOption.imageFit ? this.imageKnifeOption.imageFit : ImageFit.Fill)        .visibility(this.imageVisible)        .width(this.imageWidth)        .height(this.imageHeight)    }  }  //必要的用戶配置和回調(diào)方法  configNecessary(request: RequestOption){    request.load(this.imageKnifeOption.loadSrc)      .addListener((err, data) => {        console.log('request.load callback')        this.imageKnifeChangeSource(data)        this.animateTo('image');        return false;      })
    if (this.imageKnifeOption.size) {      request.setImageViewSize(this.imageKnifeOption.size)    }  }  // imageknife 第一次啟動(dòng)和數(shù)據(jù)刷新后重新發(fā)送請(qǐng)求  imageKnifeExecute() {    let request = new RequestOption();    this.configNecessary(request);    this.configCacheStrategy(request);    this.configDisplay(request);    ImageKnife.call(request);  }  //返回?cái)?shù)據(jù)Image渲染展示圖片  imageKnifeSpecialFixed(data:ImageKnifeData) {    if (data.isPixelMap()) {      this.displayPixelMap(data);    }    else if (data.isString()) {      this.displayString(data);    } else if (data.isResource()) {      this.displayResource(data);    } else {    }  }}

注：@State 裝飾的變量是組件內(nèi)部的狀態(tài)數(shù)據(jù)，當(dāng)這些狀態(tài)數(shù)據(jù)被修改時(shí)，將會(huì)調(diào)用所在組件的 build 方法進(jìn)行 UI 刷新。

三、ImageKnife實(shí)戰(zhàn)

通過(guò)上文的介紹，相信大家對(duì) ImageKnife 組件有了深刻的了解。下面我們將創(chuàng)建一個(gè) ImageKnife_Test 項(xiàng)目，為大家展示 ArkUI 開(kāi)發(fā)框架中 ImageKnife 組件的使用。通過(guò)將 ImageKnife 組件下載至項(xiàng)目中，然后根據(jù) ImageKnifeOption 配置相關(guān)信息，即可完成 GIF 圖片的加載。

3.1 創(chuàng)建項(xiàng)目

如圖 8 所示，在 DevEco Studio 中新建 ImageKnife_Test 項(xiàng)目，項(xiàng)目類(lèi)型選擇 Application，語(yǔ)言選擇 eTS，點(diǎn)擊 Finish 完成創(chuàng)建。

圖8 創(chuàng)建項(xiàng)目

3.2 添加依賴(lài)

成功創(chuàng)建項(xiàng)目后，接下來(lái)就是將 ImageKnife 組件下載至項(xiàng)目中。

首先，我們需找到 .npmrc 配置文件，并在文件中添加 @ohos 的 scope 倉(cāng)庫(kù)地址：@ohos:registry=https://repo.harmonyos.com/npm/，如圖 9 所示：

圖9 添加 scope倉(cāng)庫(kù)地址

配置好 npm 倉(cāng)庫(kù)地址后，如圖 10 所示，在 DevEco Studio 的底部導(dǎo)航欄，點(diǎn)擊“Terminal”（快捷鍵 Alt+F12），鍵入命令：npm install @ohos/imageknife 并回車(chē)，此時(shí) ImageKnife 組件會(huì)被自動(dòng)下載至項(xiàng)目中。下載完成后工程根目錄下會(huì)生成 node_modules/@ohos/imageknife 目錄。

圖10 下載至項(xiàng)目

3.3 編寫(xiě)邏輯代碼

ImageKnife 組件成功下載至項(xiàng)目中后，接下來(lái)就是邏輯代碼編寫(xiě)，這里我們將為大家介紹兩種使用方式：

方式一：首先初始化全局 ImageKnife 實(shí)例，然后在 app.ets 中調(diào)用 ImageKnife.with() 進(jìn)行初始化，相關(guān)代碼如下：

import {ImageKnife} from '@ohos/imageknife'export default {  data: {    imageKnife: {} // ImageKnife  },  onCreate() {    this.data.imageKnife = ImageKnife.with();  },  onDestroy() {  },}然后在頁(yè)面index.ets中使用imageknife，相關(guān)代碼如下：@Entry@Componentstruct Index {  build() {
  }
  // 頁(yè)面初始化完成，生命周期回調(diào)函數(shù)中 進(jìn)行調(diào)用ImageKnife  aboutToAppear() {    let requestOption = new RequestOption();  requestOptin.load($r('app.media.IceCream'))  .addListener((err,data) => {      //加載成功/失敗回調(diào)監(jiān)聽(tīng)    })    ...  ImageKnife.call(requestOption)  }}
var ImageKnife;var defaultTemp = globalThis.exports.defaultif (defaultTemp != undefined) {  ImageKnife = defaultTemp.data.imageKnife;}

方式二：在 index.ets 中，直接使用 ImageKnifeOption 作為入?yún)ⅲ⑴浜献远x組件 ImageKnifeComponent 使用，相關(guān)代碼如下：

import {ImageKnifeOption} from '@ohos/imageknife'
@Entry@Componentstruct Index {  @State imageKnifeOption1: ImageKnifeOption =    {      loadSrc: $r('app.media.gifSample'),      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 }) {        ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })      }    }    .width('100%')    .height('100%')  }}

以上就是本期全部?jī)?nèi)容，恭喜大家又花幾分鐘時(shí)間收獲了一個(gè)實(shí)用的組件。希望廣大開(kāi)發(fā)者能利用這個(gè)強(qiáng)大的開(kāi)源組件開(kāi)發(fā)出更多精美的應(yīng)用。同時(shí)，我們會(huì)陸續(xù)更新實(shí)用組件的解析，敬請(qǐng)期待！ 審核編輯 ：李倩