【HarmonyOS】H5页面调用图库

【HarmonyOS】web组件的h5页面调用鸿蒙app图库和拍照示例

1、添加权限：entry/src/main/module.json5

2、测试文件：src/main/resources/rawfile/page107.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更换头像示例</title>
    <style>
        body { /* 确保图片不会超出屏幕宽度 */
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        #avatarPreview {
            max-width: 50vw; /* 设置图片最大宽度为屏幕宽度的50% */
            display: block; /* 确保图片作为块级元素显示 */
            margin: 10px auto; /* 居中图片 */
        }
        #avatarPreview img {
            width: 100%; /* 图片宽度自动适应其容器宽度 */
            height: auto; /* 高度自适应保持图片比例 */
        }
    </style>
</head>
<body>

<h2>点击选择新头像</h2>
<input type="file" id="avatarInput" accept="image/*" style="margin-bottom:10px;">
<button onclick="uploadAvatar()">上传头像至OSS</button>
<button onclick="changeAvatar()">显示头像</button>

<div id="avatarPreview"></div>

<script>
    async function uploadAvatar() {
        const input = document.getElementById('avatarInput');
        if (input.files && input.files[0]) {
            // 模拟异步上传图片至OSS的过程
            try {
                const formData = new FormData();
                formData.append('file', input.files[0]);

                // 这里使用fetch API模拟上传请求，实际应用中需要替换为真实的服务端API地址
                const response = await fetch('https://your-fake-oss-api.com/upload', {
                    method: 'POST',
                    body: formData
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const result = await response.json();
                alert('图片上传成功！服务器响应：' + JSON.stringify(result));
            } catch (error) {
                alert('图片上传失败：' + error);
            }
        }
    }

    function changeAvatar() {
        const input = document.getElementById('avatarInput');
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('avatarPreview').innerHTML = `<img src="${e.target.result}" alt="头像预览">`;
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

</body>
</html>

3、示例代码：src/main/ets/pages/Page107.ets

import web_webview from '@ohos.web.webview';
import picker from '@ohos.file.picker';
import fs from '@ohos.file.fs';
import { common } from '@kit.AbilityKit';

interface MyEvent {
  result: FileSelectorResult,
  fileSelector: FileSelectorParam
}

@Entry
@Component
struct Page107 {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  handleFileSelection(event: MyEvent) {
    const PhotoSelectOptions = new picker.PhotoSelectOptions();
    PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
    PhotoSelectOptions.maxSelectNumber = 1;

    const photoPicker = new picker.PhotoViewPicker();

    photoPicker.select(PhotoSelectOptions)
      .then((PhotoSelectResult) => {
        if (PhotoSelectResult.photoUris.length === 0) {
          console.warn('No image selected.');
          return;
        }

        const srcUri = PhotoSelectResult.photoUris[0];
        const context = getContext(this) as common.UIAbilityContext;
        const destPath = `${context.filesDir}/test${new Date().getTime()}.jpg`;

        try {
          let file = fs.openSync(srcUri, fs.OpenMode.READ_ONLY);
          fs.copyFileSync(file.fd, destPath);
          event?.result.handleFileList([destPath]);
        } catch (copyError) {
          console.error('Copying the file failed:', JSON.stringify(copyError));
        }
      })
      .catch((selectError: object) => {
        console.error('Failed to invoke photo picker:', JSON.stringify(selectError));
      });

    return true;
  }

  build() {
    Column() {
      Web({
        src: $rawfile('page107.html'),
        // src: 'https://xxx',
        controller: this.controller
      })
        .width('100%')
        .height('100%')
        .domStorageAccess(true)//设置是否开启文档对象模型存储接口（DOM Storage API）权限。
        .javaScriptAccess(true)//设置是否允许执行JavaScript脚本，默认允许执行。
        .databaseAccess(true)//设置是否开启数据库存储API权限，默认不开启。
        .mixedMode(MixedMode.All)//HTTP和HTTPS混合
        .fileAccess(true)//设置是否开启应用中文件系统的访问，默认启用。
        .imageAccess(true)//设置是否允许自动加载图片资源，默认允许。
        .geolocationAccess(true)//设置是否开启获取地理位置权限，默认开启。
        .onlineImageAccess(true)//设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。
        .mediaPlayGestureAccess(true)//设置有声视频播放是否需要用户手动点击，静音视频播放不受该接口管控，默认需要。
        .onShowFileSelector(this.handleFileSelection.bind(this))
    }
    .width('100%')
    .height('100%')
  }
}

【HarmonyOS】H5页面调用图库

zhongcx

引用和评论

鸿蒙NEXT开发案例：经纬度距离计算

“一起学 HarmonyOS”第二弹来啦！

HarmonyOS Next 应用实战案例—“马背上的家乡”元服务

HarmonyOS 第一课：中级课程

HarmonyOS 第一课：基础课程

鸿蒙生态学堂

HarmonyOS Next 鸿蒙应用-键盘音乐