相关问题
HarmonyOS 组件截图并保存到系统相册有延迟
748浏览 • 1回复 待解决
HarmonyOS组件截图保存到相册失败,预览图灰色
1310浏览 • 1回复 待解决
HarmonyOS 下载文件并保存到指定目录
1190浏览 • 1回复 待解决
HarmonyOS 组件截图然后保存到相册中后无法显示,尺寸为0
934浏览 • 1回复 待解决
获取网络图片并保存到相册
2851浏览 • 1回复 待解决
HarmonyOS 文件保存,pdf、xlsx文件如何保存到本地
1322浏览 • 1回复 待解决
HarmonyOS 音频录制并保存至用户文件目录, 无法播放
747浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何将图片保存到系统文件管理器并展示保存路径?
1064浏览 • 1回复 待解决
log日志如何自动保存到文件?
284浏览 • 0回复 待解决
HarmonyOS media图片文件保存到文件目录中
854浏览 • 1回复 待解决
沙箱文件如何保存到系统文件管理里?
597浏览 • 1回复 已解决
如何将Pixmap保存到本地文件?
1223浏览 • 1回复 待解决
HarmonyOS Resource的文件如何保存到沙箱
929浏览 • 1回复 待解决
拍照后图片保存到本地后能打开并显示
670浏览 • 1回复 待解决
HarmonyOS 如何将文件管理器中的文件保存到应用沙箱
1216浏览 • 1回复 待解决
组件截图怎么保存将pixelMap存储到系统相册或应用沙箱
1926浏览 • 1回复 待解决
HarmonyOS 如何实现获取用户头像保存到系统相册
1388浏览 • 1回复 待解决
HarmonyOS 如何将指定布局内容保存为图片,并保存到相册
1355浏览 • 1回复 待解决
HarmonyOS 文件下载保存到外部存储问题
864浏览 • 1回复 待解决
HarmonyOS 有没有保存到相册的组件
756浏览 • 1回复 待解决
HarmonyOS APP内加载了在线的PDF文档,如何实现将在线PDF并保存到手机本地目录
1020浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何下载网络图片并保存到手机?
1218浏览 • 1回复 待解决
把应用沙箱下的图片保存到图库
2294浏览 • 1回复 待解决
如何使用Web组件下载pdf文件并展示给用户
1523浏览 • 1回复 待解决
HarmonyOS PixelMap保存到文件时报错PackedSize outside size
1302浏览 • 1回复 待解决
在浏览器的工具栏中,截图是常见的功能之一。本文介绍如何使用OH API10新增的componentSnapshot接口实现应用内组件截图,然后将截屏接口输出的图片通过FilePicker保存到系统文管,或者通过photoAccessHelper 保存到系统图库。
效果呈现
运行环境
SDK API 10
实现思路
场景一:截图通过FilePicker保存到系统文管
组件截图使用componentSnapshot接口即可,但是参考文档文件管理-保存用户文件过程中,发现在开发者视角下将图片保存到系统文管存在2个问题:
1. photoViewPicker.save 拉起FilePicker系统文管界面,然后用户选择目标文件夹进行文件保存,保存成功后,返回保存图片文件的uri。如下文档示例:
根据photoViewPicker.save接口规范,返回的uri权限是读写权限,
不能在picker的回调里直接使用此uri进行打开文件操作,需要定义一个全局变量保存uri,使用类似一个按钮去触发打开文件。
但是,应用只有一个截屏按钮,在该按钮的onClick回调中需要执行截屏+拉起FilePicker界面选择目标文件夹+读写图片文件操作。
根据
JS的事件循环,如果在picker回调外使用setTimeout延迟执行获取uri后的文件读写操作,开发者无法确定用户在photoViewPicker.save拉起的文件管理器页面停留多长时间,什么时候picker回调执行结束,延迟执行时间未知。如下代码:
如果用户文件管理器页面操作大于setTimeout的1s,即在picker回调返回之前触发了setTimeout内的读写操作,会由于uri为空而导致文件打开(fs.openSync)时出现
js crash错误。
2.文件写操作接口为writeSync(fd: number, buffer: ArrayBuffer | string),截屏接口输出为PixelMap图片对象,开发者的做法可能会根据接口入参的类型,将PixelMap直接转为ArrayBuffer,然后将ArrayBuffer直接进行读写:
但是这种做法虽然可以成功保存图片,但是会导致图片格式错误,需要一个完整的示例去指导用户进行读写图片操作。
针对问题1,使用@Watch监听photoViewPicker.save返回的uri,当uri更新之后再进行图片文件读写操作,这样可以避免uri为空的js crash错误。
针对问题2,需要先将PixelMap图片对象编码成不同格式的存档图片,然后再用于后续处理,如保存、传输等。
场景二:通过photoAccessHelper 保存到系统图库
由于创建相册为system接口,三方应用不可调用,所本场景只使用public接口保存在图库默认的相册里。更多接口介绍可查看相册管理相关文档。
方案介绍
场景一方案
1. componentSnapshot.get("root"),应用内组件截图,输出PixelMap图片对象
2. photoViewPicker.save(photoSaveOptions),拉起FilePicker选择目标文件夹,保存图片文件,输出文件保存的uri
3. @Watch监听photoViewPicker.save返回的uri,当uri更新之后再进行图片文件读写操作
场景二方案
类似于场景一:
1.componentSnapshot.get(“root”),应用内组件截图,输出PixelMap图片对象。
2.phAccessHelper.createAsset,调用createAsset接口创建图片资源,拿到返回的uri。
3。@Watch监听photoViewPicker.save返回的uri,当uri更新之后再进行图片文件读写操作。