针对前端网页的截图方法以及装置、存储介质、终端制造方法及图纸

本申请公开了一种针对前端网页的截图方法以及装置、存储介质、终端，涉及网络前端技术领域以及金融领域，主要目的在于改善现有无法得到针对前端网页的准确截图结果的问题。包括：响应于针对目标区域的截图指令，识别所述目标区域内所包含的各个文档对象模型节点；将所述各个文档对象模型节点转换为对应的预设格式矢量图形数据，所述预设格式矢量图形数据中所包含的各个文档对象模型节点的属性特征是基于先标记再替换的方式得到的，以及字体特征是基于嵌入方式得到的；将所述预设格式矢量图形数据赋值到图片显示路径，以输出针对所述目标区域的截图结果。目标区域的截图结果。目标区域的截图结果。

【技术实现步骤摘要】
针对前端网页的截图方法以及装置、存储介质、终端


[0001]本申请涉及网络前端
以及金融领域，特别是涉及一种针对前端网页的截图方法以及装置、存储介质、终端。

技术介绍

[0002]网页截图功能在前端开发中，特别是营销场景相关的需求中是非常常见的，例如，截屏保存图片或继续进行分享操作，相对于普通的链接分享，截屏分享更具丰富的展示、更多的信息承载等优势。前端要实现页面的截图功能通常是基于DOM实现的，由于无法生成实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图，因此不会100％精确到真实的表示。
[0003]目前，比较常见的截图方式是使用开源的截图npm库，通过图形API重新绘制页面生成图片，包括SVG(dom
‑
to
‑
image)和Canvas(html2canvas)两种实现方案。然而，上述两种方法均无法实现对所有css属性的支持，进而导致无法得到针对前端网页的准确截图结果。

技术实现思路

[0004]有鉴于此，本申请提供一种针对前端网页的截图方法以及装置、存储介质、终端，主要目的在于改善现有无法得到针对前端网页的准确截图结果的技术问题。
[0005]依据本申请一个方面，提供了一种针对前端网页的截图方法，包括：
[0006]响应于针对目标区域的截图指令，识别所述目标区域内所包含的各个文档对象模型节点；
[0007]将所述各个文档对象模型节点转换为对应的预设格式矢量图形数据，所述预设格式矢量图形数据中所包含的各个文档对象模型节点的属性特征是基于先标记再替换的方式得到的，以及字体特征是基于嵌入方式得到的；
[0008]将所述预设格式矢量图形数据赋值到图片显示路径，以输出针对所述目标区域的截图结果。
[0009]优选的，所述将所述预设格式矢量图形数据赋值到图片显示路径，以输出针对所述目标区域的截图结果，具体包括：
[0010]若输出所述截图结果的系统为非预设系统，则将所述预设格式矢量图形数据赋值到预设图像对象的显示路径；
[0011]当监听到所述预设图像对象的加载完成事件，基于预设图像绘制接口输出所述截图结果。
[0012]优选的，所述将所述预设格式矢量图形数据赋值到图片显示路径，以输出针对所述目标区域的截图结果，还包括：
[0013]若输出所述截图结果的系统为预设系统，则将所述预设格式矢量图形数据赋值到预设图像对象的显示路径，并将所述预设图像对象放置于临时文档对象模型节点中；
[0014]当监听到所述预设图像对象的加载完成事件，基于预设图像绘制接口输出所述截
图结果，并删除所述临时文档对象模型节点。
[0015]优选的，所述将所述各个文档对象模型节点转换为对应的预设格式矢量图形数据，具体包括：
[0016]基于预设方法对各个所述文档对象模型节点进行克隆处理，生成各个所述文档对象模型节点的第一克隆节点；
[0017]基于先标记再替换的方式分别将各个所述文档对象模型节点的原始属性特征添加到所述第一克隆节点，生成第二克隆节点；
[0018]基于嵌入方式分别将各个所述文档对象模型节点的原始字体特征添加到所述第二克隆节点，生成第三克隆节点；
[0019]将各个所述第三克隆节点转换为预设格式矢量图形；
[0020]将所述预设格式矢量图形转换为预设格式矢量图形数据。
[0021]优选的，所述基于先标记再替换的方式分别将各个所述文档对象模型节点的原始属性特征添加到所述第一克隆节点，生成第二克隆节点，具体包括：
[0022]遍历各个所述文档对象模型节点的原始属性特征，筛选出无法支持的属性特征，并将所述无法支持的属性特征标记为预设别名属性特征；
[0023]将所述预设别名属性特征以及所对应的原始属性特征添加到所述第一克隆节点，生成第二克隆节点。
[0024]优选的，所述基于嵌入方式分别将各个所述文档对象模型节点的原始字体特征添加到所述第二克隆节点，生成第三克隆节点，具体包括：
[0025]遍历各个所述文档对象模型节点的原始字体特征，获取全量网络字体嵌入声明；
[0026]根据所述网络字体嵌入声明获取各个网络字体对应的文件；
[0027]将所述文件的内容进行编码处理，并将编码处理后的文件内容添加到所述第二克隆节点，生成第三克隆节点。
[0028]优选的，所述将所述预设格式矢量图形数据赋值到图片显示路径，以输出针对所述目标区域的截图结果之后，所述方法还包括：
[0029]复制所述截图结果，并输出保存图片按钮，和/或，分享图片按钮；
[0030]根据用户的触发操作执行针对所述截图结果的保存任务，和/或，分享任务。
[0031]依据本申请另一个方面，提供了一种针对前端网页的截图装置，包括：
[0032]识别模块，用于响应于针对目标区域的截图指令，识别所述目标区域内所包含的各个文档对象模型节点；
[0033]转换模块，用于将所述各个文档对象模型节点转换为对应的预设格式矢量图形数据，所述预设格式矢量图形数据中所包含的各个文档对象模型节点的属性特征是基于先标记再替换的方式得到的，以及字体特征是基于嵌入方式得到的；
[0034]输出模块，用于将所述预设格式矢量图形数据赋值到图片显示路径，以输出针对所述目标区域的截图结果。
[0035]优选的，所述输出模块，具体用于：
[0036]若输出所述截图结果的系统为非预设系统，则将所述预设格式矢量图形数据赋值到预设图像对象的显示路径；
[0037]当监听到所述预设图像对象的加载完成事件，基于预设图像绘制接口输出所述截
图结果。
[0038]优选的，所述输出模块，还包括：
[0039]若输出所述截图结果的系统为预设系统，则将所述预设格式矢量图形数据赋值到预设图像对象的显示路径，并将所述预设图像对象放置于临时文档对象模型节点中；
[0040]当监听到所述预设图像对象的加载完成事件，基于预设图像绘制接口输出所述截图结果，并删除所述临时文档对象模型节点。
[0041]优选的，所述转换模块，具体包括：
[0042]克隆单元，用于基于预设方法对各个所述文档对象模型节点进行克隆处理，生成各个所述文档对象模型节点的第一克隆节点；
[0043]标记再替换单元，用于基于先标记再替换的方式分别将各个所述文档对象模型节点的原始属性特征添加到所述第一克隆节点，生成第二克隆节点；
[0044]嵌入单元，用于基于嵌入方式分别将各个所述文档对象模型节点的原始字体特征添加到所述第二克隆节点，生成第三克隆节点；
[0045]第一转换单元，用于将各个所述第三克隆节点转换为预设格式矢量图形；
[0046]第二转换单元，用于将所述预设格式矢量图形转换为预设格式矢量图形数据。
[0047]优选的，所述标记再替换单元，具体用于：
[0048]遍历各个所述文档对象本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种针对前端网页的截图方法，其特征在于，包括：响应于针对目标区域的截图指令，识别所述目标区域内所包含的各个文档对象模型节点；将所述各个文档对象模型节点转换为对应的预设格式矢量图形数据，所述预设格式矢量图形数据中所包含的各个文档对象模型节点的属性特征是基于先标记再替换的方式得到的，以及字体特征是基于嵌入方式得到的；将所述预设格式矢量图形数据赋值到图片显示路径，以输出针对所述目标区域的截图结果。2.根据权利要求1所述的方法，其特征在于，所述将所述预设格式矢量图形数据赋值到图片显示路径，以输出针对所述目标区域的截图结果，具体包括：若输出所述截图结果的系统为非预设系统，则将所述预设格式矢量图形数据赋值到预设图像对象的显示路径；当监听到所述预设图像对象的加载完成事件，基于预设图像绘制接口输出所述截图结果。3.根据权利1所述的方法，其特征在于，所述将所述预设格式矢量图形数据赋值到图片显示路径，以输出针对所述目标区域的截图结果，还包括：若输出所述截图结果的系统为预设系统，则将所述预设格式矢量图形数据赋值到预设图像对象的显示路径，并将所述预设图像对象放置于临时文档对象模型节点中；当监听到所述预设图像对象的加载完成事件，基于预设图像绘制接口输出所述截图结果，并删除所述临时文档对象模型节点。4.根据权利要求1所述的方法，其特征在于，所述将所述各个文档对象模型节点转换为对应的预设格式矢量图形数据，具体包括：基于预设方法对各个所述文档对象模型节点进行克隆处理，生成各个所述文档对象模型节点的第一克隆节点；基于先标记再替换的方式分别将各个所述文档对象模型节点的原始属性特征添加到所述第一克隆节点，生成第二克隆节点；基于嵌入方式分别将各个所述文档对象模型节点的原始字体特征添加到所述第二克隆节点，生成第三克隆节点；将各个所述第三克隆节点转换为预设格式矢量图形；将所述预设格式矢量图形转换为预设格式矢量图形数据。5.根据权利要求4所述的方法，其特征在于，所述基于先标记再替换的方式分别将各个所述文档对象模型节点的原始属性特征添加到所述第一克隆节点，生成第二克隆节点，具体包括：遍历各个所述文档对象模...

【专利技术属性】
技术研发人员：姬颖，张翔，
申请(专利权)人：平安国际融资租赁有限公司，
类型：发明
国别省市：