HarmonyOS鸿蒙Next中保存图片到系统相册实现方式

HarmonyOS鸿蒙Next中保存图片到系统相册实现方式

使用以下代码存到系统相册必须要使用安全控件SaveButton吗？

const context = getContext(this) as common.UIAbilityContext;
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, buffer2)
await fs.close(file.fd)

尝试了申请文件权限使用photoPicker，但是只是存到自定义目录，不是系统相册。

保存图片到系统相册这个要怎么处理？

保存相册的场景，会提供一个native功能给h5页面调用，在h5页面上是不会使用到安全控件SaveButton的


更多关于HarmonyOS鸿蒙Next中保存图片到系统相册实现方式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

可以参考下这篇博文：

HarmonyOS Next 屏幕截图 + 保存图片到系统相册 代码分享

https://developer.huawei.com/consumer/cn/blog/topic/03166979994620019

更多关于HarmonyOS鸿蒙Next中保存图片到系统相册实现方式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


楼主您好，使用http模块下的request方法下载图片，并在该方法的回调函数中保存到相册 先申请以下权限： ohos.permission.INTERNET ohos.permission.WRITE_IMAGEVIDEO 其中ohos.permission.WRITE_IMAGEVIDEO需要向用户申请授权，可参考文档 向用户申请授权-申请应用权限-应用权限管控-程序访问控制-安全-系统 - 华为HarmonyOS开发者 (huawei.com)

保存网络图片代码如下：

import { http } from '@kit.NetworkKit'
import { BusinessError } from '@kit.BasicServicesKit';
import { ResponseCode } from '@ohos.net.http';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import fs from '@ohos.file.fs';

@Entry
@Component
struct Index {
  loadImageWithUrl(url: string) {
    // 使用request下载图片并在回调函数中保存图片到相册
    http.createHttp().request(url,
      {
        method:http.RequestMethod.GET,
        connectTimeout:60000,
        readTimeout:60000
      },
      async (error: BusinessError, data: http.HttpResponse) => {
        if (error) {
          console.error(`http reqeust failed with. Code: ${error.code}, message: ${error.message}`);
        } else {
          if (ResponseCode.ResponseCode.OK === data.responseCode) {
            let imageBuffer: ArrayBuffer = data.result as ArrayBuffer;
            try {
              // 获取相册路径
              const context = getContext(this);
              let helper = photoAccessHelper.getPhotoAccessHelper(context);
              let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg')
              let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
              // 写入文件
              await fs.write(file.fd, imageBuffer);
              // 关闭文件
              await fs.close(file.fd);
            } catch (error) {
              console.error("error is " + JSON.stringify(error))
            }
          } else {
            console.error("error occurred when image downloaded!")
          }
        }
      })
  }
  build() {
    Row() {
      Column() {
        Button("点击下载并保存网络图片", {type: ButtonType.Capsule, stateEffect: false})
          .width('100%')
          .height(55)
          .fontSize('15fp')
          .fontColor('#ffffff')
          .margin({top: 20})
          .onClick(() => {
            this.loadImageWithUrl("https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280")
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

保存本地图片到相册的方法

let context: Context = getContext(this);
// 获取待保存图像的ArrayBuffer
const resourceMgr: resourceManager.ResourceManager = context.resourceManager;
const fileData: Uint8Array = await resourceMgr.getRawFileContent('beer.jpeg');
const buffer = fileData.buffer;

// 获取相册的保存路径
let helper = photoAccessHelper.getPhotoAccessHelper(context);
let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpeg');
let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
// 写入文件并关闭文件流
await fs.write(file.fd, buffer);
await fs.close(file.fd);

在HarmonyOS鸿蒙Next中保存图片到系统相册的实现方式如下：

  1. 创建MediaLibrary实例：首先需要获取MediaLibrary的实例，用于操作媒体库。

  2. 创建MediaAsset：通过MediaLibrary实例创建一个MediaAsset对象，用于表示要保存的图片。

  3. 设置图片属性：为MediaAsset对象设置图片的属性，如标题、描述、MIME类型等。

  4. 获取文件路径：通过MediaLibrary获取系统相册的存储路径。

  5. 保存图片：将图片数据写入到指定的文件路径中。

  6. 刷新媒体库：保存完成后，调用MediaLibrary的刷新方法，使新图片在系统相册中可见。

示例代码如下：

import mediaLibrary from '@ohos.multimedia.mediaLibrary';

async function saveImageToGallery(imageData: ArrayBuffer, title: string, description: string) {
    const mediaLib = mediaLibrary.getMediaLibrary();
    const mediaAsset = mediaLib.createMediaAsset(mediaLibrary.MediaType.IMAGE, title, description);
    const filePath = mediaLib.getPublicDirectory(mediaLibrary.DirectoryType.DIR_PICTURES);
    const fileUri = mediaAsset.getUri();
    await mediaLib.writeMediaAsset(fileUri, imageData);
    mediaLib.refreshMediaLibrary();
}

在HarmonyOS（鸿蒙Next）中，保存图片到系统相册可以通过以下步骤实现：

  1. 权限申请：首先，在config.json中声明ohos.permission.WRITE_MEDIA权限。

  2. 图片保存：使用[@ohos](/user/ohos).file.fileio和[@ohos](/user/ohos).multimedia.mediaLibrary模块，将图片文件写入到媒体库中。

  3. 媒体库操作：通过MediaLibrary接口，将图片文件插入到系统相册中。

示例代码：

import mediaLibrary from '[@ohos](/user/ohos).multimedia.mediaLibrary';
import fileio from '[@ohos](/user/ohos).file.fileio';

async function saveImageToGallery(imagePath) {
    const media = mediaLibrary.getMediaLibrary();
    const file = await media.createAsset(mediaLibrary.MediaType.IMAGE, 'image.jpg');
    await fileio.copyFile(imagePath, file.uri);
}
``

确保在调用`saveImageToGallery`前，用户已授权相关权限。
回到顶部