网页截图方法和网页截图装置.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN113744363A(43)申请公布日2021.12.03(21)申请号202010477170.4(22)申请日2020.05.29(71)申请人北京沃东天骏信息技术有限公司地址100176北京市北京经济技术开发区科创十一街18号院2号楼4层A402室申请人北京京东世纪贸易有限公司(72)发明人朱志达张宇(74)专利代理机构中原信达知识产权代理有限责任公司11219代理人王安娜王志远(51)Int.Cl.G06T11/60(2006.01)权利要求书2页说明书11页附图5页(54)发明名称网页截图方法和网页截图装置(57)摘要本发明公开了网页截图方法和网页截图装置，涉及计算机技术领域。该方法的一具体实施方式包括：接收网页截图请求，创建待截图网页对应的指令画布，利用指令画布确定待截图网页对应的待截图区域；基于画布插件生成待截图网页对应的网页画布元素，创建裁剪后的画布元素；利用裁剪后的画布元素，按照待截图区域对网页画布元素进行裁剪处理，生成网页截图图片。该实施方式能够解决现有技术存在的在网页中无法实时根据用户的想法进行截图导致截图效果单一的问题，提高用户体验。CN113744363ACN113744363A权利要求书1/2页1.一种网页截图方法，其特征在于，包括：接收网页截图请求，创建待截图网页对应的指令画布，利用所述指令画布确定所述待截图网页对应的待截图区域；基于画布插件生成所述待截图网页对应的网页画布元素，创建裁剪后的画布元素；利用所述裁剪后的画布元素，按照所述待截图区域对所述网页画布元素进行裁剪处理，生成网页截图图片。2.根据权利要求1所述的方法，其特征在于，所述创建待截图网页对应的指令画布，利用所述指令画布确定所述待截图网页对应的待截图区域，包括：获取所述待截图网页，利用脚本语言创建所述待截图网页对应的指令画布，设置所述指令画布的坐标轴，其中，所述指令画布覆盖所述待截图网页，且所述指令画布的尺寸与所述待截图网页的尺寸相同；利用所述指令画布监听截图操作事件，根据所述截图操作事件和所述指令画布的坐标轴，确定所述待截图网页对应的待截图区域。3.根据权利要求2所述的方法，其特征在于，在确定所述待截图网页对应的待截图区域之后，所述方法还包括：显示标注工具栏，通过所述标注工具栏获取标注数据。4.根据权利要求3所述的方法，其特征在于，在显示标注工具栏之前，所述方法还包括：判断所述网页截图请求中是否包括标注请求，若是，则显示所述标注工具栏。5.根据权利要求1所述的方法，其特征在于，在利用所述指令画布确定所述待截图网页对应的待截图区域之后，所述方法还包括：释放所述指令画布和所述待截图区域。6.根据权利要求1所述的方法，其特征在于，所述基于画布插件生成所述待截图网页对应的网页画布元素，创建裁剪后的画布元素，包括：基于html2canvas插件将所述待截图网页下的节点转换为待截图Canvas元素；利用脚本语言创建裁剪后的Canvas元素。7.根据权利要求6所述的方法，其特征在于，所述利用所述裁剪后的画布元素，按照所述待截图区域对所述网页画布元素进行裁剪处理，生成网页截图图片，包括：利用所述裁剪后的Canvas元素调用裁剪语句，按照所述待截图区域对所述待截图Canvas元素进行裁剪处理，获得最终裁剪后的Canvas元素；利用所述最终裁剪后的Canvas元素调用图片生成语句，生成所述最终裁剪后的Canvas元素对应的网页截图图片。8.根据权利要求3所述的方法，其特征在于，在生成网页截图图片之后，所述方法还包括：根据所述标注数据对所述网页截图图片进行标注处理。9.一种网页截图装置，其特征在于，包括：确定模块，用于接收网页截图请求，创建待截图网页对应的指令画布，利用所述指令画布确定所述待截图网页对应的待截图区域；生成模块，用于基于画布插件生成所述待截图网页对应的网页画布元素，创建裁剪后的画布元素；裁剪模块，用于利用所述裁剪后的画布元素，按照所述待截图区域对所述网页画布元2CN113744363A权利要求书2/2页素进行裁剪处理，生成网页截图图片。10.一种电子设备，其特征在于，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-8中任一所述的方法。11.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-8中任一所述的方法。3CN113744363A说明书1/11页网页截图方法和网页截图装置技术领域[0001]本发明涉及计算机技术领域，尤其涉及一种网页截图方法和网页截图装置。背景技术[0002]随着前端开发技术的不断发展以及HTML5Ca