CN104462125A - 生成网页截图的方法及装置 - Google Patents

Abstract

一种生成网页截图的方法，包括：获取上传的网页链接，根据所述网页链接加载网页；监听所述网页的加载完毕事件；遍历所述网页的页面元素，获取所述页面元素的页面渲染数据；根据所述页面渲染数据生成图片文件并返回。此外，还提供了一种生成网页截图的装置。上述生成网页截图的方法及装置能够实现全网页截图。

Description

生成网页截图的方法及装置

技术领域

本发明涉及互联网技术领域，特别是涉及一种生成网页截图的方法及装置。

背景技术

传统技术中，操作系统提供有屏幕截图接口，截图软件可利用操作系统的截图接口函数截图。用户在使用浏览器浏览网页时，可通过打开截图软件并在网页中框选划定相应的区域生成网页截图。

然而，发明人经研究发现传统技术中生成网页截图的方法至少存在以下问题：传统技术中的网页截图实际上是调用操作系统的屏幕截图接口函数截取屏幕图像，使得对于网页内容较多超出屏幕范围的网页无法整个进行截图，只能截取显示屏中处于显示状态的部分，因此，传统技术中的网页截图方法无法实现全网页截图。

发明内容

基于此，有必要提供一种能够实现全网页截图的生成网页截图的方法。

一种生成网页截图的方法，包括：

获取上传的网页链接，根据所述网页链接加载网页；

监听所述网页的加载完毕事件；

遍历所述网页的页面元素，获取所述页面元素的页面渲染数据；

根据所述页面渲染数据生成图片文件并返回。

此外，还有必要提供一种能够实现全网页截图的生成网页截图的装置。

一种生成网页截图的装置，包括：

网页加载模块，用于获取上传的网页链接，根据所述网页链接加载网页；

事件监听模块，用于监听所述网页的加载完毕事件；

渲染数据获取模块，用于遍历所述网页的页面元素，获取所述页面元素的页面渲染数据；

图片生成模块，用于根据所述页面渲染数据生成图片文件并返回。

上述生成网页截图的方法及装置与传统技术中的解屏方法相比，并没有利用操作系统提供的屏幕截图接口对显示网页的屏幕窗口进行截屏，而是通过在先加载网页，再遍历网页的页面元素，获取页面元素的页面渲染数据生成网页截图。由于，加载网页的过程能够生成网页中所有页面元素的页面渲染数据，即全网页的页面渲染数据，其并不依赖于显示屏幕的大小和位置，因此，能够生成全网页截图。

并且，由于加载网页遍历网页的页面元素，获取页面元素的页面渲染数据的过程并不需要先调用操作系统的显示接口进行预览或显示，再通过屏幕截图接口函数进行截图，使得生成网页截图的方法还可运行于没有显示设备的计算机系统上。

附图说明

图1为一个实施例中生成网页截图的方法的流程图；

图2为一个实施例中生成网页截图的装置的结构示意图。

具体实施方式

在一个实施例中，如图1所示，一种生成网页截图的方法，该方法完全依赖于计算机程序，该计算机程序可运行于基于冯洛伊曼体系的计算机系统上，该方法包括：

步骤S102，获取上传的网页链接，根据网页链接加载网页。

在本实施例中，该方法的运行基于客户端和服务器组成的系统。用户可通过客户端向服务器上传需要截图的网页页面的网页链接，服务器将该网页页面截图后生成的图片返回给该客户端。

例如，在一个应用场景中，用户通过手机浏览器访问网页时，可通过点击浏览器上的按钮进行网页截图，浏览器获取地址栏中的网页链接，将其发送给服务器，并接收服务器返回的截图文件，预览后可提示用户是否保存在本地。

在本实施例中，可通过QtWebkit组件的QtWebPage对象加载所述网页链接对应的网页。QtWebkit组件是QT框架下的基于开源的浏览器引擎webkit的组件。QT框架是一个跨平台的C++应用框架，又称为部件工具箱。QtWebkit组件中实例化有QtWebPage对象，QtWebPage对象可通过调用底层的webkit库完成web页面的渲染和编辑。在本实施例中，可通过调用QWebPage实例的mainFrame方法，获取到frame指针，再通过调用frame的load方法，加载与上传的网页链接对应的网页。

优选的，根据网页链接加载网页之前还可对上传的网页链接进行验证，判断其参数是否符合规范以及该网页链接是否具有安全风险。

例如，在上述应用场景中，服务器接收到客户端上传的网页链接后，可获取其参数（链接中“？”字符的后续部分字符串），并判断该参数是否符合参数定义规范（通常网页链接以字符串“http://”或“https://”起始，且其后续的参数部分的字符串为“a1=x1&a2=x2&a3=x3…”的格式，其中a1、a2和a3为参数名，x1、x2和x3为参数值），若该参数不符合定义规范，则可返回错误提示信息，告知用户其上传的网页链接不合法。

再例如，在上述应用场景中，服务器还可将接收到的客户端上传的网页链接在病毒库或木马库等安全应用中进行检测，判断该链接是否存在病毒或木马等安全风险，若是，则不加载该网页，并向客户端返回错误提示信息，告知用户该网页链接存在安全风险，不能用于生成网页截图。

步骤S104，监听网页的加载完毕事件。

加载完毕事件即网页内所有的页面元素加载完成后触发的系统事件。

在本实施例中，可监听QtWebPage对象派发的LoadFinished事件指令。如前所述，QtWebPage对象的load函数在将网页链接对应的网页上的页面元素加载完毕后，即派发LoadFinished系统事件，通知其他组件其已将网页加载完毕。

步骤S106，遍历网页的页面元素，获取页面元素的页面渲染数据。

页面渲染数据包括页面元素的高度、宽度以及像素值。在本实施例中，可通过调用QtWebPage对象的render函数，即页面渲染函数，遍历网页的页面元素，获取页面元素的高度、宽度以及像素值，根据高度、宽度以及像素值生成页面渲染数据。

进一步的，遍历网页的页面元素的步骤还包括：判断页面元素是否存在脚本错误，若是，则将页面元素替换为相应的提示信息。

页面上的页面元素通常部分由网页脚本（例如javascript）定义，可能会存在脚本错误（如脚本语法错误、资源文件定位错误等），从而导致页面元素为错误数据。在本实施例中，若页面元素存在脚本错误，可将该页面元素替换为错误提示信息。例如，若页面元素为脚本加载的图片，而该加载图片的脚本存在语法错误导致图片数据无法获取，则可将该页面元素替换成提示图片，提示图片上可显示提示信息“脚本错误”等字样。

步骤S108，根据页面渲染数据生成图片文件并返回。

在本实施例中，可通过调用viewportSize函数获取已加载的网页中各个页面元素的高度、宽度以及每个像素点位置的RGB信息，然后逐行逐列获取每一个像素点在页面上的RGB值，并把该值写到图片对应的像素位置，从而生成图片。图片生成完毕后即可将其返回给客户端。

在一个实施例中，监听网页的加载完毕事件的步骤之后还可判断加载完毕事件是否包含异常指令，若是，则可根据异常指令生成错误提示信息返回；若否，则遍历网页的页面元素。

在本实施例中，可监听LoadFinished事件包含的异常信息。若LoadFinished事件中的状态值为ok，则表示加载成功，可继续执行步骤S106；若LoadFinished事件中的状态值不为ok，则表示加载失败，可根据该状态值生成错误提示信息返回给客户端。例如，服务器在加载该网页时，可能由于网络问题出现404错误，也有可能该网页对应的web服务器的内部错误而出现510错误。当LoadFinished事件中出现上述状态码时，即存在异常信息，即可返回客户端相应的错误提示信息。

在一个实施例中，根据页面渲染数据生成图片文件的步骤包括：获取图片格式参数，根据图片格式参数将页面渲染数据编码为图片文件。

在本实施例中，用户可在通过客户端上传网页链接的同时选择相应的格式参数，格式参数包括jpg、pdf、gif和png等。服务器接收到该格式参数之后，即可根据该格式参数对页面渲染数据进行编码，生成图片文件。

优选的，服务器可定期重复执行上述步骤S106和S108，从而生成具有动态效果的gif图片格式文件，从而可将包含有flash或动态脚本的网页通过gif格式动态效果图保存。

在一个实施例中，如图2所示，一种生成网页截图的装置，包括：

网页加载模块102，用于获取上传的网页链接，根据网页链接加载网页。

事件监听模块104，用于监听网页的加载完毕事件。

渲染数据获取模块106，用于遍历网页的页面元素，获取所述页面元素的页面渲染数据。

图片生成模块108，用于根据页面渲染数据生成图片文件并返回。

在本实施例中，网页加载模块102还用于通过QtWebkit组件的QtWebPage对象加载网页链接对应的网页。

在本实施例中，事件监听模块104还用于监听QtWebPage对象派发的LoadFinished事件指令。

在本实施例中，页面渲染数据包括页面元素的高度、宽度以及像素值。

渲染数据获取模块106还用于调用QtWebPage对象的页面渲染函数，遍历网页的页面元素，获取页面元素的高度、宽度以及像素值，根据高度、宽度以及像素值生成页面渲染数据。

在本实施例中，渲染数据获取模块106还用于判断页面元素是否包含脚本错误，若是，则将页面元素替换为相应的提示信息。

在本实施例中，事件监听模块104还用于判断加载完毕事件是否包含异常指令，若否，则调用所述渲染数据获取模块。

在本实施例中，图片生成模块108还用于获取图片格式参数，根据图片格式参数将页面渲染数据编码为图片文件。

上述生成网页截图的方法及装置与传统技术中的解屏方法相比，并没有利用操作系统提供的屏幕截图接口对显示网页的屏幕窗口进行截屏，而是通过在先加载网页，再遍历网页的页面元素，获取页面元素的页面渲染数据生成网页截图。由于，加载网页的过程能够生成网页中所有页面元素的页面渲染数据，即全网页的页面渲染数据，其并不依赖于显示屏幕的大小和位置，因此，能够生成全网页截图。

并且，由于加载网页遍历网页的页面元素，获取页面元素的页面渲染数据的过程并不需要先调用操作系统的显示接口进行预览或显示，再通过屏幕截图接口函数进行截图，使得生成网页截图的方法还可运行于没有显示设备的计算机系统上。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (14)

1.一种生成网页截图的方法，包括：

获取上传的网页链接，根据所述网页链接加载网页；

监听所述网页的加载完毕事件；

遍历所述网页的页面元素，获取所述页面元素的页面渲染数据；

根据所述页面渲染数据生成图片文件并返回。

2.根据权利要求1所述的生成网页截图的方法，其特征在于，所述根据所述网页链接加载网页的步骤还包括：

通过QtWebkit组件的QtWebPage对象加载所述网页链接对应的网页。

3.根据权利要求2所述的生成网页截图的方法，其特征在于，所述监听所述网页的加载完毕事件的步骤还包括：

监听所述QtWebPage对象派发的LoadFinished事件指令。

4.根据权利要求2所述的生成网页截图的方法，其特征在于，所述页面渲染数据包括所述页面元素的高度、宽度以及像素值；

所述遍历所述网页的页面元素，获取所述页面元素的页面渲染数据的步骤还包括：

调用所述QtWebPage对象的页面渲染函数，遍历所述网页的页面元素，获取所述页面元素的高度、宽度以及像素值，根据所述高度、宽度以及像素值生成页面渲染数据。

5.根据权利要求4所述的生成网页截图的方法，其特征在于，所述遍历所述网页的页面元素的步骤还包括：

判断所述页面元素是否包含脚本错误，若是，则将所述页面元素替换为相应的提示信息。

6.根据权利要求1至5任一项所述的生成网页截图的方法，其特征在于，所述监听所述网页的加载完毕事件的步骤之后还包括：

判断所述加载完毕事件是否包含异常指令，若否，则遍历所述网页的页面元素。

7.根据权利要求1至5任一项所述的生成网页截图的方法，其特征在于，所述根据所述页面渲染数据生成图片文件的步骤包括：

获取图片格式参数；

根据所述图片格式参数将所述页面渲染数据编码为图片文件。

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

网页加载模块，用于获取上传的网页链接，根据所述网页链接加载网页；

事件监听模块，用于监听所述网页的加载完毕事件；

渲染数据获取模块，用于遍历所述网页的页面元素，获取所述页面元素的页面渲染数据；

图片生成模块，用于根据所述页面渲染数据生成图片文件并返回。

9.根据权利要求8所述的生成网页截图的装置，其特征在于，所述网页加载模块还用于通过QtWebkit组件的QtWebPage对象加载所述网页链接对应的网页。

10.根据权利要求9所述的生成网页截图的装置，其特征在于，所述事件监听模块还用于监听所述QtWebPage对象派发的LoadFinished事件指令。

11.根据权利要求9所述的生成网页截图的装置，其特征在于，所述页面渲染数据包括所述页面元素的高度、宽度以及像素值；

所述渲染数据获取模块还用于调用所述QtWebPage对象的页面渲染函数，遍历所述网页的页面元素，获取所述页面元素的高度、宽度以及像素值，根据所述高度、宽度以及像素值生成页面渲染数据。

12.根据权利要求11所述的生成网页截图的装置，其特征在于，所述渲染数据获取模块还用于判断所述页面元素是否包含脚本错误，若是，则将所述页面元素替换为相应的提示信息。

13.根据权利要求8至12任一项所述的生成网页截图的装置，其特征在于，所述事件监听模块还用于判断所述加载完毕事件是否包含异常指令，若否，则调用所述渲染数据获取模块。

14.根据权利要求8至12任一项所述的生成网页截图的装置，其特征在于，所述图片生成模块还用于获取图片格式参数；根据所述图片格式参数将所述页面渲染数据编码为图片文件。