鸿蒙 ArkTS 组件截图指南：从组件截图到保存到相册

鸿蒙 ArkTS 组件截图指南：从组件截图到保存到相册

1.调用组件截图工具 获取图片 （image.PixelMap）

 const pixelMap =  await this.getUIContext().getComponentSnapshot().get('TextImageId')

2.保存PixelMap到沙箱环境 -在调用保存相册

import { image } from '@kit.ImageKit';
import { common } from '@kit.AbilityKit';
import { fileUri } from '@kit.CoreFileKit';
import fs from '@ohos.file.fs';
import fileIo from '@ohos.file.fs';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
 
 
class saveImgUtils {
  /**
   *保存截图到本地相册
   */
  public async saveScreenshot(pixelMap: image.PixelMap, filename: string) {
    const docExt: string = 'png'
    let targetPath: string = ''
    try {
      let imagePackerApi = image.createImagePacker();
      let packOpts: image.PackingOption = { format: "image/jpeg", quality: 90 }; // 可选择格式和质量
 
      // 保存文件到沙箱那个环境
      const imgBuffer: ArrayBuffer = await imagePackerApi.packing(pixelMap, packOpts);
      targetPath = (getContext(this) as common.UIAbilityContext).filesDir + "/" + filename + '.' + docExt; // 文件保存路径
      let file = await fileIo.open(targetPath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE);
      await fileIo.write(file.fd, imgBuffer);
      await fileIo.close(file.fd);
 
      //先缓存 增加预览图
      let dirpath = (getContext(this) as common.UIAbilityContext).tempDir + '/cameTem.png';
      let dirUri = fileUri.getUriFromPath(dirpath); // 通过传入的路径path生成uri
      let finalFile = fs.openSync(targetPath, fs.OpenMode.READ_ONLY)
      let dirFile = fs.openSync(dirpath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
      fs.copyFileSync(finalFile.fd, dirFile.fd)
      fs.closeSync(finalFile);
      fs.closeSync(dirFile);
      //保存到相册
      let srcFileUris: Array<string> = [dirUri];
      let photoCreationConfigs: Array<photoAccessHelper.PhotoCreationConfig> = [
        {
          fileNameExtension: 'png',
          photoType: photoAccessHelper.PhotoType.IMAGE,
        }
      ];
      let desFileUris: Array<string> = await photoAccessHelper.getPhotoAccessHelper(this.context)
        .showAssetsCreationDialog(srcFileUris, photoCreationConfigs);
      let desFile: fileIo.File = await fileIo.open(desFileUris[0], fileIo.OpenMode.WRITE_ONLY);
      let srcFile: fileIo.File = await fileIo.open(dirUri, fileIo.OpenMode.READ_ONLY);
      await fileIo.copyFile(srcFile.fd, desFile.fd);
      fileIo.closeSync(srcFile);
      fileIo.closeSync(desFile);
 
    } catch (error) {
      //发生异常要移除沙箱文件
      if (fs.accessSync(targetPath)) {
        fs.unlinkSync(targetPath);
      }
      console.log('下载失败', error)
    }
  }
}
bash

3.调用方法用例

import { saveImgUtils } from '../utils';
import { common } from '@kit.AbilityKit';
 
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  saveImage: saveImgUtils | null =
    new saveImgUtils(this.getUIContext().getHostContext() as common.UIAbilityContext)
 
  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(async () => {
          //根据组件ID获取对应的 image.PixelMap
          const pixelMap =  await this.getUIContext().getComponentSnapshot().get('HelloWorld')
          //根据事件进行文件命名 -可自行更改
          let time=new Date().toString()
          //调用保存方法
          this.saveImage?.saveScreenshot(pixelMap,time)
        })
    }
    .height('100%')
    .width('100%')
  }
}
bash