HarmonyOS 通过photoPicker.select打开图库选择某个视频后,如何获取对应的缩略图?

HarmonyOS 通过photoPicker.select打开图库选择某个视频后,如何获取对应的缩略图?

HarmonyOS
2024-08-22 18:51:58
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
superinsect

1、获取图片和视频缩略图指南: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/photoaccesshelper-resource-guidelines-V5#ZH-CN_TOPIC_0000001914995186__%E8%8E%B7%E5%8F%96%E5%9B%BE%E7%89%87%E5%92%8C%E8%A7%86%E9%A2%91%E7%BC%A9%E7%95%A5%E5%9B%BE

2、@ohos.file.photoAccessHelper (相册管理模块)的getThumbnail方法:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-photoaccesshelper-V5#ZH-CN_TOPIC_0000001930677569__getthumbnail

demo如下,包含了播放功能。

import { common } from '@kit.AbilityKit'; 
import { fileUri, picker } from '@kit.CoreFileKit'; 
import fs from '@ohos.file.fs'; 
import { photoAccessHelper } from '@kit.MediaLibraryKit'; 
import { dataSharePredicates } from '@kit.ArkData'; 
import { image } from '@kit.ImageKit'; 
let uri:string = ''; 
@Entry 
@Component 
struct PhotoPage { 
  @State imagePath: string = '' 
  @State pixelMap:image.PixelMap  | undefined = undefined 
  private controller:VideoController | undefined 
  private context = getContext(this) as common.UIAbilityContext; 
  build() { 
    Row() { 
      Column() { 
        Video({ 
          src:this.imagePath, 
          controller: this.controller 
        }).height(300).width('100%').margin({ bottom: 20 }) 
        Button("选择视频") 
          .onClick(() => { 
            this.selectPhoto() 
          }) 
        Image(this.pixelMap).width(300).height(400) 
      }.width('100%') 
    }.height('100%') 
  } 
  selectPhoto() { 
    const photoSelectOptions = new picker.PhotoSelectOptions(); 
    const photoViewPicker = new picker.PhotoViewPicker(); 
    photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.VIDEO_TYPE; // 过滤选择媒体文件类型为IMAGE 
    photoSelectOptions.maxSelectNumber = 1; // 选择媒体文件的最大数目 
    photoViewPicker.select(photoSelectOptions).then((photoSelectResult: picker.PhotoSelectResult) => { 
      const fileUri = photoSelectResult.photoUris[0] 
      uri = fileUri 
      this.getFileInfo(fileUri) 
      this.uriGetAssets() 
    }) 
  } 
  async getFileInfo(filePathString: string) { 
    let resFile = fs.openSync(filePathString, fs.OpenMode.READ_ONLY) 
    const dateStr = (new Date().getTime()).toString() 
    // 临时文件目录 
    let newPath = this.context.filesDir + `/${dateStr + resFile.name}`; 
    // 转化路径 
    fs.copyFileSync(resFile.fd, newPath); 
    // 新的路径 
    let realUri = 'file://' + newPath; 
    this.imagePath = realUri 
    console.log(this.imagePath) 
  } 
  async  uriGetAssets() { 
    try { 
      let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(this.context); 
      let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates(); 
      // 配置查询条件,使用PhotoViewPicker选择图片返回的uri进行查询 
      predicates.equalTo('uri', uri); 
      let fetchOption: photoAccessHelper.FetchOptions = { 
        fetchColumns: [], 
        predicates: predicates 
      }; 
      let fetchResult: photoAccessHelper.FetchResult<photoAccessHelper.PhotoAsset> = await phAccessHelper.getAssets(fetchOption); 
      // 得到uri对应的PhotoAsset对象,读取文件的部分信息 
      const asset: photoAccessHelper.PhotoAsset = await fetchResult.getFirstObject(); 
      console.info('asset displayName: ', asset.displayName); 
      console.info('asset uri: ', asset.uri); 
      console.info('asset photoType: ', asset.photoType); 
      console.info('asset width: ', asset.get(photoAccessHelper.PhotoKeys.WIDTH)); 
      console.info('asset height: ', asset.get(photoAccessHelper.PhotoKeys.HEIGHT)); 
      console.info('asset title: ' + asset.get(photoAccessHelper.PhotoKeys.TITLE)); 
      // 获取缩略图 
      asset.getThumbnail((err, pixelMap) => { 
        if (err == undefined) { 
          this.pixelMap = pixelMap 
          console.info('getThumbnail successful ' + JSON.stringify(pixelMap)); 
        } else { 
          console.error('getThumbnail fail', err); 
        } 
      }); 
    } catch (error){ 
      console.error('uriGetAssets failed with err: ' + JSON.stringify(error)); 
    } 
  } 
}import { common } from '@kit.AbilityKit'; 
import { fileUri, picker } from '@kit.CoreFileKit'; 
import fs from '@ohos.file.fs'; 
import { photoAccessHelper } from '@kit.MediaLibraryKit'; 
import { dataSharePredicates } from '@kit.ArkData'; 
import { image } from '@kit.ImageKit'; 
let uri:string = ''; 
@Entry 
@Component 
struct PhotoPage { 
  @State imagePath: string = '' 
  @State pixelMap:image.PixelMap  | undefined = undefined 
  private controller:VideoController | undefined 
  private context = getContext(this) as common.UIAbilityContext; 
  build() { 
    Row() { 
      Column() { 
        Video({ 
          src:this.imagePath, 
          controller: this.controller 
        }).height(300).width('100%').margin({ bottom: 20 }) 
        Button("选择视频") 
          .onClick(() => { 
            this.selectPhoto() 
          }) 
        Image(this.pixelMap).width(300).height(400) 
      }.width('100%') 
    }.height('100%') 
  } 
  selectPhoto() { 
    const photoSelectOptions = new picker.PhotoSelectOptions(); 
    const photoViewPicker = new picker.PhotoViewPicker(); 
    photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.VIDEO_TYPE; // 过滤选择媒体文件类型为IMAGE 
    photoSelectOptions.maxSelectNumber = 1; // 选择媒体文件的最大数目 
    photoViewPicker.select(photoSelectOptions).then((photoSelectResult: picker.PhotoSelectResult) => { 
      const fileUri = photoSelectResult.photoUris[0] 
      uri = fileUri 
      this.getFileInfo(fileUri) 
      this.uriGetAssets() 
    }) 
  } 
  async getFileInfo(filePathString: string) { 
    let resFile = fs.openSync(filePathString, fs.OpenMode.READ_ONLY) 
    const dateStr = (new Date().getTime()).toString() 
    // 临时文件目录 
    let newPath = this.context.filesDir + `/${dateStr + resFile.name}`; 
    // 转化路径 
    fs.copyFileSync(resFile.fd, newPath); 
    // 新的路径 
    let realUri = 'file://' + newPath; 
    this.imagePath = realUri 
    console.log(this.imagePath) 
  } 
  async  uriGetAssets() { 
    try { 
      let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(this.context); 
      let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates(); 
      // 配置查询条件,使用PhotoViewPicker选择图片返回的uri进行查询 
      predicates.equalTo('uri', uri); 
      let fetchOption: photoAccessHelper.FetchOptions = { 
        fetchColumns: [], 
        predicates: predicates 
      }; 
      let fetchResult: photoAccessHelper.FetchResult<photoAccessHelper.PhotoAsset> = await phAccessHelper.getAssets(fetchOption); 
      // 得到uri对应的PhotoAsset对象,读取文件的部分信息 
      const asset: photoAccessHelper.PhotoAsset = await fetchResult.getFirstObject(); 
      console.info('asset displayName: ', asset.displayName); 
      console.info('asset uri: ', asset.uri); 
      console.info('asset photoType: ', asset.photoType); 
      console.info('asset width: ', asset.get(photoAccessHelper.PhotoKeys.WIDTH)); 
      console.info('asset height: ', asset.get(photoAccessHelper.PhotoKeys.HEIGHT)); 
      console.info('asset title: ' + asset.get(photoAccessHelper.PhotoKeys.TITLE)); 
      // 获取缩略图 
      asset.getThumbnail((err, pixelMap) => { 
        if (err == undefined) { 
          this.pixelMap = pixelMap 
          console.info('getThumbnail successful ' + JSON.stringify(pixelMap)); 
        } else { 
          console.error('getThumbnail fail', err); 
        } 
      }); 
    } catch (error){ 
      console.error('uriGetAssets failed with err: ' + JSON.stringify(error)); 
    } 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
  • 138.
  • 139.
  • 140.
  • 141.
  • 142.
  • 143.
  • 144.
  • 145.
  • 146.
  • 147.
  • 148.
  • 149.
  • 150.
  • 151.
  • 152.
  • 153.
  • 154.
  • 155.
  • 156.
  • 157.
  • 158.
  • 159.
  • 160.
  • 161.
  • 162.
  • 163.
  • 164.
  • 165.
  • 166.
  • 167.
  • 168.
  • 169.
  • 170.
  • 171.
分享
微博
QQ
微信
回复
2024-08-23 17:32:57
相关问题
缩略图如何获取文件缩略图
1353浏览 • 1回复 待解决
HarmonyOS 获取网络视频缩略图
667浏览 • 1回复 待解决
HarmonyOS 视频缩略图问题
636浏览 • 1回复 待解决
HarmonyOS 根据视频路径生成缩略图
666浏览 • 1回复 待解决
鸿蒙能获取图片指定大小缩略图
10237浏览 • 1回复 待解决
HarmonyOS读取视频缩略图问题求助
1276浏览 • 1回复 待解决