(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210211121.5 (22)申请日 2022.03.03 (71)申请人 北京字节跳动网络技 术有限公司 地址 100041 北京市石景山区实兴大街3 0 号院3号楼 2层B-0035房间 (72)发明人 王李坤　 (74)专利代理 机构 北京中知法苑知识产权代理 有限公司 1 1226 专利代理师 李明 (51)Int.Cl. G06F 3/04847(2022.01) G06F 3/04845(2022.01) G06F 9/451(2018.01) G06F 9/54(2006.01) (54)发明名称 一种界面截图方法、 装置、 计算机设备以及 存储介质 (57)摘要 本公开提供了一种界面截图方法、 装置、 计 算机设备以及存储介质， 其中， 该方法包括： 获取 Flutter应用的目标页面中所包含的各个视图控 件的控件结构信息； 根据控件结构信息在展示界 面上展示多个视图控件， 并检测对多个视图控件 的选择操作； 确定选择操作所对应的目标视图控 件， 并基于目标视图控件生成界面截取请求； 向 终端设备发送所述界面截取请求， 并获取终端设 备反馈的截图结果。 在本公开实施例中， 在确定 出目标视图控件后， 就可以通过界面截取请求指 导终端设备针对目标视图控件的渲染区域进行 截图， 从而实现了以视图控件为基本单位的细粒 度截图， 使得用户能够更直观的观 察到目标视图 控件的渲染效果， 便于用户针对 该目标视图控件 进行后续的调试。 权利要求书3页 说明书16页 附图4页 CN 114579028 A 2022.06.03 CN 114579028 A 1.一种界面截图方法， 其特 征在于， 应用于Flut ter性能调试程序， 包括： 获取Flutter应用的目标页面中所包含的各个视图控件 的控件结构信息； 所述控件结 构信息用于指示所述各个视图控 件之间的层级关系； 根据所述控件结构信 息在展示界面上展示多个所述视图控件， 并检测对所述多个视图 控件的选择操作； 确定所述选择操作 所对应的目标视图控件， 并基于所述目标视图控件生成界面截取请 求； 所述界面截取请求包 含所述目标视图控 件的控件信息； 向终端设备发送所述界面截取请求， 并获取所述终端设备反馈的截图结果； 所述截图 结果为所述目标页面中的目标视图控 件在所述终端设备的渲染区域的图像。 2.根据权利要求1所述的方法， 其特征在于， 所述获取Flutter应用的目标页面中所包 含各个视图控 件的控件结构信息， 包括： 获取Flutter应用的目标页面中所包含各个视图控件的控件结构树； 其中， 所述控件结 构树包含多个节点和各个节点之间的层级关系， 每个节点对应所述目标页面中的一个视图 控件。 3.根据权利要求2所述的方法， 其特征在于， 所述根据所述控件结构信 息在展示界面上 展示所述多个视图控 件， 并检测对所述多个视图控 件的选择操作， 包括： 在所述展示界面上展示所述控 件结构树； 在检测到用户对所述控件结构树中节点的点击操作的情况下， 确定检测到对所述多个 视图控件的选择操作。 4.根据权利要求1所述的方法， 其特征在于， 在获取所述终端设备反馈的截图结果之 后， 所述方法还 包括： 在所述Flutter性能调试程序的展示界面展示编辑窗口， 并在所述编辑窗口中展示所 述截图结果； 响应于用户对所述编辑 窗口中所展示的截图结果的编 辑操作， 对所述截图结果进行相 应的编辑处 理， 得到编辑之后的截图结果。 5.根据权利要求4所述的方法， 其特征在于， 所述响应于用户对所述截图结果的编辑操 作， 对所述截图结果进行相应的编辑处 理， 得到编辑之后的截图结果， 包括： 检测用户对所述编 辑窗口中所展示的编 辑工具标识的触发操作， 并确定用户所触发的 编辑工具 标识的编辑类型； 对所述截图结果进行与所述编 辑类型相匹配的编辑处理， 得到所述编辑之后的截图结 果。 6.根据权利要求1所述的方法， 其特征在于， 在获取目标应用的目标页面中所包含各个 视图控件的控件结构信息之前， 所述方法还 包括： 建立所述Flut ter应用和所述Flut ter性能调试程序之间的WebSocket通信连接； 基于所述WebSockt通信连接向所述Flutter应用发送数据同步请求； 其中， 所述数据同 步请求为用于请求同步所述控 件结构信息； 获取所述Flut ter应用基于所述数据同步请求反馈的所述控 件结构信息 。 7.根据权利要求1所述的方法， 其特征在于， 所述向终端设备发送所述界面截取请求， 包括：权　利　要　求　书 1/3 页 2 CN 114579028 A 2调用所述Flut ter性能调试程序中的调试扩展应用； 基于所述Flutter性能调试程序中的调试扩展应用向所述终端设备发送所述界面截取 请求。 8.一种界面截图方法， 其特 征在于， 应用于运行有Flut ter应用的设备， 包括： 获取目标应用的目标页面中各个视图控件的控件结构信息， 并向Flutter性能调试程 序发送所述控件结构信息； 所述控件结构信息用于指示所述各个视图控件之间的层级关 系； 接收所述Flutter性能调试程序发送的界面截图请求， 其中， 所述界面截图请求中所包 含所截取的目标视图控 件的控件标识； 基于所述控件标识信 息确定所述目标页面中目标视图控件的界面视觉图像， 并将所述 界面视觉图像作为截图结果返回至所述Flut ter性能调试程序。 9.根据权利要求8所述的方法， 其特征在于， 所述基于所述控件标识信 息确定所述目标 页面中目标视图控 件的界面视 觉图像， 包括： 确定所述控件标识信息所对应的目标视图控件， 并获取所述目标视图控件的渲染数 据； 基于所述 渲染数据生成所述目标视图控 件的界面视 觉图像。 10.根据权利要求9所述的方法， 其特征在于， 所述基于所述渲染数据生成所述目标视 图控件的界面视 觉图像， 包括： 基于所述目标视图控件 的渲染数据在所述Flutter应用中对相应视图控件进行渲染， 得到渲染结果； 确定所述渲染结果的渲染截图结果， 并基于所述渲染截图结果确定所述界面视觉图 像。 11.根据权利 要求8所述的方法， 其特征在于， 在向Flutter性能调试程序发送所述控件 结构信息之前， 所述方法还 包括： 建立所述Flut ter应用和所述Flut ter性能调试程序之间的WebSocket通信连接； 获取所述Flutter性能调试程序基于所述WebSocke通信连接发送的数据同步请求； 其 中， 所述数据同步请求 为用于请求同步所述控 件结构信息； 基于所述数据同步请求获取所述目标页面中各个视图控件的控件结构信 息， 并向所述 Flutter性能调试程序发送所述控 件结构信息 。 12.根据权利要求8所述的方法， 其特征在于， 所述将所述界面视觉图像作为截图结果 返回至所述Flut ter性能调试程序， 包括： 调用所述Flut ter应用中的调试扩展应用； 基于所述Flutter应用中的调试扩展应用向所述Flutter性能调试程序发送所述截图 结果。 13.一种界面截图装置， 其特 征在于， 包括： 第一获取单元， 用于获取Flutter应用的目标页面中所包含的各个视图控件 的控件结 构信息； 所述控 件结构信息用于指示所述各个视图控 件之间的层级关系； 展示单元， 用于根据所述控件结构信息在展示界面上展示多个所述视 图控件， 并检测 对所述多个视图控 件的选择操作；权　利　要　求　书 2/3 页 3 CN 114579028 A 3