HarmonyOS鸿蒙Next中获取到了图库的图片的uri怎么传入web组件并显示

HarmonyOS鸿蒙Next中获取到了图库的图片的uri怎么传入web组件并显示？

9 回复

  1. 通过上传功能，将图片上传到阿里oss等云存储中，将返回的图片远程地址作为字符串返回给web组件

  2. 或者将图片转为base64字符串，传给web组件

第一种方法 延迟高些，因为需要使用网络上传，第二种方法 性能差些，图片转base64 字符串提交会很大

两种方案 核心都是 想办法 传字符串给web组件

更多关于HarmonyOS鸿蒙Next中获取到了图库的图片的uri怎么传入web组件并显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


Web()

.fileAccess(true) //允许加载本地图片

先允许加载本地图片，再试试能否直接用相册图片的uri。

如果不能用，再把相册图片复制到沙箱里，使用沙箱的图片 uri 加载。

import { fileIo, fileUri } from '@kit.CoreFileKit'

const imagePath = getContext().filesDir +'/photo.png' ;
const srcFile = fileIo.openSync(imageUri); //从相册获取的uri
const dstFile = fileIo.openSync(imagePath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
fileIo.copyFileSync(srcFile.fd, dstFile.fd);
const newImageUri = fileUri.getUriFromPath(imagePath) //newImageUri 传给web使用

你的大概流程是不是点击<input type="file">触发Web组件事件→应用侧通过onShowFileSelector获取URI→将URI通过handleFileList()返回给前端→前端通过FileReader读取文件并显示在<img>标签？

  • 监听Web组件的文件上传
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: $rawfile('local.html'), controller: this.controller })
        .onShowFileSelector((event) { //关键事件监听
          if (event) {
            // 调用图库选择器获取URI（此处示例直接使用已获取的URI）
            const uri = 'file://your_image_uri';
            event.result.handleFileList([uri]); //  返回给前端页面
          }
          return true; // 必须返回true以拦截默认行为
        })
    }
  }
}
  • HTML页面处理文件上传
<!-- local.html -->
<!DOCTYPE html>
<html>
<body>
  <input type="file" id="fileInput" onchange="previewImage(event)">
  <img id="preview" style="max-width: 300px">
  
  <script>
    function previewImage(e) {
      const file = e.target.files;
      const reader = new FileReader();
      reader.onload = function() {
        document.getElementById('preview').src = reader.result;
      };
      reader.readAsDataURL(file);
    }
  </script>
</body>
</html>

沙箱适配的时候要确保URI符合file://<bundleName>/<sandboxPath>格式（比如：file://com.example.app/files/image.jpg），之后再通过fs.copyFile()将图库文件复制到应用沙箱目录

两种方式：

第一步：选择相册照片

第二步：将选择的照片转成base64编码

第三步：采用跟js交互的模式，桥接交互

第四步：将base64传给HTML页面的Image标签显示

第二种方式：

选择相册照片后，将图片复制到沙箱，HTML页面读取该图片，然后通过webController刷新页面即可

可以先上传到服务器，然后生成远程图片地址之后让web组件加载。

希望HarmonyOS能继续推出更多实用的功能，满足用户的不同需求。

标题

文本内容

子标题

更多文本内容

在HarmonyOS Next中，将图库图片URI传入Web组件显示需使用Web的loadUrl方法或postMessage。首先将图片转换为Base64或上传到服务器获取网络URL。若使用Base64，需先通过FileIO读取图片数据，再编码。代码示例：

// 获取图片Base64
let imageData = fileIo.readSync(uri);
let base64 = imageData.toString('base64');

// Web组件中显示
webController.postMessage('data:image/png;base64,' + base64);

Web组件需提前注册message事件监听器处理图片数据。注意uri权限需在config.json中声明。

在HarmonyOS Next中，要将图库图片的URI传入Web组件显示，可通过以下方式实现：

  1. 首先确保获取到正确的图片URI，格式通常为：file:///storage/...

  2. 在Web组件中显示本地图片的两种方案：

方案一：使用Base64编码方式

// 将图片转换为Base64
import fileio from '@ohos.fileio';
async function getBase64FromUri(uri: string) {
  const file = await fileio.open(uri);
  const stat = await fileio.stat(uri);
  const buffer = new ArrayBuffer(stat.size);
  await fileio.read(file.fd, buffer);
  let base64 = buffer.toString('base64');
  return `data:image/*;base64,${base64}`;
}

// Web组件使用
@Entry
@Component
struct WebComponent {
  @State base64Image: string = '';
  
  async aboutToAppear() {
    this.base64Image = await getBase64FromUri("your_image_uri");
  }

  build() {
    Column() {
      Web({ src: $rawfile(`<img src="${this.base64Image}"/>`) })
        .width('100%')
        .height('100%')
    }
  }
}

方案二：通过Web组件本地文件访问

// 需要先申请文件访问权限
// 在config.json中添加：
"reqPermissions": [
  {
    "name": "ohos.permission.READ_MEDIA"
  }
]

// Web组件直接使用file协议
@Entry
@Component
struct WebComponent {
  build() {
    Column() {
      Web({ src: $rawfile(`<img src="file://your_image_uri"/>`) })
        .width('100%')
        .height('100%')
    }
  }
}

注意事项：

  1. 确保URI路径正确且应用有访问权限
  2. 大图片建议使用方案二避免内存问题
  3. 真机调试时注意文件路径可能变化
回到顶部