使用组件截图（ComponentSnapshot）

// src/main/ets/view/ScrollSnapshot.ets
@Component
export struct ScrollSnapshot {
  private scroller: Scroller = new Scroller();
  private listComponentWidth: number = 0; // 组件宽度，默认值为0
  private listComponentHeight: number = 0; // 组件高度，默认值为0
  // list组件的当前偏移量
  private curYOffset: number = 0;
  // 每次滚动距离
  private scrollHeight: number = 0;

  // ...
  build() {
    // ...
        Stack() {
          // ...
          // 1.1 绑定滚动控制器，并通过`.id`配置组件唯一标识。
          List({ space: 12, scroller: this.scroller }) {
              LazyForEach(this.dataSource, (item: number) => {
              ListItem() {
                NewsItem({ index: item })
              }
            }, (item: number) => item.toString())
          }
          // ...
          .id(LIST_ID)
          // 1.2 通过回调获取滚动偏移量。
          .onDidScroll(() => {
            this.curYOffset = this.scroller.currentOffset().yOffset;
          })
          .onAreaChange((oldValue, newValue) => {
            // 1.3 获取组件的宽高。
            this.listComponentWidth = newValue.width as number;
            this.listComponentHeight = newValue.height as number;
            this.scrollHeight = this.listComponentHeight;
          })
          // ...
    }
  }
}

/**
 * 递归滚动截图，直到滚动到底，最后合并所有截图
 */
async scrollSnapAndMerge() {
  try {
    // 记录滚动偏移
    this.scrollYOffsets.push(this.curYOffset - this.yOffsetBefore);
    // 调用组件截图接口，获取list组件的截图
    const pixelMap = await this.getUIContext().getComponentSnapshot().get(LIST_ID);
    // 获取位图像素字节，并保存在数组中
    let area: image.PositionArea =
      await ImageUtils.getSnapshotArea(pixelMap, this.scrollYOffsets, this.listComponentWidth,
        this.listComponentHeight)
    this.areaArray.push(area);

    // 判断是否滚动到底以及用户是否已经强制停止
    if (!this.scroller.isAtEnd() && !this.isClickStop) {
      // 如果没有到底或被停止，则播放一个滚动动效，延迟一段时间后，继续递归截图
      CommonUtils.scrollAnimation(this.scroller, 1000, this.scrollHeight);
      await CommonUtils.sleep(1500);
      await this.scrollSnapAndMerge();
    } else {
      // 当滚动到底时，调用`mergeImage`将所有保存的位图数据进行拼接，返回长截图位图对象
      this.mergedImage =
        await ImageUtils.mergeImage(this.areaArray, this.scrollYOffsets[this.scrollYOffsets.length - 1],
          this.listComponentWidth, this.listComponentHeight);
    }
  } catch (err) {
    let error = err as BusinessError;
    Logger.error(TAG, `scrollSnapAndMerge err, errCode: ${error.code}, error message: ${error.message}`);
  }
}

// src/main/ets/common/CommonUtils.ets
static scrollAnimation(scroller: Scroller, duration: number, scrollHeight: number): void {
  scroller.scrollTo({
    xOffset: 0,
    yOffset: (scroller.currentOffset().yOffset + scrollHeight),
    animation: {
      duration: duration,
      curve: Curve.Smooth,
      canOverScroll: false
    }
  });
}

static async mergeImage(areaArray: image.PositionArea[], lastOffsetY: number, listWidth: number,
  listHeight: number): Promise<PixelMap> {
  // 创建一个长截图位图对象
  let opts: image.InitializationOptions = {
    editable: true,
    pixelFormat: 4,
    size: {
      width: uiContext?.vp2px(listWidth) || 0,
      height: uiContext?.vp2px(lastOffsetY + listHeight) || 0
    }
  };
  let longPixelMap = image.createPixelMapSync(opts);
  let imgPosition: number = 0;

  for (let i = 0; i < areaArray.length; i++) {
    let readArea = areaArray[i];
    let area: image.PositionArea = {
      pixels: readArea.pixels,
      offset: 0,
      stride: readArea.stride,
      region: {
        size: {
          width: readArea.region.size.width,
          height: readArea.region.size.height
        },
        x: 0,
        y: imgPosition
      }
    }
    imgPosition += readArea.region.size.height;
    try {
      longPixelMap.writePixelsSync(area);
    } catch (err) {
      let error = err as BusinessError;
      Logger.error(TAG, `writePixelsSync err, code: ${error.code}, message: ${error.message}`);
    }
  }
  return longPixelMap;
}

// src/main/ets/view/SnapshotPreview.ets
SaveButton({
  icon: SaveIconStyle.FULL_FILLED,
  text: SaveDescription.SAVE_IMAGE,
  buttonType: ButtonType.Capsule
})
  // ···
  .onClick((event, result) => {
    this.saveSnapshot(result);
  })

async saveSnapshot(result: SaveButtonOnClickResult): Promise<void> {
  try {
    if (result === SaveButtonOnClickResult.SUCCESS) {
      const helper = photoAccessHelper.getPhotoAccessHelper(this.context);
      const uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png');
      const file = await fileIo.open(uri, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
      try {
        const imagePackerApi: image.ImagePacker = image.createImagePacker();
        const packOpts: image.PackingOption = {
          format: 'image/png',
          quality: 100,
        };
        const data = await imagePackerApi.packToData(this.mergedImage, packOpts);
        fileIo.writeSync(file.fd, data);
        Logger.info(TAG, `Succeeded in packToFile`);
        this.getUIContext().getPromptAction().showToast({
          // 请将$r('app.string.save_album_success')替换为实际资源文件，在本示例中该资源文件的value值为"Saved to album"
          message: $r('app.string.save_album_success'),
          duration: 1800
        })
      } catch (error) {
        let businessError = error as BusinessError;
        Logger.error(TAG,
          `Failed to packToFile. Error code is ${businessError.code}, message is ${businessError.message}`);
      } finally {
        try {
          fileIo.closeSync(file.fd);
        } catch (err) {
          let error = err as BusinessError;
          Logger.error(TAG, `Failed to close file. Error code is ${error.code}, message is ${error.message}`);
        }
      }
    }
    // ...
  } catch (err) {
    let error = err as BusinessError;
    Logger.error(TAG, `saveSnapshot err, errCode: ${error.code}, error message: ${error.message}`);
  }
}

closeSnapPopup(): void {
  // 关闭弹窗
  this.isShowPreview = false;
  // 释放位图对象
  this.mergedImage = undefined;
  // 重置相关参数
  this.snapPopupWidth = 100;
  this.snapPopupHeight = 200;
  this.snapPopupPosition =
    PopupUtils.calcPopupCenter(this.screenWidth, this.screenHeight, this.snapPopupWidth, this.snapPopupHeight);
  this.isLargePreview = false;
}

import { image } from '@kit.ImageKit';
import { ComponentContent } from '@kit.ArkUI';

export class Params {
  public text: string | undefined | null = '';

  constructor(text: string | undefined | null) {
    this.text = text;
  }
}

@Builder
function awardBuilder(params: Params) {
  Column() {
    Text(params.text)
      .fontSize(90)
      .fontWeight(FontWeight.Bold)
      .margin({ bottom: 36 })
      .width('100%')
      .height('100%')
  }.backgroundColor('#FFF0F0F0')
}

export class GlobalStaticSnapshot {
  /**
   * 一个可以获取固定对象截图的静态方法
   */
  static async getAwardSnapshot(uiContext: UIContext, textParam: Params): Promise<image.PixelMap | undefined> {
    let resultPixmap: image.PixelMap | undefined = undefined
    let contentNode = new ComponentContent(uiContext, wrapBuilder(awardBuilder), textParam);
    await uiContext.getComponentSnapshot()
      .createFromComponent(contentNode, 320, true, { scale: 1, waitUntilRenderFinished: true })
      .then((pixmap: image.PixelMap) => {
        resultPixmap = pixmap;
      })
      .catch((err: Error) => {
        console.error(`error: ${err}`);
      })
    return resultPixmap;
  }
}