HarmonyOS 鸿蒙Next PhotoPickerComponent拍照后缩略图界面不展示内容

发布于 1周前 作者 phonegap100 来自 鸿蒙OS

HarmonyOS 鸿蒙Next PhotoPickerComponent拍照后缩略图界面不展示内容

拍照完成后在缩略图的界面不显示任何内容,PhotoPickerComponent是不支持这样配置吗?
import {
PhotoPickerComponent,
PickerController,
PickerOptions,
SelectMode
} from ‘@ohos.file.PhotoPickerComponent’;
import { photoAccessHelper } from ‘@kit.MediaLibraryKit’;


@Entry
@Component
struct Index {
context = getContext(this);
pickerOptions = new PickerOptions();
@State pickerController: PickerController = new PickerController()

aboutToAppear(): void {
this.pickerOptions.isSearchSupported = false;
this.pickerOptions.selectMode = SelectMode.SINGLE_SELECT;
this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
this.pickerOptions.isPreviewForSingleSelectionSupported = false;
this.pickerOptions.isPhotoTakingSupported = true;
}

@Builder
previewPhoto() {
PhotoPickerComponent({
pickerOptions: this.pickerOptions,
pickerController: this.pickerController,
})
}

build() {
Column() {
this.previewPhoto()
}
}
}

12 回复

为了你的关注,拼了

试试这个:

import {  
    PhotoPickerComponent,  
    PickerController,  
    PickerOptions,  
    SelectMode  
} from '@ohos.file.PhotoPickerComponent';  
import { photoAccessHelper } from '@kit.MediaLibraryKit';  
import image from '@ohos.multimedia.image';  
import fs from '@ohos.file.fs';  

@Styles  
function imageStyle() {  
  .objectFit(ImageFit.Cover)  
  .borderRadius(8)  
}  

@Component  
struct CustomImagePreview {  
  @Prop uri: string  
  @State imagePixelMap: image.PixelMap | null = null  

  async aboutToAppear() {  
    try {  
      // 异步加载图片  
      const imageSource = await image.createImageSource(this.uri);  
      this.imagePixelMap = await imageSource.createPixelMap({  
        desiredSize: {  
          width: 500,  
          height: 500  
        }  
      });  
    } catch (error) {  
      console.error('Load image failed', error);  
    }  
  }  

  build() {  
    Stack() {  
      if (this.imagePixelMap) {  
        Image(this.imagePixelMap)  
          .width('100%')  
          .height('100%')  
          .imageStyle()  
      } else {  
        Text('图片加载中...')  
          .fontSize(14)  
          .fontColor(Color.Gray)  
      }  
    }  
    .width('100%')  
    .height(300)  
    .backgroundColor(Color.Black)  
  }  
}  

@Entry  
@Component  
struct Index {  
  context = getContext(this);  
  
  pickerOptions: PickerOptions = new PickerOptions();  
  
  @State pickerController: PickerController = new PickerController();  
  
  // 存储选择的图片URI数组  
  @State selectedUris: string[] = [];  

  // 当前预览图片索引  
  @State currentPreviewIndex: number = 0;  
  
  // 是否显示预览  
  @State isPreviewVisible: boolean = false;  

  aboutToAppear(): void {  
    // 配置选项  
    this.pickerOptions.isSearchSupported = false;  
    
    // 支持多选  
    this.pickerOptions.selectMode = SelectMode.MULTI_SELECT;  
    this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;  
    
    // 关闭系统预览  
    this.pickerOptions.isPreviewForSingleSelectionSupported = false;  
    this.pickerOptions.isPhotoTakingSupported = true;  
  }  

  // 自定义预览方法  
  private previewImage(index: number) {  
    this.currentPreviewIndex = index;  
    this.isPreviewVisible = true;  
  }  

  // 关闭预览  
  private closePreview() {  
    this.isPreviewVisible = false;  
  }  

  build() {  
    Stack({ alignContent: Alignment.Bottom }) {  
      Column() {  
        // 照片选择组件  
        PhotoPickerComponent({  
          pickerOptions: this.pickerOptions,  
          pickerController: this.pickerController,  
          
          onSelect: (selectResult) => {  
            if (selectResult && selectResult.length > 0) {  
              // 存储所有选择的图片URI  
              this.selectedUris = selectResult.map(item => item.uri);  
            }  
          },  
          
          onCancel: () => {  
            console.log('Photo selection cancelled');  
          }  
        })  

        // 自定义缩略图列表  
        if (this.selectedUris.length > 0) {  
          Scroll() {  
            Row() {  
              ForEach(this.selectedUris, (uri: string, index: number) => {  
                Image(uri)  
                  .width(100)  
                  .height(100)  
                  .margin(5)  
                  .borderRadius(8)  
                  .onClick(() => this.previewImage(index))  
              })  
            }  
          }  
          .scrollable(ScrollDirection.Horizontal)  
          .scrollBar(BarState.Off)  
        }  
      }  
      .width('100%')  
      .height('100%')  

      // 自定义全屏预览  
      if (this.isPreviewVisible) {  
        Stack({ alignContent: Alignment.TopEnd }) {  
          CustomImagePreview({ uri: this.selectedUris[this.currentPreviewIndex] })  

          Button('关闭')  
            .position({ x: '90%', y: 50 })  
            .onClick(() => this.closePreview())  
        }  
        .width('100%')  
        .height('100%')  
        .backgroundColor(Color.Black)  
      }  
    }  
  }  
}

有点小糊涂,试试这个,可以增加一些功能:

import {  
    PhotoPickerComponent,  
    PickerController,  
    PickerOptions,  
    SelectMode  
} from '@ohos.file.PhotoPickerComponent';  
import { photoAccessHelper } from '@kit.MediaLibraryKit';  

@Entry  
@Component  
struct Index {  
  context = getContext(this);  
  
  // 完整的Picker配置  
  pickerOptions: PickerOptions = new PickerOptions();  
  
  @State pickerController: PickerController = new PickerController();  
  
  // 用于存储选择的图片URI  
  @State selectedUri: string = '';  

  aboutToAppear(): void {  
    // 详细的配置  
    this.pickerOptions.isSearchSupported = false;  
    this.pickerOptions.selectMode = SelectMode.SINGLE_SELECT;  
    this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;  
    
    // 重要:启用预览和拍照  
    this.pickerOptions.isPreviewForSingleSelectionSupported = true;  
    this.pickerOptions.isPhotoTakingSupported = true;  
  }  

  build() {  
    Column() {  
      // 使用PhotoPickerComponent并添加onSelect回调  
      PhotoPickerComponent({  
        pickerOptions: this.pickerOptions,  
        pickerController: this.pickerController,  
        
        // 关键:添加onSelect回调  
        onSelect: (selectResult) => {  
          if (selectResult && selectResult.length > 0) {  
            // 存储选择的图片URI  
            this.selectedUri = selectResult[0].uri;  
            
            // 可选:打印选择的图片信息  
            console.log('Selected Image URI:', this.selectedUri);  
          }  
        },  
        
        // 可选:添加其他回调  
        onCancel: () => {  
          console.log('Photo selection cancelled');  
        }  
      })  

      // 可选:显示选择的图片  
      if (this.selectedUri) {  
        Image(this.selectedUri)  
          .width(200)  
          .height(200)  
          .margin(10)  
      }  
    }  
  }  
}

我需要关闭PhotoPickerComponent的预览功能自己实现只保留PhotoPickerComponent查看相册缩略图和拍照的功能

试下我的代码:

import {  

    PhotoPickerComponent,  

    PickerController,  

    PickerOptions,  

    SelectMode  

} from '[@ohos](/user/ohos).file.PhotoPickerComponent';  

import { photoAccessHelper } from '[@kit](/user/kit).MediaLibraryKit';  

[@Entry](/user/Entry)  

[@Component](/user/Component)  

struct Index {  

  context = getContext(this);  

  pickerOptions = new PickerOptions();  

  [@State](/user/State) pickerController: PickerController = new PickerController()  

  [@State](/user/State) selectedUri: string = ''  

  aboutToAppear(): void {  

    this.pickerOptions.isSearchSupported = false;  

    this.pickerOptions.selectMode = SelectMode.SINGLE_SELECT;  

    this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;  

    this.pickerOptions.isPreviewForSingleSelectionSupported = true; // 修改为 true  

    this.pickerOptions.isPhotoTakingSupported = true;  

  }  

  // 添加一个方法来触发照片选择或拍照  

  openPhotoPicker() {  

    this.pickerController.select((err, result) => {  

      if (!err && result && result.length > 0) {  

        this.selectedUri = result[0].uri;  

      }  

    });  

  }  

  build() {  

    Column() {  

      Button('选择/拍照')  

        .onClick(() => this.openPhotoPicker())  

      if (this.selectedUri) {  

        Image(this.selectedUri)  

          .width(200)  

          .height(200)  

      }  

      PhotoPickerComponent({  

        pickerOptions: this.pickerOptions,  

        pickerController: this.pickerController,  

      })  

    }  

  }  

}

pickerController上没有select方法吧, 我代码中提供的options配置不需要更改,并且也不需要单独提供按钮来出发选择或者拍照,只需要使用PhotoPickerComponent提供的能力,不然的话应该是无法复现我所遇到的情况

找HarmonyOS工作还需要会Flutter的哦,有需要Flutter教程的可以学学大地老师的教程,很不错,B站免费学的哦:https://www.bilibili.com/video/BV1S4411E7LY/?p=17

cke_111.png

是指这个缩略图吗?我使用你的代码拍照之后,缩略图正常的,本来只有一个图片,拍照之后,增加了一个,所以会不会是系统版本问题,我手机系统是5.0.0.107版本

找HarmonyOS工作还需要会Flutter的哦,有需要Flutter教程的可以学学大地老师的教程,很不错,B站免费学的哦:https://www.bilibili.com/video/BV1S4411E7LY/?p=17

我的是5.0.0.102

那可以升级下

有帮助的话帮忙点个关注哦

针对HarmonyOS 鸿蒙Next中PhotoPickerComponent拍照后缩略图界面不展示内容的问题,作为IT专家,这里提供一些可能的原因及解决方案:

  1. 系统兼容性问题:确保您的设备已升级到HarmonyOS的最新版本,部分软件可能还在适配鸿蒙Next的新系统架构,导致显示异常。
  2. 权限设置问题:检查相机和相册应用的权限设置是否完整,确保PhotoPickerComponent有足够的权限访问相机和存储。
  3. 组件使用问题:确认PhotoPickerComponent的使用流程和方法是否正确,如创建相机实例、获取输出流、调用预览功能等步骤是否遵循官方文档指导。特别是isPreviewForSingleSelectionSupported属性,如果设置为false,则单选模式下不支持预览。
  4. 缓存或冲突问题:尝试重启设备或清除相机及相册应用的缓存,同时检查是否有第三方应用冲突或影响。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部