HarmonyOS 鸿蒙Next图片保存相册

HarmonyOS 鸿蒙Next图片保存相册 【设备信息】 Mate 60Pro
【API版本】 Api12
【DevEco Studio版本】 5.0.5.300
【问题描述】

图片是一个怎么样的对象类型 (ios中图片的对象类型是UIImage) 鸿蒙有类似的资源类型吗？我们怎么把这个图片资源保存在相册里面？场景：和h5页面交互，桥接方法参数有个图片资源，需要把图片资源保存在相册

2 回复

如下是base64字符串 传递给arkts进行保存demo

import { webview } from '@kit.ArkWeb';
import { util } from '@kit.ArkTS';
import { abilityAccessCtrl, common } from '@kit.AbilityKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import fs from '@ohos.file.fs';

let base64helper = new util.Base64Helper()
let buffer: ArrayBuffer;
let appContext = this.getContext();
class Picture {
  picBase64: string = '';
  savePicture(picBase64: string) {

    this.picBase64 = picBase64
    buffer = base64helper.decodeSync(picBase64, util.Type.MIME).buffer as ArrayBuffer
    this.requestPermissionsFn()
  }
  requestPermissionsFn(){
    console.log(`request`);
    try {
      const atManager = abilityAccessCtrl.createAtManager()
      //申请相册管理模块权限'ohos.permission.WRITE_IMAGEVIDEO'
      atManager.requestPermissionsFromUser(appContext, [
        'ohos.permission.WRITE_IMAGEVIDEO'
      ]).then(async () => {
        console.log(`request Permissions success!`);
        try {
          //获取相册管理模块的实例，用于访问和修改相册中的媒体文件
          let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(appContext);
          //通过createAsset接口创建图片文件
          let uri = await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png'); // 创建媒体文件
          console.info('createAsset successfully, uri: ' + uri);
          let file = await fs.open(uri, fs.OpenMode.READ_WRITE || fs.OpenMode.CREATE);
          // 使用uri打开文件，可以持续写入内容，写入过程不受时间限制
          console.log(JSON.stringify(buffer))
          await fs.write(file.fd, buffer);
          // 关闭文件
          await fs.close(file);
        } catch (err) {
          console.error('createAsset failed, message = ', err);
        }
      })
    } catch (err) {
      console.info(`requestPermissionsFromUser call Failed! error: ${err.code}`);
    }
  }
}
@Entry
@Component
struct Index {
  private webController: WebviewController = new webview.WebviewController()
  @State message: string = 'Hello World';
  @State pic: Picture = new Picture()
  build() {
    Row() {
      Column() {
        Web({ src: $rawfile("index.html"), controller: this.webController })
          .height("80%")
          .javaScriptProxy({
            object: this.pic,
            name: "picture",
            methodList: ["savePicture"],
            controller: this.webController
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

h5

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>保存图片</title>
</head>
<body>
<img src="./startIcon.png" width="200" height="200" id="pic">
<button onclick="savePicture()" style="width: 100px; height: 50px;">保存</button>

<script>
    function savePicture() {
      picture.savePicture('base64')
    }
</script>
</body>
</html>

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


HarmonyOS Next中，图片保存到相册的功能主要通过@ohos.multimedia.mediaLibrary模块实现。首先，你需要获取MediaLibrary实例，然后使用createAsset方法创建一个图片资源。接着，通过File对象将图片数据写入创建的资源中。最后，调用commitModify方法提交修改。

具体步骤如下：

  1. 导入@ohos.multimedia.mediaLibrary模块。
  2. 获取MediaLibrary实例。
  3. 使用createAsset方法创建图片资源。
  4. 使用File对象将图片数据写入资源。
  5. 调用commitModify方法提交修改。

示例代码：

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

async function saveImageToGallery(imageData: ArrayBuffer) {
    const context = getContext(this);
    const media = mediaLibrary.getMediaLibrary(context);
    const imageFile = await media.createAsset(mediaLibrary.MediaType.IMAGE, 'myImage.jpg', 'Pictures');
    const file = await fs.open(imageFile.uri, fs.OpenMode.WRITE_ONLY);
    await fs.write(file.fd, imageData);
    await fs.close(file.fd);
    await media.commitModify(imageFile);
}

这个代码片段展示了如何将图片数据保存到相册中。

回到顶部