HarmonyOS鸿蒙Next中元服务web页面获取到的图片怎么H5中转成base64

HarmonyOS鸿蒙Next中元服务web页面获取到的图片怎么H5中转成base64 鸿蒙元服务AtomicServiceEnhancedWeb组件开发的web页面中用新的js sdk方法has.photoViewPicker.select()拿到的图片uri怎么在web网页中转成base64格式呢？

3 回复

可以尝试用我下面的这个方法试一下哈，还有一种方式，就是先用canvas绘画出来，然后在通过canvas获取base64，再传给web组件，这种我就没尝试，你可以看看

步骤1：在ArkTS页面实现文件读取

// ImageUtils.ets
import fs from '@ohos.file.fs';
import util from '@ohos.util';

async function uriToBase64(uri: string): Promise<string> {
  try {
    const file = fs.openSync(uri.replace('file://', ''), fs.OpenMode.READ_ONLY);
    const arrayBuffer = new ArrayBuffer(1024 * 1024); // 1MB缓冲区
    const readLen = fs.readSync(file.fd, arrayBuffer);
    fs.closeSync(file);
    
    const base64 = util.base64EncodeSync(arrayBuffer.slice(0, readLen));
    return `data:image/jpeg;base64,${base64}`;
  } catch (e) {
    console.error(`Convert failed: ${e}`);
    return '';
  }
}

步骤2：通过路由传递结果到H5

// WebPage.ets
import { router } from '@kit.ArkUI';

@Entry
@Component
struct WebPage {
  @State webController: AtomicServiceEnhancedWebController = new AtomicServiceEnhancedWebController();

  onPageResult(result: Object) {
    // 接收图片处理结果
    this.webController.runJavaScript(`updateImage("${result.base64}")`);
  }

  build() {
    Column() {
      AtomicServiceEnhancedWeb({
        src: 'https://www.example.com',
        controller: this.webController
      })
      .onInterceptRequest(event => {
        if (event.request.url?.includes('action=selectImage')) {
          router.push({
            url: 'pages/ImagePicker',
            params: { callback: this.onPageResult.bind(this) }
          });
          return true; // 拦截请求
        }
        return false;
      })
    }
  }
}

步骤3：H5页面触发调用

<!-- index.html -->
<button onclick="selectImage()">选择图片</button>
<script>
function selectImage() {
  // 通过特定URL协议触发ArkTS拦截
  location.href = 'https://www.example.com/?action=selectImage';
}

// 供ArkTS调用的回调方法
window.updateImage = (base64) => {
  document.getElementById('preview').src = base64;
};
</script>

更多关于HarmonyOS鸿蒙Next中元服务web页面获取到的图片怎么H5中转成base64的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next的元服务中，通过Web组件加载的H5页面可使用JavaScript的FileReader API转换图片为Base64。具体步骤：通过input元素或XMLHttpRequest获取图片文件，创建FileReader对象，调用readAsDataURL方法读取图片数据，在onload事件中获取Base64结果字符串。需注意跨域资源需配置网络权限。

在HarmonyOS Next的元服务中，通过has.photoViewPicker.select()获取图片URI后，可以在Web页面中使用以下方法转换为Base64格式：

  1. 使用fetch API获取图片数据：
const response = await fetch(uri);
const blob = await response.blob();
  1. 通过FileReader转换为Base64：
const reader = new FileReader();
reader.onloadend = () => {
    const base64data = reader.result; // 得到Base64字符串
};
reader.readAsDataURL(blob);

完整示例：

has.photoViewPicker.select().then(async (uri) => {
    const response = await fetch(uri);
    const blob = await response.blob();
    
    const reader = new FileReader();
    reader.onloadend = () => {
        console.log('Base64:', reader.result);
        // 使用Base64数据
    };
    reader.readAsDataURL(blob);
});

注意：确保Web页面有相应的网络权限，且图片URI可访问。这种方式适用于HarmonyOS Next的Web环境中处理本地或网络图片。

回到顶部