SaveButton如何保存网络图片 HarmonyOS 鸿蒙Next

SaveButton如何保存网络图片 HarmonyOS 鸿蒙Next

[设备信息] Mate60

[API版本] Api12

[DevEco Studio版本] 5.0.7.200

[问题描述]
https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-image-13-V5

这个文档写的不太理解（确实可以成功保存本地图片，但如何保存网络图片）将'app.media.startIcon'替换成网络图片链接后无法成功保存，希望给出详细保存网络图片的代码
2 回复

可以参考以下demo：

https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/photopickandsave#%E5%9C%BA%E6%99%AF2%E4%B8%8B%E8%BD%BD%E5%B9%B6%E4%BF%9D%E5%AD%98%E7%BD%91%E7%BB%9C%E5%9B%BE%E7%89%87

import http from '@ohos.net.http';
import { BusinessError } from '@ohos.base';
import common from '@ohos.app.ability.common';
import photoAccessHelper from '@ohos.file.photoAccessHelper';
import fs from '@ohos.file.fs';
import promptAction from '@ohos.promptAction';

@Entry
@Component
export struct SaveNetWorkPictures {
  imageBuffer: ArrayBuffer | undefined = undefined; // 图片ArrayBuffer

  async aboutToAppear(): Promise<void> {
    //请求网络图片
    //this.getPicture();
  }

  build() {
    Column() {
      Column() {
        SaveButton({ icon: SaveIconStyle.FULL_FILLED })
          .iconSize(60)
          .iconColor("#888888")
          .width(99)
          .height(99)
          .onClick(async () => {
            // if (this.imageBuffer !== undefined) { 
            // await this.getPicture();
            await this.saveImage(this.imageBuffer);
            promptAction.showToast({
              message: '图片保存成功',
              duration: 2000
            })
            // }
          })
      }
      .height('100%')
      .padding(100)
    }
  }

  // * 通过http的request方法从网络下载图片资源
  getPicture(): Promise<void> {
    return new Promise((resolve) => {
      http.createHttp()// 显示网络图片的地址
        .request('xxx',
          (error: BusinessError, data: http.HttpResponse) => {
            if (error) {
              // 下载失败时弹窗提示检查网络，不执行后续逻辑
              promptAction.showToast({
                message: '图片加载失败，请检查网络',
                duration: 2000
              })
              return;
            }
            // this.transcodePixelMap(data);
            // 判断网络获取到的资源是否为ArrayBuffer类型
            if (data.result instanceof ArrayBuffer) {
              this.imageBuffer = data.result as ArrayBuffer;
            }
            resolve();
          }
        )
    })
  }

  // * 保存ArrayBuffer到图库
  async saveImage(buffer: ArrayBuffer | string | undefined): Promise<void> {
    if (this.imageBuffer == undefined) {
      await this.getPicture()
    }
    try {
      const context = getContext(this) as common.UIAbilityContext; // 获取getPhotoAccessHelper需要的context
      const helper = photoAccessHelper.getPhotoAccessHelper(context); // 获取相册管理模块的实例
      const uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg'); // 指定待创建的文件类型、后缀和创建选项，创建图片或视频资源
      const file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
      await fs.write(file.fd, this.imageBuffer);
      await fs.close(file.fd);
    } catch (e) {
      console.log(JSON.stringify(e))
    }
  }
}

更多关于SaveButton如何保存网络图片 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用SaveButton保存网络图片可以通过以下步骤实现：

  1. 获取图片URL：首先，确保你有网络图片的URL地址。

  2. 下载图片：使用Http或HttpURLConnection等网络请求工具下载图片数据。例如：

    const url = 'https://example.com/image.jpg';
const response = await fetch(url);
const blob = await response.blob();

  3. 保存图片：将下载的图片数据保存到设备的文件系统中。可以使用FileIO模块来完成此操作。例如：

    const filePath = 'internal://cache/image.jpg';
await FileIO.write(filePath, blob);

  4. 绑定SaveButton事件：在SaveButton的点击事件中执行上述下载和保存操作。例如：

    SaveButton.onClick(async () => {
    const url = 'https://example.com/image.jpg';
    const response = await fetch(url);
    const blob = await response.blob();
    const filePath = 'internal://cache/image.jpg';
    await FileIO.write(filePath, blob);
});

通过以上步骤，SaveButton可以在用户点击时将网络图片保存到设备的指定路径中。

回到顶部