HarmonyOS 鸿蒙Next 开发，webview 中调用鸿蒙原生拍照功能并在拍照成功后返回 file:// URI 地址，在 webview H5 中展示该 URI 地址

发布于 1周前 作者 zlyuanteng 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 开发，webview 中调用鸿蒙原生拍照功能并在拍照成功后返回 file:// URI 地址，在 webview H5 中展示该 URI 地址

鸿蒙next webview 内嵌的h5 地址，调用鸿蒙原生 拍照、拍摄视频，拍照和拍摄视频返回如下格式: 拍照返回:file://media/Photo/296/IMG_1727660839_245/IMG_20240930_094539.jpg 拍摄视频返回:file://media/Photo/295/VID_1727660758_049/VID_20240930_094426.mp4  请问该地址 如何在h5 站点中展示，目前我使用了base64的方式，但是该方式预览时特别卡，有没有其它方式 在webview 中展示 展示 图片和视频

Harmonyos Next教程
2 回复

你好 需要获取绝对路径file://media/Photo/296/IMG_1727660839_245/IMG_20240930_094539.jpg这种需要转成沙箱路径 然后在进行web加载 H5中不能直接使用沙箱路径显示图片，可以将图片转为base64显示

可参考如下示例：

本示例介绍如何在HTML页面中拉起原生相机进行拍照，并获取返回的图片。

https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/webgetcameraimage

/******/ H5中不能直接使用沙箱路径显示图片，可以将图片转为base64显示。

nativeCamera参考如下代码：

nativeCamera(args: string, handler: CompleteHandler)
{
    PickerUtil.camera().then((uri) => {
        console.debug("测试相机2", uri)
        const context = getContext(this) as common.UIAbilityContext;
        let sanFile = fs.openSync(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
        const destPath = `${context.filesDir}/test${new Date().getTime()}.jpg`;
        fs.copyFileSync(sanFile.fd, destPath);
        let array: ArrayBuffer = new ArrayBuffer(fs.statSync(sanFile.fd).size)
        fs.readSync(sanFile.fd, array)
        let unit = new Uint8Array(array)
        let base64 = new util.Base64Helper();
        let base64Str = "data:image/png;base64," + base64.encodeToStringSync(unit);
        handler.complete(base64Str)
        console.debug("测试相机2", destPath, base64Str)
    }).catch((err: BusinessError) => {
        console.debug("测试相机异常", JSON.stringify(err))
    })
}

你好 如果不转成base64 获取绝对路径直接用web加载也行

还可以参考这样 h5加载相册图片需要转成流 类似这样

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width" charset="utf-8">
    </head>
    <script>
        function onFileSelect(input) {
            var file = input.files[0];
            console.log();
            if(window.FileReader){
            var fr = new FileReader();
            fr.readAsDataURL(file);
            fr.onloadend = function(){
                document.getElementById("img").src = fr.result;
            }
            }
        }
    </script>
    <body>
        <img style="width: 200px" id="img" src="">
        <form id="upload-form" enctype="multipart/form-data">
            <input type="file" id="upload" accept="image/*" name="upload" onchange="onFileSelect(this)" />
            <input type="file" accept="image/*" capture="camera" />
        </form>
    </body>
</html>

在HarmonyOS鸿蒙Next开发中，要在webview中调用鸿蒙原生拍照功能并在拍照成功后返回file:// URI 地址，并在webview H5中展示该URI地址，你可以通过以下步骤实现：

  1. 创建拍照功能接口：首先，在鸿蒙原生代码中创建一个拍照功能接口，通过Intent或Ability启动拍照界面，并在拍照完成后获取图片的file:// URI。

  2. 传递URI给webview：拍照成功后，将图片的file:// URI通过JavaScript接口传递给webview。这通常涉及到在鸿蒙应用中定义一个JavaScript接口，并通过webview的addJavascriptInterface方法将其暴露给H5页面。

  3. 在H5页面中展示URI：在webview加载的H5页面中，通过JavaScript接收鸿蒙原生传递过来的URI，并使用<img>标签或其他方式展示图片。

  4. 处理权限问题：确保在鸿蒙应用中已经申请并获得了必要的权限，如读写存储权限，以确保拍照功能能够正常工作并保存图片。

  5. 测试与调试：在真机或模拟器上测试该功能，确保拍照、返回URI和展示图片的流程能够顺利进行。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部