CN112596833A - 网页截图生成方法、装置、设备以及存储介质 - Google Patents

Abstract

本发明公开一种网页截图生成方法、装置、设备以及存储介质，涉及互联网技术领域。网页截图生成方法包括：在目标网页加载完毕后，获取目标网页的原始页面元素与预设关键元素；从所述原始页面元素中识别与所述预设关键元素相关联的目标页面元素；在所述目标页面元素中添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素；基于所述结果页面元素，渲染并生成所述目标网页对应的网页截图。本发明可在截图生成过程中直接生成高亮显示预设关键元素的网页截图。

Description

网页截图生成方法、装置、设备以及存储介质

技术领域

本发明涉及互联网技术领域，特别涉及一种网页截图生成方法、装置、设备以及存储介质。

背景技术

相关技术中，在广告抓取业务中常常需要获取到广告截图作为证据，现有的页面截图大多基于chromium实现代码自动化截图。

但是截图的功能比较单一，对网页界面中需要注意的显示元素或者显示区域还需要截图后再执行额外操作。

发明内容

本发明的主要目的是提供一种网页截图生成方法、装置、设备以及存储介质，旨在解决现有技术中对网页界面中需要注意的显示元素或者显示区域还需要截图后再执行额外操作的技术问题。

为实现上述目的，本发明提出的一种网页截图生成方法，包括：

在目标网页加载完毕后，获取目标网页的原始页面元素与预设关键元素；

从所述原始页面元素中识别与所述预设关键元素相关联的目标页面元素；

在所述目标页面元素中添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素；

基于所述结果页面元素，渲染并生成所述目标网页对应的网页截图。

可选的，所述获取目标网页的原始页面元素与预设关键元素的步骤之前，所述方法还包括：

接收所述目标网页的超文本标记语言HTML数据；

根据所述超文本标记语言HTML数据，加载所述目标网页。

可选的，所述获取目标网页的原始页面元素与预设关键元素的步骤之前，所述方法还包括：

响应于对目标网页的访问请求，获取所述目标页面的统一资源定位符URL；

根据所述URL加载所述目标网页。

可选的，所述从所述原始页面元素中识别与所述预设关键元素相关联的目标页面元素的步骤，包括：

从所述原始页面元素对应的代码数据中识别出具有所述预设关键元素的目标文本；

将具有所述目标文本的第一页面元素识别为所述目标页面元素。

可选的，所述在目标网页加载完毕后，获取目标网页的原始页面元素与预设关键元素的步骤之前，所述方法还包括：

滚动所述目标网页至满足预设条件，以触发所述目标网页的加载完毕事件，所述加载完毕事件为网页内至少部分页面元素加载完成后触发的系统事件；

所述在目标网页加载完毕后，获取目标网页的原始页面元素与预设关键元素的步骤，包括：

在目标网页的所述加载完毕事件加载完成后，获取目标网页的原始页面元素与预设关键元素。

可选的，所述在所述目标页面元素中添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素的步骤，包括：

在所述目标页面元素以及所述加载完毕事件对应的第二页面元素中均添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素。

可选的，所述预设条件包括：

从上至下滚动所述目标网页至网页底部；或者

滚动所述网页页面预设长度。

可选的，所述滚动所述目标网页至满足预设条件，包括：

以预设速率滚动所述目标网页至满足预设条件。

可选的，所述基于所述结果页面元素，渲染并生成所述目标网页对应的网页截图的步骤之前，所述方法还包括：

获取图像编辑指令；

所述基于所述结果页面元素，渲染并生成所述目标网页对应的网页截图的步骤包括：

基于所述图像编辑指令与所述结果页面元素，渲染并生成所述目标网页对应的网页截图。

可选的，所述图像编辑指令用于调整所述网页截图以下任一项参数：

所述网页界面的展示类型，所述展示类型包括电脑端网页类型与移动端网页类型；

所述网页截图的窗口大小；

所述网页截图中至少一个像素的像素值；以及

生成所述目标网页的完整网页或者部分网页。

可选的，所述基于所述结果页面元素，渲染并生成所述目标网页对应的网页截图的步骤之后，所述方法还包括：

将预置浏览器界面与所述网页截图拼接，以获得中间图像；

将所述目标网页的地址与标题添加至所述中间图像的相应位置，生成所述目标网页的浏览器页面截图。

可选的，所述基于所述结果页面元素，渲染并生成所述目标网页对应的网页截图之后，所述方法还包括：

输出所述网页截图的二进制文件。

可选的，所述在所述目标页面元素中添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素的步骤包括：

在所述目标页面元素中添加预设高亮框和/或预设样式，以获得所述原始页面元素更新后的结果页面元素。

此外，本发明还提供了一种网页截图生成装置，包括：

元素获取模块，用于在目标网页加载完毕后，获取目标网页的原始页面元素与预设关键元素；

元素识别模块，用于从所述原始页面元素中识别与所述预设关键元素相关联的目标页面元素；

元素更新模块，在所述目标页面元素中添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素；

截图生成模块，基于所述结果页面元素，渲染并生成所述目标网页对应的网页截图。

可选的，还包括：

网页加载模块，用于接收所述目标网页的超文本标记语言HTML数据；根据所述超文本标记语言HTML数据，加载所述目标网页。

可选的，所述网页加载模块还用于响应于对目标网页的访问请求，获取所述目标页面的统一资源定位符URL；根据所述URL加载所述目标网页。

可选的，元素识别模块还用于从所述原始页面元素对应的代码数据中识别出具有所述预设关键元素的目标文本；将具有所述目标文本的第一页面元素识别为所述目标页面元素。

可选的，所述网页加载模块还用于滚动所述目标网页至满足预设条件，以触发所述目标网页的加载完毕事件，所述加载完毕事件为网页内所有的页面元素加载完成后触发的系统事件；

所述元素获取模块还用于在目标网页的所述加载完毕事件加载完成后，获取目标网页的原始页面元素与预设关键元素。

可选的，所述元素更新模块用于在所述目标页面元素以及所述加载完毕事件对应的第二页面元素中均添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素。

可选的，还包括：

指令获取模块，用于获取图像编辑指令；

截图生成模块还用于基于所述图像编辑指令与所述结果页面元素，渲染并生成所述目标网页对应的网页截图。

可选的，还包括：

截图拼接模块，用于将预置浏览器界面与所述网页截图拼接，以获得中间图像；将所述目标网页的地址与标题添加至所述中间图像的相应位置，生成所述目标网页的浏览器页面截图。

可选的，其特征在于，还包括：

截图输出模块，用于输出所述网页截图的二进制文件。

可选的，元素更新模块还用于在所述目标页面元素中添加预设高亮框和/或预设样式，以获得所述原始页面元素更新后的结果页面元素。

第三方面，本发明还提供了一种网页截图生成设备，所述设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的网页截图生成程序，所述网页截图生成程序配置为实现上述的网页截图生成方法的步骤。

第四方面，本发明还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有网页截图生成程序，所述网页截图生成程序被处理器执行时实现上述的网页截图生成方法的步骤。

本发明技术方案提供了一种网页截图生成方法，通过在从所述原始页面元素中识别与所述预设关键元素相关联的目标页面元素，然后在所述目标页面元素中添加预设高亮标记，以获得所述原始页面元素变化后的结果页面元素，从而基于所述结果页面元素，渲染并生成所述目标网页对应的网页截图。本发明通过在截图生成过程中将预设高亮标记添加至与预设关键元素相关联的页面元素中，从而可生成高亮显示预设关键元素的网页截图，而无需再截图完成后再执行额外操作，节省了时间，方便后续对截图数据中预设信息的读取。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图示出的结构获得其他的附图。

图1为本发明网页截图生成设备一实施例的硬件结构构示意图；

图2为本发明网页截图生成方法第一实施例的流程示意图；

图3为本发明网页截图生成方法生成的一网页截图；

图4为本发明网页截图生成方法第二实施例的流程示意图；

图5为本发明网页截图生成方法第三实施例的流程示意图；

图6为本发明网页截图生成方法第四实施例的流程示意图；

图7为本发明网页截图生成方法第五实施例的流程示意图；

图8为本发明网页截图生成装置第一实施例的示意图；

图9为本发明网页截图生成装置第二实施例的示意图；

图10为本发明网页截图生成装置第三实施例的示意图；

图11为本发明网页截图生成装置第四实施例的示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

页面截图，是一种可行的电子取证方法，利用该方法将与违法活动相关的页面所显示的内容以图片形式保存下来，即可作为电子证物使用。且在广告抓取业务中常常需要获取到广告截图作为证据，现有的页面截图大多基于chromium实现模拟截图，在此过程中并不需要在显示器上显示网页而自动渲染并生成截图。但是该模拟截图的功能比较单一，并不方便后续处理人员读取截图中的关键信息，导致对网页界面中需要注意的显示元素或者显示区域还需要截图后再执行额外标记或者框选操作。

为此，本发明实施例提供了一种网页截图生成方法的各个实施例，该方法在截图生成过程中将预设高亮标记添加至与预设关键元素相关联的页面元素中，从而可生成高亮显示预设关键元素的网页截图，而无需再截图完成后再执行额外操作，节省了时间，方便后续对截图数据中预设信息的读取。便于使用在广告抓取业务中，对广告落地页进行截图，以获得便于读取信息的电子证物。

参照图1，图1为本发明实施例方案涉及的硬件运行环境的网页截图生成方法的推荐设备结构示意图。

设备可以是笔记本电脑、个人数字助理(PDA)、平板电脑(PAD)等用户设备(UserEquipment，UE)、车载设备、可穿戴设备、计算设备或连接到无线调制解调器的其它处理设备、移动台(Mobile station，MS)等。设备可能被称为用户终端、便携式终端、台式终端等以及服务器。

通常，设备包括：至少一个处理器301、存储器302以及存储在所述存储器上并可在所述处理器上运行的网页截图生成程序，所述网页截图生成程序配置为实现网页截图生成方法的步骤。

处理器301可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器301可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器301也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(CentralProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器301可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。处理器301还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关网页截图生成操作，使得网页截图生成模型可以自主训练学习，提高效率和准确度。

存储器302可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器302还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器302中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器301所执行以实现本申请中方法实施例提供的广告地址确定方法。

在一些实施例中，设备还可选包括有：通信接口303和至少一个外围设备。处理器301、存储器302和通信接口303之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与通信接口303相连。具体地，外围设备至少包括：射频电路304。

通信接口303可被用于将I/O(Input/Output，输入/输出)相关的至少一个外围设备连接到处理器301和存储器302。通信接口303通过外围设备用于接收用户输入的目标网页的网址、超文本标记语言HTML数据、预设关键元素或者图像编辑指令。在一些实施例中，处理器301、存储器302和通信接口303被集成在同一芯片或电路板上；在一些其他实施例中，处理器301、存储器302和通信接口303中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路304用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路304通过电磁信号与通信网络以及其他通信设备进行通信，用于接收用户输入的目标网页的网址、超文本标记语言HTML数据、预设关键元素或者图像编辑指令。射频电路304将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路304包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路304可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：城域网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路304还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。

本领域技术人员可以理解，图1中示出的结构并不构成对广告地址确定设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

本发明实施例提供了一种网页截图生成方法，参照图2，图2为本发明网页截图生成方法的第一实施例的流程示意图。

本实施例中，网页截图生成方法包括以下步骤：

步骤S101、在目标网页加载完毕后，获取目标网页的原始页面元素与预设关键元素。

目标网页为需要截图而留作电子证物的网页。在该目标网页上会显示有预设关键元素，该预设关键元素可以是一些关键字，例如，在广告监控业务中识别出来的违法广告主体向相关联的关键字，如“xx药”或者“赌博”等。或者该预设关键元素还可以是图片，例如违反相应法律法规的不健康图片。而目标网页的原始页面元素为未修改或者编辑的页面元素，可通过对原始页面元素生成页面截图，此时的页面截图与浏览目标网页的界面一致。

在本实施例中，加载目标网页的主体可以视具体情况、具体需求进行选择，本说明书无需限定；例如，可以是云服务器，通过网络连接接收来自用户的截图请求，也可以是用户的个人电脑，通过软件模块之间的通信机制接收用户的截图请求，等等。在示出的一种实施方式中，上述方法应用于分布式服务器集群，上述截图请求可以包括对应多个待截图页面的子请求；上述分布式服务器集群可以根据预设的分配算法，分别完成对上述多个目标页面的截图任务。

在示出的另一种实施方式中，加载目标网页可以是通过服务器上的docker容器实现。下文以docker容器为例进一步说明。服务器中的docker容器接收到用户设备发送的截图请求后，即开始加载目标网页。

值得一提的是，本实施例中，加载网页可包括以下步骤；

(a)服务器接收所述目标网页的超文本标记语言HTML数据。

(b)服务器根据所述超文本标记语言HTML数据，加载所述目标网页。

具体而言，用户设备直接将需要截图的目标网页的超文本标记语言HTML数据发送至服务器，服务器接收到该超文本标记语言HTML数据后，创建docker容器，docker容器内包括相应的浏览器等运行文件，通过拼接DATA URL头data:text/html；charset＝UTF-8使HTML文件成为可执行js脚本的html网页，从而打开拼接后的URL进行后续的截图动作。

或者，加载网页还可包括以下步骤：

(c)响应于对目标网页的访问请求，获取所述目标页面的统一资源定位符URL。

(d)根据所述URL加载所述目标网页。

具体而言，用户设备将需要截图的目标网页的网址发送至服务器，服务器接收到该请求后，创建具有截图服务(例如chromium)浏览器的docker容器，访问该URL链接的网页而执行相应的截图操作。

在加载网页完成后，docker容器中的浏览器建立与web服务器的连接，从而可接收到web服务器返回的目标网页的原始页面元素。一般的，用户设备上的浏览器即可基于取得的原始页面元素进行相应网页的呈现。本实施例中，docker容器中的浏览器即可基于取得的原始页面元素进行后续的截图操作。

步骤S102、从所述原始页面元素中识别与所述预设关键元素相关联的目标页面元素。

该实施例中，docker容器中的浏览器解析下载得到的目标网页的原始页面元素，从而从中识别出与预设关键元素相关联的目标页面元素。

例如，预设关键元素为目标网页的html文件时获得的dom树中id为elementid的元素，此时，docker容器中的浏览器加载目标网页后解析目标网页的html文件时，即可将id为elementid的元素识别出来。识别出来的元素即为目标页面元素。

在示出的一种实施方式中，预设关键元素为文本，此时，步骤S102包括：

(1)从所述原始页面元素对应的代码数据中识别出具有所述预设关键元素的目标文本。

(2)将具有所述目标文本的第一页面元素识别为所述目标页面元素。

本实施例中，docker容器中的浏览器解析目标网页的html文件，然后从html文件所具有的所有字符串中识别出具有预设关键元素的目标文本，从而可将具有该目标文本的元素识别出来。

例如，可从目标网页的html文件中精确匹配出具有“唐山”关键文本的至少一个元素，例如，具有“唐山A医院”的元素A、“唐山B大学”的元素。然后将该些元素作为目标页面元素。

步骤S103、在所述目标页面元素中添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素。

在识别出需要处理的目标页面元素后，即可对目标页面元素进行处理，即对所述目标页面元素添加预设高亮标记，使得目标页面元素更新。由于目标页面元素更新，所有原始页面元素更新为结果页面元素。

即此步骤中，docker容器中的浏览器可利用相应的高亮脚本更改目标网页的html文件中目标页面元素的代码，增加相应的高亮标签或者高亮框，使得渲染生成截图后，目标页面元素显示时附带有预设高亮标记。例如，对于预设关键元素为“唐山”，已经识别出了相应的目标页面元素：“唐山凤凰妇产医院”、“简介：唐山凤凰妇产医院，打造……”，即可添加相应的预设高亮标记如高亮框，使得在生成网页截图时，“唐山凤凰妇产医院”与“简介：唐山凤凰妇产医院，打造……”均具有相应的高亮框，从而使得可其他人员在查看截图时，可第一眼观察到“唐山凤凰妇产医院”与“简介：唐山凤凰妇产医院，打造……”两个框型显示区域。

值得一提的是，步骤S103中，预设高亮标记可以是高亮框，还可以是预设样式。

此时，步骤S103变为：在所述目标页面元素中添加预设高亮框和/或预设样式，以获得所述原始页面元素更新后的结果页面元素。

例如，预设高亮框可以是border边框预设样式，预设样式还可以是background-color背景颜色样式。

步骤S104、基于所述结果页面元素，渲染并生成所述目标网页对应的网页截图。

docker容器中浏览器可基于已经更新的结果页面元素，渲染并生成所述目标网页对应的网页截图。

本实施例中，在加载目标网页并建立连接后，服务器直接通过添加预设高亮标记的形式来更新具有预设关键元素的目标页面元素，从而使得渲染生成的网页截图中具有高亮显示的目标页面元素，以方便后续人员截图数据中预设信息的读取。

基于本发明实施例的第一实施例，提出本发明实施例的第二实施例。参阅图，图为本发明实施例的流程示意图。

本实施例中，网页截图生成方法包括以下步骤：

步骤S201、滚动所述目标网页至满足预设条件，以触发所述目标网页的加载完毕事件。

由于很多网站的广告并不是在打开网页时即出现在浏览器的界面上，而是在网页的滚动条滚动一段时间、滚动一段距离甚至于滚动至网页底部才能触发广告。因此，本实施例中，在docker容器中的浏览器打开目标网页后，还需要模拟滚动目标网页以触发相应的加载完毕事件。

其中，所述加载完毕事件为网页内至少部分页面元素加载完成后触发的系统事件，系统事件可以是在部分页面元素加载完成后即触发，也可以是目标网页的全部页面元素加载完成后触发。例如在网页的滚动条下拉过程中触发目标网页的相应广告位以及广告位上的广告内容展示在浏览器界面上，或者系统事件还可以是相应的推荐链接被触发展示在浏览器界面上，甚至于系统事件还可以是在目标网页的所有页面元素均加载完成后触发链接至另一网页。

值得一提的是，本实施例中，预设条件可以是：

(a)从上至下滚动所述目标网页至网页底部。

(b)滚动所述网页页面预设长度。

本实施例中，docker容器中的浏览器以预设速率滚动所述目标网页，可以是打开目标网页中的所有页面元素后，即从上至下滚动所述目标网页至网页底部。或者，滚动所述网页页面到一定长度。例如，docker容器中的浏览器模拟滚动目标网页，每0.1秒下拉100px的距离，下拉至网页底部或达到设定的最大长度15000px时停止滚动。

步骤S202、在目标网页的所述加载完毕事件加载完成后，获取目标网页的原始页面元素与预设关键元素。

该步骤中，在docker容器中的浏览器模拟下拉目标网页的滚动条并触发加载完毕事件，且加载完毕事件被加载完毕后，再接收到web服务器返回的目标网页的原始页面元素。

步骤S203、从所述原始页面元素中识别与所述预设关键元素相关联的目标页面元素。

步骤S204、在所述目标页面元素中添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素。

在示出的一种实施方式中，步骤S204还可以为：

在所述目标页面元素以及所述加载完毕事件对应的第二页面元素中均添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素。

其中，第二页面元素为与加载完毕事件对应的页面元素，且值得一提的是，第二页面元素具有时效性，在不同的时间对同一目标网页截图，获得的第二页面元素可能不同。例如，对于目标网页A，在某一终端第一次浏览目标网页时，目标网页的加载完毕事件为推送一般的美容产品广告，而在终端浏览自她内容，例如贷款后，目标网页的加载完毕事件为推送违法的贷款广告。因此，浏览器在不同的时间打开目标网页后下载的html数据不同。此时，可以加载完毕事件对应的第二页面元素不同。

因此，本实施例中还可以将与加载完毕事件对应的第二页面元素也高亮显示。例如，可将加载完毕事件预置为具有URL的广告，此时，浏览器可从下载的html数据中将具有URL的相应元素识别为第二页面元素。或者，浏览器可以通过jsoup分析抓取到的html数据，从而识别出html源码文件中的相应广告。第二页面元素被识别后，即可将其高亮显示出来。将第二页面元素高亮显示，从而可以方便人员对截图数据中加载完毕事件对应的信息的读取，如可及时从截图中读取到网页的广告位置或者推荐位置等。

步骤S205、基于所述结果页面元素，渲染并生成所述目标网页对应的网页截图。

本实施例中，通过模拟滚动目标网页的至满足预设条件，以触发所述目标网页的加载完毕事件，防止遗漏目标网页的页面内容，从而使得渲染生成的网页截图中具有高亮显示的目标页面元素，以及与加载完毕事件相关的第二页面元素，以方便后续人员对截图数据中预设信息以及加载完毕事件对应的信息的读取。

基于本发明网页截图生成方法的第一实施例和第二实施例，提出本发明的第三实施例。参阅图，图为本实施例的流程示意图。

本实施例中，网页截图生成方法包括以下步骤：

步骤S301、在目标网页加载完成后，获取目标网页的原始页面元素与预设关键元素。

步骤S302、从所述原始页面元素中识别与所述预设关键元素相关联的目标页面元素。

步骤S303、在所述目标页面元素中添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素。

步骤S304、获取图像编辑指令。

本实施例中，图像编辑指令用于根据用户的需求调整输出的网页截图。图像编辑指令可以相应的参数，在截图服务中，用户将其输入到服务器中，docker容器中的浏览器根据图像编辑指令来调整网页截图的相应参数。

在示出的一实施方式中，图像编辑指令包括：

(1)、所述网页界面的展示类型，所述展示类型包括电脑端网页类型与移动端网页类型。

此时，图像编辑指令可以是“mode”以及相应的类型。docker容器将根据相应的类型模拟pc端和移动端打开网页以截取出pc端或移动端尺寸的图片。

(2)、所述网页截图的窗口大小。

此时，图像编辑指令可以是“width&height”指令，以及相应的数值，docker容器将根据相应的数值配置模拟浏览器的宽度以及高度，即可视窗口大小，从而再根据模拟浏览器的窗口大小渲染生成相应尺寸的网页截图。

(3)、所述网页截图中至少一个像素的像素值。

此时，图像编辑指令可以是“quality”指令，以及相应的数值，docker容器将根据相应的数值配置截图的清晰度，从而获得更高质量或者低质量的网页截图。高质量网页截图便于后续作为电子证物使用时可以清晰显示相应的页面内容。低质量网页截图便于再服务器中更多的存储截图数据。

(4)、生成所述目标网页的完整网页或者部分网页。

此时，图像编辑指令可以是“fullPage”指令，当具有该“fullPage”指令时，docker容器中的浏览器将渲染生成包括完整网页的长截图。而没有该指令时，docker容器中的浏览器将渲染生成正常尺寸的网页截图。

步骤S305、基于所述图像编辑指令与所述结果页面元素，渲染并生成所述目标网页对应的网页截图。

该步骤中，docker容器中的浏览器根据图像编辑指令与所述结果页面元素获得满足用户特殊需求的网页截图，以为截图服务提供更加多样化或者更多功能的选择，以利于网页截图作为电子证物使用。

基于本发明网页截图生成方法的第一实施例至第三实施例，提出本发明的第四实施例。参阅图，图为本实施例的流程示意图。

本实施例中，网页截图生成方法包括以下步骤：

步骤S401、在目标网页加载完成后，获取目标网页的原始页面元素与预设关键元素。

步骤S402、从所述原始页面元素中识别与所述预设关键元素相关联的目标页面元素。

步骤S403、在所述目标页面元素中添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素。

步骤S404、基于所述图像编辑指令与所述结果页面元素，渲染并生成所述目标网页对应的网页截图。

步骤S405、将预置浏览器界面与所述网页截图拼接，以获得中间图像。

步骤S406、将所述目标网页的地址与标题添加至所述中间图像的相应位置，生成所述目标网页的浏览器页面截图。

本实施例中，docker容器中存储有预置浏览器界面，即浏览器UI框，将预置浏览器界面与生成的网页截图拼接，并将截图的源url，即地址以及页面标题绘制到浏览器UI框中的相应位置，从而使得生成的网页截图更加近似于手动截图，进而以利于作为电子证物使用。

基于本发明网页截图生成方法的第一实施例至第四实施例，提出本发明的第五实施例。参阅图，图为本实施例的流程示意图。

本实施例中，网页截图生成方法包括以下步骤：

步骤S501、在目标网页加载完成后，获取目标网页的原始页面元素与预设关键元素。

步骤S502、从所述原始页面元素中识别与所述预设关键元素相关联的目标页面元素。

步骤S503、在所述目标页面元素中添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素。

步骤S504、基于所述图像编辑指令与所述结果页面元素，渲染并生成所述目标网页对应的网页截图。

步骤S505、输出所述网页截图的二进制文件。

本实施例中，docker容器被创建于服务器中，因此服务器输出的网页截图的二进制文件，以方便用户设备与服务器的数据的传输与保存。

此外，本发明还提供了一种网页截图生成装置，参阅图，图为本发明网页截图生成装置的第一实施例的结构框图。

参阅图，本发明实施例提出的网页截图生成装置包括：

元素获取模块10，用于在目标网页加载完毕后，获取目标网页的原始页面元素与预设关键元素；

元素识别模块20，用于从所述原始页面元素中识别与所述预设关键元素相关联的目标页面元素；

元素更新模块30，在所述目标页面元素中添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素；

截图生成模块40，基于所述结果页面元素，渲染并生成所述目标网页对应的网页截图。

本实施例中，在加载目标网页并建立连接后，元素更新模块30直接通过添加预设高亮标记的形式来更新具有预设关键元素的目标页面元素，从而使得截图生成模块40渲染生成的网页截图中具有高亮显示的目标页面元素，以方便后续人员对截图数据中预设信息的读取。

本实施例中，还包括网页加载模块50，用于接收所述目标网页的超文本标记语言HTML数据；根据所述超文本标记语言HTML数据，加载所述目标网页。

作为本实施例的另一种选择，所述网页加载模块50还用于响应于对目标网页的访问请求，获取所述目标页面的统一资源定位符URL；根据所述URL加载所述目标网页。

在示出的一种实施方式中，元素识别模块20还用于从所述原始页面元素对应的代码数据中识别出具有所述预设关键元素的目标文本；将具有所述目标文本的第一页面元素识别为所述目标页面元素。

在示出的一种实施方式中，所述网页加载模块50还用于滚动所述目标网页至满足预设条件，以触发所述目标网页的加载完毕事件，所述加载完毕事件为网页内所有的页面元素加载完成后触发的系统事件；

所述元素获取模块20还用于在目标网页的所述加载完毕事件加载完成后，获取目标网页的原始页面元素与预设关键元素。

在示出的一种实施方式中，所述元素更新模块30用于在所述目标页面元素以及所述加载完毕事件对应的第二页面元素中均添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素。

在示出的一种实施方式中，元素更新模块还用于在所述目标页面元素中添加预设高亮框和/或预设样式，以获得所述原始页面元素更新后的结果页面元素。

基于本发明上述网页截图生成装置第一实施例，提出本发明网页截图生成装置的第二实施例。参阅图9，图9为本发明网页截图生成装置第二实施例的结构框图。

本实施例中，网页截图生成装置还包括：

指令获取模块60，用于获取图像编辑指令；

截图生成模块40还用于基于所述图像编辑指令与所述结果页面元素，渲染并生成所述目标网页对应的网页截图。

基于本发明上述网页截图生成装置第一实施例和第二实施例，提出本发明网页截图生成装置的第三实施例。参阅图9，图9为本发明网页截图生成装置第三实施例的结构框图。

本实施例中，网页截图生成装置还包括：

截图拼接模块70，用于将预置浏览器界面与所述网页截图拼接，以获得中间图像；将所述目标网页的地址与标题添加至所述中间图像的相应位置，生成所述目标网页的浏览器页面截图。

基于本发明上述网页截图生成装置第一实施例、第二实施例和第三实施例，提出本发明网页截图生成装置的第四实施例。参阅图9，图9为本发明网页截图生成装置第四实施例的结构框图。

本实施例中，网页截图生成装置还包括：

截图输出模块80，用于输出所述网页截图的二进制文件。

本发明网页截图生成装置的其他实施例或具体实现方式可参照上述各方法实施例，此处不再赘述。

此外，本发明实施例还提出一种计算机存储介质，所述存储介质上存储有网页截图生成程序，所述网页截图生成程序被处理器执行时实现如上文所述的网页截图生成程序方法的步骤。因此，这里将不再进行赘述。另外，对采用相同方法的有益效果描述，也不再进行赘述。对于本申请所涉及的计算机可读存储介质实施例中未披露的技术细节，请参照本申请方法实施例的描述。确定为示例，程序指令可被部署为在一个计算设备上执行，或者在位于一个地点的多个计算设备上执行，又或者，在分布在多个地点且通过通信网络互连的多个计算设备上执行。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，上述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，上述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(RandomAccessMemory，RAM)等。

另外需说明的是，以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。另外，本发明提供的装置实施例附图中，模块之间的连接关系表示它们之间具有通信连接，具体可以实现为一条或多条通信总线或信号线。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，所属领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件的方式来实现，当然也可以通过专用硬件包括专用集成电路、专用CPU、专用存储器、专用元器件等来实现。一般情况下，凡由计算机程序完成的功能都可以很容易地用相应的硬件来实现，而且，用来实现同一功能的具体硬件结构也可以是多种多样的，例如模拟电路、数字电路或专用电路等。但是，对本发明而言更多情况下软件程序实现是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在可读取的存储介质中，如计算机的软盘、U盘、移动硬盘、只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，RandomAccessMemory)、磁碟或者光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

Claims (10)

1.一种网页截图生成方法，其特征在于，包括：

在目标网页加载完毕后，获取目标网页的原始页面元素与预设关键元素；

从所述原始页面元素中识别与所述预设关键元素相关联的目标页面元素；

在所述目标页面元素中添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素；

基于所述结果页面元素，渲染并生成所述目标网页对应的网页截图。

2.根据权利要求1所述的网页截图生成方法，其特征在于，所述从所述原始页面元素中识别与所述预设关键元素相关联的目标页面元素的步骤，包括：

从所述原始页面元素对应的代码数据中识别出具有所述预设关键元素的目标文本；

将具有所述目标文本的第一页面元素识别为所述目标页面元素。

3.根据权利要求1所述的网页截图生成方法，其特征在于，所述在目标网页加载完毕后，获取目标网页的原始页面元素与预设关键元素的步骤之前，所述方法还包括：

滚动所述目标网页至满足预设条件，以触发所述目标网页的加载完毕事件，所述加载完毕事件为网页内至少部分页面元素加载完成后触发的系统事件；

所述在目标网页加载完毕后，获取目标网页的原始页面元素与预设关键元素的步骤，包括：

在目标网页的所述加载完毕事件加载完成后，获取目标网页的原始页面元素与预设关键元素。

4.根据权利要求3所述的网页截图生成方法，其特征在于，所述在所述目标页面元素中添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素的步骤，包括：

在所述目标页面元素以及所述加载完毕事件对应的第二页面元素中均添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素。

5.根据权利要求1所述的网页截图生成方法，其特征在于，所述基于所述结果页面元素，渲染并生成所述目标网页对应的网页截图的步骤之前，所述方法还包括：

获取图像编辑指令；

所述基于所述结果页面元素，渲染并生成所述目标网页对应的网页截图的步骤包括：

基于所述图像编辑指令与所述结果页面元素，渲染并生成所述目标网页对应的网页截图。

6.根据权利要求1所述的网页截图生成方法，其特征在于，所述基于所述结果页面元素，渲染并生成所述目标网页对应的网页截图的步骤之后，所述方法还包括：

将预置浏览器界面与所述网页截图拼接，以获得中间图像；

将所述目标网页的地址与标题添加至所述中间图像的相应位置，生成所述目标网页的浏览器页面截图。

7.根据权利要求1至6任一项所述的网页截图生成方法，其特征在于，所述基于所述结果页面元素，渲染并生成所述目标网页对应的网页截图之后，所述方法还包括：

输出所述网页截图的二进制文件。

8.一种网页截图生成装置，其特征在于，包括：

元素获取模块，用于在目标网页加载完毕后，获取目标网页的原始页面元素与预设关键元素；

元素识别模块，用于从所述原始页面元素中识别与所述预设关键元素相关联的目标页面元素；

元素更新模块，在所述目标页面元素中添加预设高亮标记，以获得所述原始页面元素更新后的结果页面元素；

截图生成模块，基于所述结果页面元素，渲染并生成所述目标网页对应的网页截图。

9.一种网页截图生成设备，其特征在于，所述设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的网页截图生成程序，所述网页截图生成程序配置为实现如权利要求1至7中任一项所述的网页截图生成方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有网页截图生成程序，所述网页截图生成程序被处理器执行时实现如权利要求1至7任一项所述的网页截图生成方法的步骤。

Images