如何实现组件截图 -- componentSnapshot

在我开发手里项目的过程中，遇到这么一个功能需求：即用户在完成一系列的学习并通过考试以后，要生成一张证书，这张证书的结构是：一个背景图，上面还有文字、其他图片等，文字和图片都是根据用户信息动态生成的，整个证书在显示的时候是通过Stack组件去完成的，如果只是在程序里显示那么当然很简单，但是还需要将其作为一张图片保存到相册里。

按照我以前的做法，就是直接通过后端去生成了，或者使用canvas画布来进行处理，但是这两个方法都很麻烦，特别是后端的方案，很占服务器端的资源。通过阅读文档，我发现了一个很好用的模块：@ohos.arkui.componentSnapshot (组件截图)

这里通过传入组件的标识（即组件的id），就能够对组件进行截图，截图后得到的是PixelMap格式的图片信息，代码非常简单：

javascript 复制代码

componentSnapshot.get("root", (error: Error, pixmap: image.PixelMap) => {
            if (error) {
              console.log("error: " + JSON.stringify(error))
              return;
            }
            this.pixmap = pixmap

但是这里要注意的是："如果在组件触发更新的同时调用截图，更新的渲染内容不会被截取到，截图会返回上一帧的绘制内容。"因此，最好是把这个截图放在一个例如click事件中去调用，这样对于调用就是可控的，不能放在abouttoappear这种生命周期里去做"自动截图"，否则会和build的过程相冲突，导致无法完整截图。另外，经过测试，在预览器中是不支持的，需要在真机或者模拟器中实现。

我在通过这个功能对显示证书的Stack组件去进行截图后，还需要将其保存到相册中。这里我使用的是SaveButton安全控件，可以免申请权限的进行图片保存操作，代码如下，当然，还需要把PixelMap保存到临时文件，把这个临时文件路径给到SaveButton安全控件

javascript 复制代码

SaveButton() // 创建安全控件按钮。
        .onClick(async (event, result: SaveButtonOnClickResult) => {
          if (result == SaveButtonOnClickResult.SUCCESS) {
            try {
              let context = getContext();
              let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
              let assetChangeRequest: photoAccessHelper.MediaAssetChangeRequest = photoAccessHelper.MediaAssetChangeRequest.createImageAssetRequest(context, path);
              await phAccessHelper.applyChanges(assetChangeRequest);
              console.info('createAsset successfully, uri: ' + assetChangeRequest.getAsset().uri);
            } catch (err) {
              console.error(`create asset failed with error: ${err.code}, ${err.message}`);
            }
          } else {
            console.error('SaveButtonOnClickResult create asset failed');
          }
        })