鸿蒙Next中H5如何下载图片到本地

在鸿蒙Next系统中，如何通过H5页面实现将图片下载到本地？具体的API调用方式是什么？是否需要特殊权限配置？能否提供完整的代码示例？

2 回复

鸿蒙Next里下载H5图片？简单！用@ohos.file.fs和@ohos.request这对好基友：先请求图片数据流，再用fs模块写入本地。记得先申请ohos.permission.INTERNET和ohos.permission.WRITE_MEDIA权限，不然系统会对你抛媚眼（报错）！代码写两行，权限跑断腿～

更多关于鸿蒙Next中H5如何下载图片到本地的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，H5（通过Web组件加载的网页）可以通过JavaScript与HarmonyOS的Native API交互来实现图片下载到本地的功能。以下是实现步骤和示例代码：

实现步骤

  1. 在H5页面中编写JavaScript：捕获图片下载事件（如点击按钮），并调用HarmonyOS注入的方法。
  2. 在HarmonyOS中配置Web组件：通过WebJavaScriptProxy将Native方法注入到H5页面，供JS调用。
  3. 实现Native下载逻辑：在HarmonyOS端处理图片下载，包括网络请求、保存到本地目录。

示例代码

1. H5页面（JavaScript部分）

在H5页面中，通过调用HarmonyOS注入的downloadImage方法触发下载：

<!DOCTYPE html>
<html>
<head>
    <title>下载图片示例</title>
</head>
<body>
    <img id="image" src="https://example.com/image.jpg" width="200"/>
    <button onclick="downloadImage()">下载图片</button>

    <script>
        function downloadImage() {
            // 获取图片URL
            var imgUrl = document.getElementById('image').src;
            // 调用HarmonyOS注入的方法
            if (window.harmonyBridge && typeof window.harmonyBridge.downloadImage === 'function') {
                window.harmonyBridge.downloadImage(imgUrl);
            } else {
                alert('下载功能不可用');
            }
        }
    </script>
</body>
</html>

2. HarmonyOS端（ArkTS代码）

在Ability或Page中配置Web组件，并注入Native方法：

import webview from '@ohos.web.webview';
import common from '@ohos.app.ability.common';
import fs from '@ohos.file.fs';
import http from '@ohos.net.http';

@Entry
@Component
struct WebPage {
  controller: webview.WebviewController = new webview.WebviewController();

  aboutToAppear() {
    // 注册JavaScript代理，将downloadImage方法注入到H5
    this.controller.registerJavaScriptProxy({
      downloadImage: (imgUrl: string) => {
        this.downloadImageToLocal(imgUrl);
      }
    }, 'harmonyBridge', ['downloadImage']);
  }

  // 下载图片到本地
  async downloadImageToLocal(imgUrl: string) {
    try {
      const context = getContext(this) as common.UIAbilityContext;
      const filesDir = context.filesDir; // 应用内部存储目录

      // 创建HTTP请求
      let httpRequest = http.createHttp();
      let response = await httpRequest.request(imgUrl, {
        method: http.RequestMethod.GET,
        expectDataType: http.HttpDataType.ARRAY_BUFFER
      });

      if (response.responseCode === 200) {
        // 生成文件名（基于URL或时间戳）
        const fileName = `image_${Date.now()}.jpg`;
        const filePath = `${filesDir}/${fileName}`;

        // 将图片数据写入文件
        let file = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
        fs.writeSync(file.fd, response.result as ArrayBuffer);
        fs.closeSync(file.fd);

        // 提示用户（可选）
        promptAction.showToast({
          message: `图片已保存到：${filePath}`,
          duration: 3000
        });
      } else {
        promptAction.showToast({ message: '下载失败', duration: 2000 });
      }
    } catch (error) {
      console.error('下载图片失败:', error);
      promptAction.showToast({ message: '下载失败', duration: 2000 });
    }
  }

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .width('100%')
        .height('100%')
    }
  }
}

注意事项

  • 权限配置：在module.json5中添加网络和存储权限：
    {
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      },
      {
        "name": "ohos.permission.WRITE_USER_STORAGE"
      }
    ]
  }
}
  • 文件路径：示例中使用filesDir（应用内部目录），如需保存到公共目录（如相册），需使用@ohos.file.photoAccessHelper等接口。
  • 错误处理：实际开发中需增强网络异常、存储空间不足等情况的处理。

通过以上步骤，即可在鸿蒙Next的H5页面中实现图片下载到本地的功能。

回到顶部