鸿蒙NEXT版实战开发：如何将PixelMap保存到相册？

最新推荐文章于 2025-05-08 03:25:30 发布

那只斑马不睡觉

最新推荐文章于 2025-05-08 03:25:30 发布

阅读量131

点赞数 7

分类专栏： OpenHarmony ArkUI 鸿蒙5.0 文章标签： harmonyos 华为前端 ArkTS ArkUI 鸿蒙系统 android

本文链接：https://blog.csdn.net/qq_39652397/article/details/147767511

版权

鸿蒙5.0 同时被 3 个专栏收录

969 篇文章

订阅专栏

ArkUI

796 篇文章

订阅专栏

OpenHarmony

451 篇文章

订阅专栏

往期鸿蒙全套实战文章必看：（附带鸿蒙全栈学习资料）

如何将PixelMap保存到相册

PixelMap使用imagePacker.packToFile()的方法将ImageSource图片源编码后直接打包进文件。

参考代码

import { resourceManager } from '@kit.LocalizationKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { image } from '@kit.ImageKit';
import { promptAction } from '@kit.ArkUI';
import { fileIo } from '@kit.CoreFileKit';

@Entry
@Component
struct SavePixelMapToAlbum {
  @State saveButtonOptions: SaveButtonOptions = {
    icon: SaveIconStyle.FULL_FILLED,
    text: SaveDescription.SAVE,
    buttonType: ButtonType.Capsule
  };
  @State pixel: image.PixelMap | undefined = undefined;
  @State albumPath: string = '';
  @State photoSize: number = 0;
  private context: Context = getContext(this);

  async aboutToAppear() {
    const resourceMgr: resourceManager.ResourceManager = this.context.resourceManager;
    // beer.jpeg为rawfile文件下的图片名，可根据自身需求修改使用。
    const fileData: Uint8Array = await resourceMgr.getRawFileContent('beer.jpeg');
    let buffer = new Uint8Array(fileData).buffer as object as ArrayBuffer;
    let imageResource = image.createImageSource(buffer);
    let opts: image.DecodingOptions = { editable: true };
    this.pixel = await imageResource.createPixelMap(opts);
  }

  async savePixelMapToAlbum() {
    // 获取相册的保存路径
    let helper = photoAccessHelper.getPhotoAccessHelper(this.context);
    let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpeg');
    let file = await fileIo.open(uri, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
    let imagePackerApi = image.createImagePacker();
    let packOpts: image.PackingOption = { format: 'image/jpeg', quality: 98 };

    imagePackerApi.packToFile(this.pixel, file.fd, packOpts, (err: BusinessError) => {
      if (err) {
        console.error(`Failed to pack the image to file.code ${err.code},message is ${err.message}`);
      } else {
        console.info('Succeeded in packing the image to file.');
        imagePackerApi.release((err: BusinessError) => {
          if (err) {
            console.error(`Failed to release the image source instance.code ${err.code},message is ${err.message}`);
          } else {
            console.info('Succeeded in releasing the image source instance.');
            fileIo.close(file.fd);
          }
        })
        promptAction.showToast({ message: '已保存至相册！' });
      }
    })
  }

  build() {
    Row() {
      Column() {
        Image(this.pixel)
          .objectFit(ImageFit.None)
          .height('30%')

        SaveButton(this.saveButtonOptions)
          .onClick(async (event, result: SaveButtonOnClickResult) => {
            if (result === SaveButtonOnClickResult.SUCCESS) {
              this.savePixelMapToAlbum();
            }
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}