CN111814086A - 一种用于对网页进行截图方法和*** - Google Patents

Abstract

本发明提供了一种用于对网页进行截图的方法和***，其中该方法包括接收截图请求，其中截图请求包括目标网页URL和目标元素选择器；根据目标网页URL跳转到目标网页；和根据目标元素选择器对目标网页进行截图，以获得网页截图。

Description

一种用于对网页进行截图方法和***

技术领域

本发明涉及截图技术，特别地涉及一种用于对网页进行截图方法和***。

背景技术

截图是由计算机、手机、平板计算机等设备截取的能够显示在屏幕等显示设备上的可视图像。随着互联网的发展，截图在社交聊天、图像处理、报表分析等场景中的应用日益频繁。目前的网页截图通常采用“离线”的方式。即，当进行截图时，需要首先在浏览器中打开目标网页，然后使用“离线截图工具”完成截图，最后将截取的图像保存在本地设备。本领域中常见的离线截图工具包括QQ等聊天软件中集成的截图工具、ScreenFloat等专业截图工具和操作***中自带的截图工具等。

然而，上述离线截图工具在使用时，需要用户手动操作，操作准确度不高、截取效率低。

发明内容

本发明的一方面涉及一种用于对网页进行截图的方法，包括：接收截图请求，其中所述截图请求包括目标网页URL和目标元素选择器；根据所述目标网页URL跳转到目标网页；和根据所述目标元素选择器对所述目标网页进行截图，以获得网页截图。

本发明的又一方面涉及一种用于对网页进行截图的***，包括：用于接收截图请求的模块，其中所述截图请求包括目标网页URL和目标元素选择器；用于根据所述目标网页URL跳转到目标网页的模块；和截图模块，其用于根据所述目标元素选择器对所述目标网页进行截图，以获得网页截图。

本发明的网页截图方法和***能够实现自动化截图和批量截图，不仅提高了效率，还能够实现对目标图像的精确截取。另外，在本发明的实施例中，截取的图像能够被在线存储，方便互联网中不同用户对该截图的使用。进一步地，本发明还针对截图操作中的不同场景进行了特别设计，提高了本发明的适用性和用户的便捷性：例如，支持“登录场景”和“懒加载(滚动加载)场景”，即模拟用户登录并且对登录后的网页进行截图和允许自定义加载数据并对加载后的网页进行截图。

附图说明

图1是根据本发明的一个实施例的网页截图方法的流程图。

图2是根据本发明的一个实施例的图1中的步骤9的方法的流程图。

图3是根据本发明的一个实施例的网页截图***的示意图。

图4A-4C是根据本发明的实施例的截图请求和截取的图像的示意图。

具体实施方式

现在将参照若干示例性实施例来说明本发明的内容。应当理解，说明这些实施例仅是为了使得本领域普通技术人员能够更好地理解并且因此实现本发明的内容，而不是暗示对本发明的范围进行任何限制。

如本文中所使用的，术语“包括”及其变体应当解读为意味着“包括但不限于”的开放式术语。术语“基于”应当解读为“至少部分地基于”。术语“一个实施例”和“一种实施例”应当解读为“至少一个实施例”。术语“另一个实施例”应当解读为“至少一个其他实施例”。

图1示出了根据本发明的一个实施例的网页截图方法的流程图。在本发明的实施例中，该流程还可以包括额外的一个或多个步骤。在本发明的实施例中，该流程中的一个或多个步骤可以被省略或重复出现。在本发明的实施例中，步骤的序号并不必然意味着该步骤的排序，例如在某些实施方案中步骤1可以在步骤2之前进行，但在其他实时方案中其也可以在步骤2之后进行。下面对图1所示的各个步骤进行具体说明：

在步骤1处，接收截图请求。如本发明的实施例中使用的，“截图请求”可以是由用户发送的截图指令。在本发明的实施例中，截图请求包括待实施截图的网页的URL和元素选择器。如本发明的实施例中使用的，“元素”具有本领域技术人员常规理解的含义，指的是HTML语言或类似语言中定义的元素，或其他语境中具有类似含义的元素。HTML网页是由各种各样的HTML元素构成的文本文件，HTML元素则构成了HTML网页的基本单元(参见***中的定义，https://zh.wikipedia.org/wiki/HTML％E5％85％83％E7％B4％A0)。如本发明的实施例中使用的，“元素选择器”(简称“选择器”)具有本领域技术人员常规理解的含义，指的是用于指定某个元素的标识，计算机***可以通过该标识定位其指定的元素。在本发明的实施例中，待实施截图的网页的URL、元素和元素选择器又可以称为目标URL、目标元素和目标元素选择器。

在本发明的实施例中，截图请求还可以包括网页跳转超时时间、登录超时时间、返回数据类型、导出文件类型、懒加载属性和自动下拉滚动时间中的一种或多种。如本发明的实施例中使用的，“网页跳转超时时间”指的是浏览器跳转到网页URL需要的时间，用于指示是否跳转失败。在本发明的实施例中，网页跳转超时时间通常是预设的，例如5秒，如果浏览器在5秒内仍未跳转至目标网页URL，则认为此次跳转失败并结束当前截图操作。如本发明的实施例中使用的，“登录超时时间”指的是浏览器完成登录需要的时间，用于指示是否登录失败。在本发明的实施例中，登录超时时间通常是预设的，例如5秒，如果浏览器在5秒内仍未登录，则认为此次登录失败并结束当前截图操作。如本发明的实施例中使用的，“返回数据类型”指的是在完成截图后直接返回截取的图像还是与在线存储的图像对应的ID(用户可以通过该ID来访问、查看截图)。如本发明的实施例中使用的，“导出文件类型”指的是截图的文件格式，该格式包括但不限于JPEG、PNG和PDF。如本发明的实施例中使用的，“懒加载属性”用于指示目标网页能否进行懒加载，其中“懒加载”又称为“滚动加载”，其具有本领域技术人员常规理解的含义，指的是一种数据获取方法，它能够在用户滚动页面的时候自动获取更多的数据，而新得到的数据不会影响原有数据的显示，同时最大程度上减少服务器端的资源耗用。如本发明的实施例中使用的，“自动下拉滚动时间”指的是在进行懒加载的情况下，默认下拉滚动的最长时间，例如某些网页支持进行无限度的懒加载，此时可以预设一个时间阈值，例如10秒，在超过10秒后，则不再继续进行懒加载。

在本发明的实施例中，如果目标元素是包含于具有滚动属性的父元素内的子元素，则需要在指示子元素的选择器的同时指示父元素的选择器，以实现滚动加载并截图。在本发明的实施例中，如果目标元素是包含于不具有滚动属性的父元素内的子元素，则可以仅指示子元素的选择器，而不需要指示父元素的选择器。在本发明的实施例中，“具有滚动属性”指的是可以进行懒加载操作。如本发明的实施例中使用的，“父元素”和“子元素”具有本领域技术人员常规理解的含义：构成HTML网页的HTML元素组织形式是嵌套式结构，该嵌套式结构外层是父元素，而内层是子元素。

在本发明的实施例中，可以通过查看HTML代码获取目标元素的选择器，例如，可以通过Chrome/Chromium浏览器的审查元素功能获取目标元素的选择器。在本发明的实施例中，还可以通过其他方法获取目标元素的选择器，只要其能够实现本发明的目的。在本发明的实施例中，截图请求可以是JSON数据格式。在本发明的实施例中，截图请求还可以是本领域中已知的其他数据格式。

在步骤2处，解析截图请求。在本发明的实施例中，可以使用本领域已知的技术手段对截图请求进行解析。在本发明的实施例中，可以将截图请求解析成能够调用API的操作指令，优选地，符合本领域已知的Puppeteer API的操作指令。在本发明的实施例中，可以将截图请求解析成其他形式的操作指令。

在步骤3处，根据截图请求判断截图场景。在本发明的实施例中，截图场景包括但不限于登录场景、懒加载场景和批量截图场景。在本发明的登录场景的实施例中，截图请求还包含账号密码输入框的元素选择器和相应的账号和密码。在本发明的懒加载场景的实施例中，截图请求还包含懒加载属性和自动下拉滚动时间。在本发明的批量截图场景的实施例中，截图请求包括两个以上的网页URL或两个以上的元素选择器。

在步骤4处，判断是否是批量截图场景。在本发明的实施例中，判断是否属于批量截图场景依赖于截图请求中是否包含两个以上的网页URL或两个以上的元素选择器。在本发明的实施例中，当判断属于批量截图场景时，从截图指令中提取出多个网页URL和/或多个元素选择器。在本发明的实施例中，当属于批量截图场景时，截图请求中的网页URL或元素选择器是数组的形式。在本发明的实施例中，网页URL和元素选择器这两个参数将以数组形式传递。

在步骤5处，设置后续包括步骤6-9的环节的重复次数。在本发明的实施例中，当判断属于批量截图场景时，重复步骤6-9的次数对应于截图指令中网页URL和元素选择器的数量。例如，当存在两个网页URL并且每个网页URL中指定两个元素选择器时，重复步骤6-8的数量为2次(对应于两个网页URL)，重复步骤9的数量为2×2＝4次(对应于每个网页URL中的两个元素选择器)。在本发明的实施例中，当判断不属于批量截图场景时，直接进入步骤6而不进行重复。又例如，当存在两个网页URL并且每个网页URL中指定一个元素选择器时，重复步骤6-8的数量为2次，重复步骤9的数量为2×1＝2次。又例如，当只存在一个网页URL并且该网页URL中指定3个元素选择器时，步骤6-8只执行(重复)1次，重复步骤9的次数为1×3＝3次。

在步骤6处，根据截图请求中的网页URL跳转到目标网页。在本发明的实施例中，上述进行跳转的操作指令可以是“page.goto()”，该操作指令是符合Puppeteer API的操作指令。在本发明的实施例中，如果截图请求中存在网页跳转超时时间，则需要在预设时间内判断网页是否跳转成功，如果跳转成功，则继续进行下个步骤，如果跳转失败，则结束当前截图操作。

在步骤7处，判断是否是登录场景。在本发明的实施例中，判断是否属于登录场景依赖于截图请求中是否包含账号密码输入框的选择器以及相应的账号和密码。在本发明的实施例中，当判断属于登录场景时，从截图指令中提取出与账号密码及其输入框对应的元素选择器。

在步骤8处，输入账号密码进行登录。在本发明的实施例中，可以在目标网页上模拟账号密码的输入，例如，通过操作指令“page.type()”将账号密码填入对应的输入框并利用“page.keyboard.press('Enter')”模拟回车键效果完成登录操作。在本发明的实施例中，还可以使用其他操作指令进行登录。在本发明的实施例中，如果截图请求中包含登录超时时间，则需要在预设时间内判断是否登录成功，如果登录成功，则继续进行下个步骤，如果登录失败，则结束当前截图操作。

在步骤9处，截图并返回截图结果。在本发明的实施例中，根据截图请求中的返回数据类型，将截图以文件(例如文件压缩包)或文件名JSON数组(文件ID)的形式返回给用户。在本发明的实施例中，当返回数据类型为文件ID时，可以将截取的图像文件(JPEG、PNG或PDF)存储于服务器上，并返回文件名给用户。在本发明的批量截图场景的实施例中，可以从截取指令中获取一批截取目标，并返回每个截图结果。在本发明的实施例中，针对不同的截取目标可以具有相同或不同的返回数据类型。在本发明的实施例中，不同的截取目标可以被分别返回或一起返回，例如以压缩包的形式。

图2示出了根据本发明的一个实施例的图1中的步骤9的方法的流程图。在本发明的实施例中，该流程还可以包括额外的一个或多个步骤。在本发明的实施例中，该流程中的一个或多个步骤可以被省略或重复出现。在本发明的实施例中，步骤的序号并不必然意味着该步骤的排序，例如在某些实施方案中步骤9.1可以在步骤9.2之前进行，但在其他实时方案中其也可以在步骤9.2之后进行。下面对图2所示的各个步骤进行具体说明：

在步骤9.1处，判断截图区域。在本发明的实施例中，可以根据截图区域的大小采取不同的方法。在本发明的实施例中，截取整个网页与截取自定义区域的方法是不同。在本发明的实施例中，自定义区域不同于整个网页。在本发明的实施例中，截取整个网页时，不需要指定元素选择器或元素选择器为空。在本发明的实施例中，截取自定义区域时，需要指定构成自定义区域的元素选择器，即元素选择器不为空。

在步骤9.2处，判断是否是懒加载场景。在本发明的实施例中，判断是否属于懒加载场景依赖于截图请求中是否包含懒加载属性和自动下拉滚动时间。

在步骤9.3处，懒加载页面。在本发明的实施例中，当判断属于懒加载场景时，可以从截图指令中提取出自动下拉滚动时间。在本发明的实施例中，根据截图指令中的自动下拉滚动时间，懒加载当前页面预定的时间。在本发明的实施例中，当判断不属于懒加载场景时，则不进行懒加载，仅对已加载页面进行截图。

在步骤9.4处，定位目标元素的位置。在本发明的实施例中，可以根据截图指令中的元素选择器，定位待被截图的目标元素在网页中的位置。在本发明的实施例中，目标元素在网页中的位置包括其距离视窗(即，可视区域的窗口)左侧、右侧、顶部、底部的距离和目标元素的大小(宽度和高度)中的一个或多个，只要能够确定目标元素的实际位置。

在步骤9.5，判断元素是否处于可视区域内。在本发明的实施例中，“可视区域”指的是浏览器的视窗，即用户能够查看到的区域。

在步骤9.6处，滚动页面以将目标元素移动到可视区域内。在本发明的实施例中，将目标元素移动到可视区域的目的是为了加载目标元素，如果目标元素已经处于可视区域，但由于被其他元素遮挡而未能被用户查看到，则由于该目标元素已经被加载，因而不影响本发明的方法的实施。在本发明的实施例中，实施本发明的方法的前提是目标元素已经被加载，而不要求目标元素对用户可见。在本发明的实施例中，如果目标元素未处于可视区域内，可以滚动页面(例如，增加页面滚动的操作指令)，将目标元素移动到可视区域内。在本发明的实施例中，可以在滚动页面后再次在步骤9.4定位目标元素的位置以及在步骤9.5进行判断。

在步骤9.7处，截图并返回截图结果。

在步骤10处，接收截图预览请求并返回预览结果。在本发明的实施例中，预览请求可以包括文件ID。在本发明的实施例中，在接收到预览请求中的文件名后，可以进行文件检索并将文件数据返回以便进行预览。

图3示出了根据本发明的一个实施例的网页截图***的示意图。下面对该***中的每个模块进行具体说明。在本发明的实施例中，该***还可以包括额外的一个或多个模块。在本发明的实施例中，该***中的一个或多个模块可以被省略。在本发明的实施例中，相同的模块可以具有多个。在本发明的实施例中，“模块”与“装置”可互换地使用。

在本发明的实施例中，***可以是提供网页截图的API，优选地是按照已知的Restful规范进行设计的API。在本发明的实施例中，本发明的用于网页截图的***包括如下模块：

截图模块：通过截图请求指定网页URL、元素选择器、网页跳转超时时间、登录超时时间、返回数据类型、导出文件类型等参数后，调用API向服务器发起一次HTTP请求，服务器执行截取操作并返回生成的截图文件或截图文件名。

文件预览模块：通过预览接口向服务器发起一次HTTP请求，获取网页截图数据。

文件存储模块：服务器将每次截图后生成的数据存储在服务器上。

指令解码模块：通过例如Puppeteer解析请求内容，控制例如Chrome/Chromium浏览器完成页面渲染和元素移动、截图等操作。

图4A-4C示出了根据本发明的实施例的截图请求和截取的图像的示意图，其中图4A示出了示例性的截图指令，该指令指示计算机按照所示要求进行截图操作；图4B示出了完成图4A中的截图指令后返回的示例性结果信息，其表示截取成功；图4C示出了供在线查看的示例性的截图，该截图的名称获取自图4B中返回的结果信息。

本发明各实施例的方法、装置和***可以实现为纯粹的软件模块(例如用Java语言来编写的软件程序)，也可以根据需要实现为纯粹的硬件模块(例如专用ASIC芯片或FPGA芯片)，还可以实现为结合了软件和硬件的模块(例如存储有固定代码的固件***)。

在本发明的实施例中，优选地，使用Node.js计算机语言、Docker软件和配置为(大于等于)8核16G的服务器。

在本发明的实施例中，优选地，使用开源工具Puppeteer实现的截图功能。如本发明的实施例中使用的，Puppeteer是一个Node库，它提供了一个高级API来通过DevTools协议控制Chromium或Chrome。且它的许可证是Apache License 2.0，允许的权限中包括专利许可，Puppeteer相关许可证描述可见https://github.com/GoogleChrome/puppeteer/blob/master/LICENSE。

在本发明的实施例中，Puppeteer解码模块可以被Selenium配合PhantomJS替代。如本发明的实施例中使用的，Selenium是一个用于web自动化测试的工具集，而PhantomJS是一个基于Webkit的“无界面(headless)”浏览器，它会把网站加载到内存并执行页面上的JavaScript脚本。Selenium搭配PhantomJS也能达到控制浏览器进行页面跳转、页面滚动，截图等目的。在本发明的实施例中，在线服务器使用的web框架是Koa。在本发明的实施例中，Koa可以被Express、Hapi等Web框架替代。

本领域普通技术人员可以意识到，以上所述仅为本发明的示例性实施例，并不用于限制本发明。本发明还可以包含各种修改和变化。任何在本发明的精神和范围内作的修改和变化均应包含在本发明的保护范围内。

Claims (16)

1.一种用于对网页进行截图的方法，包括：

接收截图请求，其中所述截图请求包括目标网页URL和目标元素选择器；

根据所述目标网页URL跳转到目标网页；和

根据所述目标元素选择器对所述目标网页进行截图，以获得网页截图。

2.根据权利要求1所述的方法，还包括：

将所述网页截图存储在本地或发送至远程服务器。

3.根据权利要求1所述的方法，还包括：

接收预览请求，所述预览请求包括指示所述网页截图的标识；和

根据所述预览请求，返回所述网页截图以便进行预览。

4.根据权利要求1所述的方法，其中所述截图请求还包括网页跳转超时时间，并且所述方法还包括：

判断是否在网页跳转超时时间内跳转成功，并且在跳转成功后对所述目标网页进行截图。

5.根据权利要求1所述的方法，其中所述截图请求包括两个以上的目标网页URL和/或两个以上的目标元素选择器，并且所述方法还包括：

根据所述目标网页URL的数量和/或所述目标元素选择器的数量，重复跳转到目标网页的操作和/或对所述目标网页进行截图的操作。

6.根据权利要求1所述的方法，其中所述截图请求还包括账号密码输入框的元素选择器和相应的账号与密码，并且所述方法还包括：

在所述账号密码输入框中输入所述账号与所述密码进行登录。

7.根据权利要求6所述的方法，其中所述截图请求还包括登录超时时间，并且所述方法还包括：

判断是否在所述登录超时时间内登录成功，并且在登录成功后对所述目标网页进行截图。

8.根据权利要求1所述的方法，其中当所述目标元素选择器为空时，对所述目标网页进行截图的操作包括对所述目标网页的整体进行截图；并且

当所述目标元素选择器不为空时，对所述目标网页进行截图的操作包括对所述目标网页中的目标元素进行截图。

9.根据权利要求8所述的方法，其中当所述目标元素选择器为空时，所述截图请求还包括懒加载属性和自动下拉滚动时间，并且所述方法还包括：

在所述自动下拉滚动时间内对目标网页进行懒加载。

10.根据权利要求8所述的方法，其中当所述目标元素选择器不为空时，所述方法还包括：

根据所述目标元素选择器定位所述目标元素的位置。

11.根据权利要求10所述的方法，其中定位所述目标元素的位置的操作包括判断所述目标元素是否处于可视区域内。

12.根据权利要求11所述的方法，还包括：

滚动所述目标网页以将所述目标元素移动到所述可视区域内。

13.一种用于对网页进行截图的***，包括：

用于接收截图请求的模块，其中所述截图请求包括目标网页URL和目标元素选择器；

用于根据所述目标网页URL跳转到目标网页的模块；和

截图模块，其用于根据所述目标元素选择器对所述目标网页进行截图，以获得网页截图。

14.根据权利要求13所述的***，还包括：

存储模块，其用于将所述网页截图存储在本地或发送至远程服务器。

15.根据权利要求13所述的***，还包括：

用于接收预览请求的模块，所述预览请求包括指示所述网页截图的标识；和

预览模块，其用于根据所述预览请求，返回所述网页截图以便进行预览。

16.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现根据权利要求1-12中任一项所述的方法。

Images