HarmonyOS web加载网页用input获取手机图库和相机进行拍照

在web加载的网页中需要用到input来获取手机图库和相机拍照,如何实现该功能交互。

HarmonyOS
2024-09-04 11:43:23
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
superinsect

H5的 <input type="file" /> 在web组件里不能直接获取到相册信息,可以尝试以下方案:

1. 在ArkTS跟webview里的js交互成功后用选择模式拉起photoPicker,相关api参考官网:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-file-picker-V5

2. 选择文件之后需要web组件拦截图片加载的沙箱地址,以下是图片处理这部分的代码:

Web({xxxx}) 
  .onInterceptRequest((event) => { 
    if (!event) { 
      return null 
    } 
    const url = event?.request?.getRequestUrl() 
    if (isFileUri(url)) { 
      const path = url 
      const file = fs.openSync(path, fs.OpenMode.READ_ONLY) 
      const fd = file.fd 
      const responseWeb = new WebResourceResponse() 
      responseWeb.setResponseData(fd) 
      responseWeb.setResponseCode(200) 
      responseWeb.setReasonMessage('OK') 
      responseWeb.setResponseIsReady(true) 
      console.info(TAG, `responseWeb`) 
      return responseWeb 
    } 
    return null 
  }) 
export function isFileUri (path: string): boolean { 
  if (path && typeof(path) === 'string' && (path.startsWith('file://') || path.startsWith('datashare://'))) { 
    return true 
  } 
  return false 
}
  • 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.

最后用HarmonyOS的文件管理方法去读取文件内容,然后将文件内容传给webview,webview就能显示出来图片了。

分享
微博
QQ
微信
回复
2024-09-04 17:40:26
相关问题
HarmonyOS Web加载网页白屏
1366浏览 • 1回复 待解决
Web加载网页获取当前页面url
2206浏览 • 1回复 待解决
HarmonyOS 如何调用系统相机进行拍照
1353浏览 • 1回复 待解决
如何对网页进行加载
1623浏览 • 1回复 待解决
HarmonyOS 使用web控件加载网页出现空白
1519浏览 • 1回复 待解决
HarmonyOS 相机同时支持拍照录像
875浏览 • 1回复 待解决
HarmonyOS h5调用系统相机进行拍照
825浏览 • 1回复 待解决
HarmonyOS 相机拍照选择相册功能demo
678浏览 • 1回复 待解决
使用Web组件加载网页,显示空白。
1403浏览 • 1回复 待解决
HarmonyOS 相机拍照模糊
1298浏览 • 0回复 待解决
HarmonyOS 拉起相机拍照
979浏览 待解决
HarmonyOS 如何设置拍照后不存图库
780浏览 • 1回复 待解决
如何同时启动相机拍照录像选项?
883浏览 • 0回复 待解决