HarmonyOS鸿蒙Next中通过截图存入相册的路径，调用图库预览该图片

HarmonyOS鸿蒙Next中通过截图存入相册的路径，调用图库预览该图片

鸿蒙怎么实现相册路径图片文件通过图库预览打开

6 回复

行业实践的官网上有很多不同行业的相关的demo，这个场景应该在拍摄美化行业里面有一些参考，比如参考这个demo：

图片添加贴纸并保存

里面的实现思路是通过PhotoViewPicker拉起图库（相册），读取选中图片的数据。

更多关于HarmonyOS鸿蒙Next中通过截图存入相册的路径，调用图库预览该图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


通过PhotoViewPicker选择图片或使用PhotoAccessHelper查询相册资源，获取系统图库可识别的URI

import { picker } from '@kit.MediaLibraryKit';

const photoViewPicker = new picker.PhotoViewPicker();

const result = await photoViewPicker.select({
  MIMEType: picker.PhotoViewMIMETypes.IMAGE_TYPE,
  maxSelectNumber: 1
});

const uri = result.photoUris;

在module.json5中声明权限：

"requestPermissions": [
  {
    "name": "ohos.permission.READ_IMAGEVIDEO",
    "reason": "$string:reason"
  }
]

通过startAbility跳转至系统图库的预览界面：

import { common } from '@kit.AbilityKit';

const context = getContext(this) as common.UIAbilityContext;

context.startAbility({
  action: 'ohos.want.action.viewData',
  parameters: { uri: uri },
  abilityName: 'com.huawei.hmos.photos.MainAbility'
});

//1.通过媒体库接口获取资源

const fetchOptions = { predicates: new DataSharePredicates() };
const fetchResult = await phAccessHelper.getAssets(fetchOptions);
const photoAsset = await fetchResult.getFirstObject();

//2.拉起系统图库预览

const picker = new photoViewPicker.PhotoViewPicker();
picker.select({ 
  type: photoViewPicker.PhotoViewMimeType.IMAGE,
  uri: photoAsset.uri // 传入保存后的URI
});

确保 module.json5 中 abilities 标签配置了 label 和 icon，否则 showAssetsCreationDialog 弹窗会异常：

"abilities": [{
  "name": "EntryAbility",
  "icon": "$media:icon",
  "label": "$string:entryAbility_label"
}]

在 module.json5 中添加存储权限：

"requestPermissions": [
  { "name": "ohos.permission.READ_IMAGEVIDEO" },
  { "name": "ohos.permission.WRITE_IMAGEVIDEO" }
]

import { photoAccessHelper } from '@kit.MediaLibraryKit';

// 弹出图片选择器方法
async openPicker() {
  this.uri = '';
  try {
    // 设置图片选择器选项
    const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
    // 限制只能选择一张图片
    photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
    photoSelectOptions.maxSelectNumber = 1;
    // 创建并实例化图片选择器
    const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
    // 选择图片并获取图片URI
    let uris: photoAccessHelper.PhotoSelectResult = await photoViewPicker.select(photoSelectOptions);
    if (!uris || uris.photoUris.length === 0) {
      return;
    }
    // 获取选中图片的第一张URI
    let uri: string = uris.photoUris[0];
    this.uri = uri;
    // this.model.setImage(uri).setFrameWidth(1000).setFrameRatio(1);
  } catch (e) {
    hilog.error(0x0000, 'Home', 'openPicker' + JSON.stringify(e));
  }
}

试试这个

在HarmonyOS Next中，截图存入相册的路径为：/storage/media/100/local/files/Pictures/Screenshots/。调用图库预览该图片需使用@ohos.file.picker和@ohos.file.fs模块。首先通过fs.access确认文件存在，然后使用photoViewPicker.select方法传入文件URI进行预览。示例代码片段：

import picker from '@ohos.file.picker';
import fs from '@ohos.file.fs';

let photoViewPicker = new picker.PhotoViewPicker();
photoViewPicker.select({ 
  uri: 'file:///storage/media/100/local/files/Pictures/Screenshots/example.jpg' 
});

在HarmonyOS Next中，可以通过以下方式实现截图存入相册并调用图库预览：

  1. 保存截图到相册：
import picker from '[@ohos](/user/ohos).file.picker';
import fs from '[@ohos](/user/ohos).file.fs';

async function saveToGallery() {
  // 1. 使用picker选择保存路径
  const photoSaveOptions = new picker.PhotoSaveOptions();
  photoSaveOptions.newFileNames = ["screenshot.png"];
  const photoSave = picker.createPhotoSavePicker();
  const photoSaveResult = await photoSave.save(photoSaveOptions);

  // 2. 将截图文件保存到相册
  if (photoSaveResult && photoSaveResult.length > 0) {
    const uri = photoSaveResult[0];
    // 这里需要替换为实际的截图文件路径
    const screenshotPath = "path/to/your/screenshot.png";
    await fs.copy(screenshotPath, uri);
  }
}
  1. 调用图库预览图片：
import wantConstant from '[@ohos](/user/ohos).app.ability.wantConstant';
import wantAgent from '[@ohos](/user/ohos).app.ability.wantAgent';

async function previewImage(imageUri: string) {
  let wantAgentInfo = {
    wants: [
      {
        action: "ohos.want.action.VIEW_DATA",
        uri: imageUri,
        type: "image/*",
        flags: wantConstant.Flags.FLAG_ABILITY_NEW_MISSION
      }
    ],
    operationType: wantAgent.OperationType.START_ABILITY
  };

  await wantAgent.getWantAgent(wantAgentInfo).then((agent) => {
    wantAgent.trigger(agent);
  });
}

注意事项：

  1. 需要申请以下权限：
"requestPermissions": [
  "ohos.permission.READ_MEDIA",
  "ohos.permission.WRITE_MEDIA"
]

  1. 对于HarmonyOS Next，uri格式通常以"file://"或"datashare://"开头

  2. 如果使用媒体库管理，也可以使用@ohos.multimedia.mediaLibrary API来操作相册文件，

回到顶部