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 
}

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

分享
微博
QQ
微信
回复
2024-09-04 17:40:26
相关问题
HarmonyOS Web加载网页白屏
414浏览 • 1回复 待解决
Web加载网页获取当前页面url
1066浏览 • 1回复 待解决
如何对网页进行加载
432浏览 • 1回复 待解决
HarmonyOS 拉起相机拍照
277浏览 待解决
HarmonyOS 相机拍照模糊
400浏览 • 0回复 待解决
使用Web组件加载网页,显示空白。
372浏览 • 1回复 待解决
HarmonyOS 相机-拍照之后预览
146浏览 • 1回复 待解决
HarmonyOS APP无法打开相机拍照
305浏览 • 1回复 待解决
HarmonyOS上如何控制相机拍照
55浏览 • 0回复 待解决
打开相机:直接使用相机拍照能力
1487浏览 • 1回复 待解决
关于如何使用相机拍照模块拍照问题
1683浏览 • 0回复 待解决
拉起相机或者图库的demo提供
107浏览 • 1回复 待解决