HarmonyOS 如何提升Image渲染速度？

Question

测试发现，在Image在渲染尺寸较大的图片时渲染的较慢，求助有什么加快的方式吗？

如下示例所示，从 this.url = photoUri; 后，到页面出现图片，这中间时间较长 （图片\>10M）

求助有什么加快的方式吗。

import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { picker } from '@kit.CoreFileKit';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State url: string = '';

  add() {
    photoSelect(1, 'image').then((PhotoSelectResult: picker.PhotoSelectResult) => {
      for (let index = 0; index < PhotoSelectResult.photoUris.length; index++) {
        const photoUri = PhotoSelectResult.photoUris[index];
        this.url = photoUri;
      }
    })
  }

  build() {
    Row() {
      Button('111111111111111111111').onClick(() => {
        this.add();
      })
      Image(this.url)
        .interpolation(ImageInterpolation.Low)
        .width(64)
        .height(64)
    }
    .width('100%')
    .height('100%')
  }
}

export function photoSelect(count: number, type: string = 'image'): Promise<photoAccessHelper.PhotoSelectResult> {
  return new Promise((resolve, reject) => {
    try {
      let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
      if (type === 'image') {
        PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
      } else if (type === 'video') {
        PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.VIDEO_TYPE;
      }
      PhotoSelectOptions.maxSelectNumber = count;
      let photoPicker = new photoAccessHelper.PhotoViewPicker();
      photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
        resolve(PhotoSelectResult)
      }).catch((err: BusinessError) => {

        reject(null);
      });
    } catch (error) {
      let err: BusinessError = error as BusinessError;
      reject(null);
    }
  })
}

Answer 1

可以尝试Image组件提供预下载图片能力

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-system-app-V5\#setimagerawdatacachesize7

// app.ets
import app, { AppResponse } from '@system.app'
export default class OnC {
  onCreate() {
    app.setImageCacheCount(100) // 设置解码后图片内存缓存上限为100张
    console.info('Application onCreate')
  },
  onDestroy() {
    console.info('Application onDestroy')
  },
}

app.setImageRawDataCacheSize(/* size */)

设置内存中缓存解码前图片数据的大小上限，单位为字节，提升再次加载同源图片的加载速度

// app.ets
import app, { AppResponse } from '@system.app'
export default class OnC {
  onCreate() {
    app.setImageRawDataCacheSize(104857600)
    // 设置解码前图片数据内存缓存上限为100MB (100MB=100*1024*1024B=104857600B)
    console.info('Application onCreate')
  },
  onDestroy() {
    console.info('Application onDestroy')
  },
}