如何实现组件截图 -- componentSnapshot

上海张律师
• 阅读 1

​ ##HarmonyOS 应用开发##

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

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

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

  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安全控件

  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');
          }
        })

点赞
收藏
评论区
推荐文章
冴羽 冴羽
3年前
VuePress 博客优化之开启 HTTPS
前言在中,我们使用VuePress搭建了一个博客,最终的效果查看:。注意此时,我们的域名还是,众所周知,开启HTTPS有很多好处,比如可以实现数据加密传输等,那我们如何开启HTTPS配置呢?1.购买证书阿里云提供了免费证书可以使用,在每个自然年内,都可以通过SSL证书服务一次性申领20张免费证书。1.1购买证书访问,选择「D
Wesley13 Wesley13
3年前
java访问Https服务的客户端示例
关于证书1、每个人都可以使用一些证书生成工具为自己的https站点生成证书(比如JDK的keytool),大家称它为“自签名证书”,但是自己生成的证书是不被浏览器承认的,所以浏览器会报安全提示,要求你手动安装证书,提示风险,是否继续等。只有通过权威的CA机构付费获得的证书才能被浏览器承认。2、证书(无客户端服务端之分)保存着IP信息、证书过
Wesley13 Wesley13
3年前
java 根据图片文字动态生成图片
今天在做热敏打印机打印二维码,并有文字描述,想到的简单的方法就是根据热敏打印机的纸张宽度和高度,生成对应的图片,如下:packagecom.orisdom.utils;importlombok.extern.slf4j.Slf4j;importjavax.imageio.ImageIO;importjava.awt.;importja
Stella981 Stella981
3年前
Spring Boot demo系列(六):HTTPS
2021.2.24更新1概述本文演示了如何给SpringBoot应用加上HTTPS的过程。2证书虽然证书能自己生成,使用JDK自带的keytool即可,但是生产环境是不可能使用自己生成的证书的,因此这里使用的证书是购买过来的,具体流程就不说了,去云厂商处购买即可。3配
Stella981 Stella981
3年前
Kafka及周边深度了解
  之前介绍了使用官方脚本自动化启动一个Fabric网络,并且所有的证书都是通过官方的命令行工具cryptogen直接生成网络中的所有节点的证书。在开发环境可以这么简单进行,但是生成环境下还是需要我们自定义对网络中的节点的证书进行配置。    所以在本文中,将会详细介绍一个从手动生成证书一直到启动网络的整体步骤。本文只交代整体的搭建步骤。对于Fa
Stella981 Stella981
3年前
Kubernetes多master部署(7)
运行node组件首先我们需要在master上面生成一个角色用于node上证书绑定认证在master上面操作(65)创建认证用户kubectlcreateclusterrolebindingkubeletbootstrapclusterrolesystem:nodebootstrapperuserk
上海张律师 上海张律师
6小时前
英语单词学习页面+单词朗读实现 -- 【2】单词朗读实现 ##HarmonyOS SDK AI##
​注:我需要先强调一下,我的目的不是把官网文档里的东西复制一遍……而是分享自己实际开发过程中遇到的问题和思考仍然先放一下效果图这里对于单词和例句,都是可以通过点击图片进行播报的这个功能的原理是通过文字转语音的形式实现的,之前也写过文章分享过在API9下如何
上海张律师 上海张律师
7小时前
bindsheet+键盘在页面跳转时的bug及处理思路
​HarmonyOS应用开发最近做的一个项目中,有这样的一个需求在A页面中,点击某一项目后,会弹出一个bindsheet,同时,会给TextInput组件自动加上焦点,目的是为了弹出输入框,图片如下:当用户输入了金额数字后,点击“去计算”按钮,则通过rou
上海张律师 上海张律师
7小时前
组件截图sdk -- screenshot_hm介绍 ##三方SDK##
大家可以试想一下这样的功能场景:1.用户在完成了一系列的学习积分和考试后,能够获得一张证书,这个证书除了通用的底图外,对于姓名,时间,成绩等数据是根据用户情况动态生成的,然后还需要有将证书保存到相册的情况2.在一些记账类app中,用户可以通过图表的形似查看
GeorgeGcs GeorgeGcs
2小时前
【HarmonyOS 5】鸿蒙实现手写板
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、前言实现一个手写板功能,基本思路如下:创建一个可交互的组件,用户在屏幕上触摸并移动手指时,会根据触摸的位置动态生成路径,并使用黑色描边绘制在屏幕上。当用户按下屏幕时,记录按下点的坐标作