HarmonyOS鸿蒙Next中解决使用授权弹窗showAssetsCreationDialog保存图片到相册，预览界面存在空白方框问题，附带完整解决方式

HarmonyOS鸿蒙Next中解决使用授权弹窗showAssetsCreationDialog保存图片到相册，预览界面存在空白方框问题，附带完整解决方式

1. 使用showAssetsCreationDialog 弹窗保存图片的时候，预览界面是空白

鉴于解决方式零零散散的，解决起来很麻烦，很繁琐特此收集解决方式归整记录

2. 解决方式

2.1 需要使用 getUriFromPath() 方法把你要处理的沙箱路径包裹一下

let srcFileUri = fileUri.getUriFromPath(sandboxPath);

2.2 如果沙箱路径不正确，也会导致预览图出不来，关于沙箱路径的获取方式如下代码

async getSandboxPath(pixelMap: PixelMap, context: Context): Promise<string> {
    // 获取应用文件路径
    let filesDir: string = context.cacheDir;
    let picName = '/tempImage' + new Date().getTime() + '.jpg';
    // 新建并打开文件
    let file = fs.openSync(filesDir + picName, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
    // 创建图像编码ImagePacker对象
    const imagePackerApi = image.createImagePacker();
    // 设置编码输出流和编码参数。format为图像的编码格式；quality为图像质量，范围从0-100，100为最佳质量
    const options: image.PackingOption = { format: 'image/jpeg', quality: 98 };
    await imagePackerApi.packToFile(pixelMap, file.fd, options);
    return file.path;
}

2.3 弹窗打开同意授权保存沙箱照片到媒体

const sandboxPath = await PermissionUtils.getSandboxPath(this.pixelMap!, this.context);
// 获取相册的保存路径
let srcFileUri = fileUri.getUriFromPath(sandboxPath);
// 指定待保存到媒体库的位于应用沙箱的图片uri。
let srcFileUris: Array<string> = [
  srcFileUri
];
let desFileUris: Array<string> = await phAccessHelper.showAssetsCreationDialog(srcFileUris, photoCreationConfigs);
  // 将来源于应用沙箱的照片内容写入媒体库的目标uri。
  let desFile: fileIo.File = await fileIo.open(desFileUris[0], fileIo.OpenMode.WRITE_ONLY);
  let srcFile: fileIo.File = await fileIo.open(srcFileUri, fileIo.OpenMode.READ_ONLY);
  await fileIo.copyFile(srcFile.fd, desFile.fd);
  fileIo.closeSync(srcFile);
  fileIo.closeSync(desFile);
  this.getUIContext().getPromptAction().showToast({ message: $r('app.string.saved_to_album') });

最终预览图正常显示


更多关于HarmonyOS鸿蒙Next中解决使用授权弹窗showAssetsCreationDialog保存图片到相册，预览界面存在空白方框问题，附带完整解决方式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，使用showAssetsCreationDialog保存图片到相册时出现空白方框问题，可通过以下方式解决：

  1. 确保调用showAssetsCreationDialog前图片已完整加载
  2. 检查uri路径是否正确
  3. 在保存前调用mediaLibrary.getFileAssets()验证文件可访问性

示例代码：

let media = mediaLibrary.getMediaLibrary(context)
let fileAsset = await media.createAsset(mediaLibrary.MediaType.IMAGE, "test.jpg", uri)
// 确保uri有效后再调用弹窗

更多关于HarmonyOS鸿蒙Next中解决使用授权弹窗showAssetsCreationDialog保存图片到相册，预览界面存在空白方框问题，附带完整解决方式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


感谢分享这个完整的解决方案！针对HarmonyOS Next中使用showAssetsCreationDialog保存图片时预览界面出现空白方框的问题，您的方案确实提供了很好的解决思路。

关键点总结：

  1. 必须使用fileUri.getUriFromPath()方法处理沙箱路径
  2. 正确的沙箱路径获取方式很关键
  3. 完整的流程包括：创建临时文件->编码图像->获取URI->显示授权弹窗->保存到相册

这个方案很好地解决了预览空白的问题，同时也处理了文件权限和路径转换等常见痛点。代码结构清晰，包含了错误处理和用户反馈，是一个完整的实现方案。

对于遇到类似问题的开发者来说，这个方案可以直接参考使用，避免了零散查找解决方案的麻烦。特别是getUriFromPath()的使用和沙箱路径处理的部分，是解决问题的关键所在。

回到顶部