鸿蒙开发中快速获取相册图片的缩略图

开发背景

在日常开发中，常见选择图库照片，或者视频，进行列表显示。例如微信朋友圈9宫格，相册等。该情况下，一般都是加载图片的缩略图。点击item后加载图片跟视频详情。

技术方案

1、直接获取pixmap

javascript 复制代码

async function getThumbnail(phAccessHelper: photoAccessHelper.PhotoAccessHelper) {
  let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates();
  let fetchOptions: photoAccessHelper.FetchOptions = {
    fetchColumns: [],
    predicates: predicates
  };

  try {
    let fetchResult: photoAccessHelper.FetchResult<photoAccessHelper.PhotoAsset> = await phAccessHelper.getAssets(fetchOptions);
    let photoAsset: photoAccessHelper.PhotoAsset = await fetchResult.getFirstObject();
    console.info('getAssets photoAsset.displayName : ' + photoAsset.displayName);
    let size: image.Size = { width: 720, height: 720 }; // 控制缩略图显示大小
    let pixelMap: image.PixelMap =  await photoAsset.getThumbnail(size);
    let imageInfo: image.ImageInfo = await pixelMap.getImageInfo()
    console.info('getThumbnail successful, pixelMap ImageInfo size: ' + JSON.stringify(imageInfo.size));
    fetchResult.close();
  } catch (err) {
    console.error('getThumbnail failed with err: ' + err);
  }
}

该可以控制缩略图大小，获取的是pixelMap 需要单独处理下内存加载问题，不推荐在列表中显示

2、直接读取相册数据库中的图片的缩略图

typescript 复制代码

export function getThumbnailJpgURI(sourceUri:string,modifiedDate:number,path?:string) :string{
  return `${sourceUri}?timestampAPP=${modifiedDate}&oper=thumbnail&width=0&height=0&path=${path ?? ''}`;
}

该方案提供的缩略图uri 可以直接设置在Image组件中，读取的是图库数据库中的缩略图，所以不需要单独处理内存，较为推荐。ps：该方法中uri 不是图片的filepath,是图库提供的uri路径。只有保存在图库的图片或者视频才可以使用该方法。 uri例子:file://media/Photo/59/IMG_1761224543_046/IMG_046.webp 跟filepath不是一个东西

代码实现

index 页面

scss 复制代码

import { getImageUris, getThumbnailJpgURI, getVideoUris } from '../utils/ImageUtils';

@Entry
@Component
struct Index {
  @State @Watch('getImageUri') imgUri:string = ""
  @State @Watch('getVideoUri') videoUri:string = ""
  getImageUri() {
    console.log("lsk 图片uri"+this.imgUri)
  }
  getVideoUri() {
    console.log("lsk 视频uri"+this.imgUri)
  }
  build() {
    Column({ space: 10 }) {
      Row({space: 20}) {
     Column({space: 10}){
        Text("图片的缩略图").fontSize(15)
       // 图片的
       Image(this.imgUri?getThumbnailJpgURI(this.imgUri,new Date().getTime()):$r('app.media.default_picture'))
         .width(100)
         .aspectRatio(1)
         .objectFit(ImageFit.Cover)
     }
        Column({space: 10}){
          Text("视频的缩略图").fontSize(15)
          // 图片的
          Image(this.videoUri?getThumbnailJpgURI(this.videoUri,new Date().getTime()):$r('app.media.default_video'))
            .width(100)
            .aspectRatio(1)
            .objectFit(ImageFit.Cover)
        }
      }
      Button('获取图片uri').width('80%').height(40).onClick(async () => {
        getImageUris((uris) => {
          if (uris.length >= 0) {
            this.imgUri = uris[0]
          }
     })
      })
        .margin({top: 30})
      Button('获取视频uri').width('80%').height(40).onClick(async () => {
        getVideoUris((uris) => {
          if (uris.length >= 0) {
            this.videoUri = uris[0]
          }
     })
      })
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

ImageUtil 代码

ini 复制代码

/**
 * 获取图片的uris
 * @returns
 */
export  function getImageUris(callback:(uris:string[])=>void): void {
  const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
  photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE。
  photoSelectOptions.maxSelectNumber = 100; // 选择媒体文件的最大数目。
  let uris: Array<string> = [];
  const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
  photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
    uris = photoSelectResult.photoUris;
    callback(uris);
    console.info('lsk photo  uris:' + uris);
  }).catch((err: BusinessError) => {
    console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
  })
}

```
/**
 * 获取视频的uris
 * @returns
 */
export  function getVideoUris(callback:(uris:string[])=>void) {
  const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
  photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.VIDEO_TYPE; // 过滤选择媒体文件类型为IMAGE。
  photoSelectOptions.maxSelectNumber = 100; // 选择媒体文件的最大数目。
  let uris: Array<string> = [];
  const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
  photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
    uris = photoSelectResult.photoUris;
    callback(uris);
  }).catch((err: BusinessError) => {
    console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
  })
}

/**
 * 获取缩略图uri
 */
export function getThumbnailJpgURI(sourceUri:string,modifiedDate:number,path?:string) :string{
  return `${sourceUri}?timestampAPP=${modifiedDate}&oper=thumbnail&width=0&height=0&path=${path ?? ''}`;
}
```