CN108279966A - 网页截图方法、装置、终端及存储介质 - Google Patents

Abstract

本申请实施例公开了一种网页截图方法、装置、终端及存储介质，属于截图领域，所述方法包括：接收截图指令，截图指令中包含截图区域的区域信息，截图区域的部分或全部位于浏览器显示区域外；根据区域信息，确定截图区域中包含的目标网页内容，目标网页内容包括文字内容、图片内容和多媒体内容中的至少一种；根据目标网页内容生成网页截图。本申请实施例中，由于根据区域信息能够获取到浏览器显示区域以外的网页内容，因此能够解决使用浏览器进行网页截图时，只能截取浏览器窗口当前显示内容的问题，进而实现了利用浏览器对网页任意区域进行截图的效果。

Description

网页截图方法、装置、终端及存储介质

技术领域

本申请实施例涉及截图领域，特别涉及一种网页截图方法、装置、终端及存储介质。

背景技术

浏览器作为终端中最常用的应用程序，被用作进行网页浏览。

用户使用浏览器进行网页浏览的过程中，当浏览到感兴趣的内容时，通常会使用浏览器自带的截图工具进行截图操作。浏览器接收到截图指令时，即截取浏览器窗口当前显示的内容，并将其保存为图片格式，以便用户查看或进行分享。

发明内容

本申请实施例提供了一种网页截图方法、装置、终端及存储介质，可以用于解决进行网页截图时，只能截取浏览器窗口当前显示内容的问题。所述技术方案如下：

第一方面，提供了一种网页截图方法，所述方法包括：

接收截图指令，所述截图指令中包含截图区域的区域信息，所述截图区域的部分或全部位于浏览器显示区域外；

根据所述区域信息，确定所述截图区域中包含的目标网页内容，所述目标网页内容包括文字内容、图片内容和多媒体内容中的至少一种；

根据所述目标网页内容生成网页截图。

第二方面，提供了一种网页截图装置，所述装置包括：

指令接收模块，用于接收截图指令，所述截图指令中包含截图区域的区域信息，所述截图区域的部分或全部位于浏览器显示区域外；

内容确定模块，用于根据所述区域信息，确定所述截图区域中包含的目标网页内容，所述目标网页内容包括文字内容、图片内容和多媒体内容中的至少一种；

截图生成模块，用于根据所述目标网页内容生成网页截图。

第三方面，提供了一种终端，所述终端包括处理器和存储器，所述存储器中存储有至少一条指令，所述指令由所述处理器加载并执行以实现如第一方面所述的网页截图方法。

第四方面，提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令，所述指令由处理器加载并执行以实现如第一方面所述的网页截图方法。

本申请实施例提供的技术方案带来的有益效果至少包括：

当截图区域的部分或全部位于浏览器显示区域之外时，通过获取包含区域信息的截图指令，并根据该区域信息确定截图区域中包含的目标网页内容，从而根据目标网页内容生成网页截图；由于根据区域信息能够获取到浏览器显示区域以外的网页内容，因此能够解决使用浏览器进行网页截图时，只能截取浏览器窗口当前显示内容的问题，进而实现了利用浏览器对网页任意区域进行截图的效果。

附图说明

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

图1和图2是本申请一个示例性实施例提供的终端的结构方框图；

图3是浏览器显示区域中显示网页内容的界面示意图；

图4示出了本申请一个示例性实施例提供的网页截图方法的流程图；

图5示出了本申请另一个示例性实施例提供的网页截图方法的流程图；

图6是浏览器生成网页截图过程的实施示意图；

图7示出了本申请一个示例性实施例提供的网页截图装置的结构框图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

在本申请的描述中，除非另有说明，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

参考图1和图2所示，其示出了本申请一个示例性实施例提供的终端100的结构方框图。该终端100可以智能手机、平板电脑、笔记本电脑等。本申请中的终端100可以包括一个或多个如下部件：处理器110、存储器120和触摸显示屏130。其中，存储器120中存储有至少一条指令，所述指令由处理器110加载并执行以实现下述实施例所述的通知提醒方法。

处理器110可以包括一个或者多个处理核心。处理器110利用各种接口和线路连接整个终端100内的各个部分，通过运行或执行存储在存储器120内的指令、程序、代码集或指令集，以及调用存储在存储器120内的数据，执行终端100的各种功能和处理数据。可选地，处理器110可以采用数字信号处理(Digital Signal Processing，DSP)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)、可编程逻辑阵列(Programmable LogicArray，PLA)中的至少一种硬件形式来实现。处理器110可集成中央处理器(CentralProcessing Unit，CPU)、图像处理器(Graphics Processing Unit，GPU)和调制解调器等中的一种或几种的组合。其中，CPU主要处理操作系统、用户界面和应用程序等；GPU用于负责触摸显示屏130所需要显示的内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器110中，单独通过一块芯片进行实现。

存储器120可以包括随机存储器(Random Access Memory，RAM)，也可以包括只读存储器(Read-Only Memory)。可选地，该存储器120包括非瞬时性计算机可读介质(non-transitory computer-readable storage medium)。存储器120可用于存储指令、程序、代码、代码集或指令集。存储器120可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作系统的指令、用于至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现下述各个方法实施例的指令等；存储数据区可存储根据终端100的使用所创建的数据(比如音频数据、电话本)等。

以操作系统为安卓(Android)系统为例，存储器120中存储的程序和数据如图1所示，存储器120中存储有Linux内核层220、系统运行库层240、应用框架层260和应用层280。Linux内核层220为终端100的各种硬件提供了底层的驱动，如显示驱动、音频驱动、摄像头驱动、蓝牙驱动、Wi-Fi驱动、电源管理等。系统运行库层240通过一些C/C++库来为Android系统提供了主要的特性支持。如SQLite库提供了数据库的支持，OpenGL/ES库提供了3D绘图的支持，Webkit库提供了浏览器内核的支持等。在系统运行库层240中还提供有Android运行时库242(Android Runtime)，它主要提供了一些核心库，能够允许开发者使用Java语言来编写Android应用。应用框架层260提供了构建应用程序时可能用到的各种API，开发者也可以通过使用这些API来构建自己的应用程序，比如活动管理、窗口管理、视图管理、通知管理、内容提供者、包管理、通话管理、资源管理、定位管理。应用层280中运行有至少一个应用程序，这些应用程序可以是操作系统自带的联系人程序、短信程序、时钟程序、相机应用等；也可以是第三方开发者所开发的应用程序，比如即时通信程序、相片美化程序等。

以操作系统为IOS系统为例，存储器120中存储的程序和数据如图2所示，IOS系统包括：核心操作系统层320(Core OS layer)、核心服务层340(Core Services layer)、媒体层360(Media layer)、可触摸层380(Cocoa Touch Layer)。核心操作系统层320包括了操作系统内核、驱动程序以及底层程序框架，这些底层程序框架提供更接近硬件的功能，以供位于核心服务层340的程序框架所使用。核心服务层340提供给应用程序所需要的系统服务和/或程序框架，比如基础(Foundation)框架、账户框架、广告框架、数据存储框架、网络连接框架、地理位置框架、运动框架等等。媒体层360为应用程序提供有关视听方面的接口，如图形图像相关的接口、音频技术相关的接口、视频技术相关的接口、音视频传输技术的无线播放(AirPlay)接口等。可触摸层380为应用程序开发提供了各种常用的界面相关的框架，可触摸层380负责用户在终端100上的触摸交互操作。比如本地通知服务、远程推送服务、广告框架、游戏工具框架、消息用户界面接口(User Interface，UI)框架、用户界面UIKit框架、地图框架等等。

在图2所示出的框架中，与大部分应用程序有关的框架包括但不限于：核心服务层340中的基础框架和可触摸层380中的UIKit框架。基础框架提供许多基本的对象类和数据类型，为所有应用程序提供最基本的系统服务，和UI无关。而UIKit框架提供的类是基础的UI类库，用于创建基于触摸的用户界面，iOS应用程序可以基于UIKit框架来提供UI，所以它提供了应用程序的基础架构，用于构建用户界面，绘图、处理和用户交互事件，响应手势等等。

触摸显示屏130用于显示各个应用程序的用户界面，以及用于接收用户使用手指、触摸笔等任何适合的物体在其上或附近的触摸操作。触摸显示屏130通常设置在终端100的前面板。触摸显示屏130可被设计成为全面屏、曲面屏或异型屏。触摸显示屏130还可被设计成为全面屏与曲面屏的结合，异型屏与曲面屏的结合，本实施例对此不加以限定。

除此之外，本领域技术人员可以理解，上述附图所示出的终端100的结构并不构成对终端100的限定，终端可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。比如，终端100中还包括射频电路、输入单元、传感器、音频电路、无线保真(Wireless Fidelity，WiFi)模块、电源、蓝牙模块等部件，在此不再赘述。

相关技术中，用户使用浏览器进行网页截图时，只能截取到浏览器窗口当前显示内容，而无法截取到浏览器窗口以外的网页内容，即只能截取一屏的网页内容。然而，在实际截图过程中，浏览器窗口可能无法完整容纳用户期待截取的所有网页内容。

比如，如图3所示，浏览器窗口当前显示的内容包括文本内容和图片内容，但是受限于浏览器窗口尺寸，位于浏览器窗口底部的图片31未能完整显示，导致截取的图片中无法包含完整的图片31。

为了满足用户的截图需求，部分浏览器配置了长截图功能，而使用长截图功能截取的长截图中包含网页中所有的显示内容。后续用户使用截图软件即可从长截图中截取处期待的网页截图。

然而，采用上述方法进行网页截图时，首先需要进行长截图，然后再从长截图中截取网页截图。一方面，由于长截图需要截取整个网页，因此截图时间较长，另一方面，后续还需要对长截图进行进一步截取，导致整个截图过程耗时较长。

为了解决使用浏览器进行网页截图时，只能截取浏览器窗口当前显示内容的问题，并提高网页截图的效率，本申请实施例提供了一种网页截图方法，下面采用示意性的实施例对该方法进行说明。

本申请各个实施例提供的网页截图方法用于安装有浏览器的终端，该终端可以是智能手机、平板电脑、电子书阅读器或个人计算机等等。为了方便描述，下述各个实施例以网页截图方法用于终端中的浏览器进行说明。

请参考图4，其示出了本申请一个示例性实施例提供的网页截图方法的流程图。本实施例以该方法应用于安装有浏览器的终端中来举例说明。所述方法包括：

步骤401，接收截图指令，截图指令中包含截图区域的区域信息，截图区域的部分或全部位于浏览器显示区域外。

可选的，该截图区域为规则区域或不规则区域。比如，该截图区域可以是矩形区域(规则区域)；又比如，该截图区域可以是由直线和曲线围合而成的封闭区域(不规则区域)。

可选的，该截图区域可以为连续的区域，或，由若干个不连续的子截图区域构成的非连续区域。

可选的，该区域信息中包含截图区域的坐标和尺寸。比如，当截图区域为矩形区域时，该区域信息中包含截图区域左上角顶点的顶点坐标(100px，100px)以及截图区域的尺寸500px×800px。在其他可能的实施方式中，该区域信息还可以采用坐标点集合等其他形式，本申请实施例并不对此进行限定。

本实施例中，区域信息用于指示截图区域在当前网页中所处的位置，而该截图区域的部分或全部区域位于浏览器显示区域之外，即截图区域与浏览器当前显示网页区域之间存在交集或不存在交集。

比如，浏览器当前显示网页中2160px×1080px的矩形区域(以网页左上角为顶点)时，该截图区域为网页中2500px×1080px的矩形区域(以网页左上角为顶点)。

步骤402，根据区域信息，确定截图区域中包含的目标网页内容，目标网页内容包括文字内容、图片内容和多媒体内容中的至少一种。

在一种可能的实施方式中，浏览器获取网页中各个网页内容的显示位置，从而根据区域信息，将显示位置位于截图区域内的网页内容确定为目标网页内容。

可选的，对于位于浏览器显示区域外的目标网页内容，由于这类目标网页内容可能并未写入浏览器缓存，因此浏览器首先需要获取这类目标网页内容并写入缓存中。

步骤403，根据目标网页内容生成网页截图。

可选的，浏览器对确定出的目标网页内容进行渲染，从而生成包含目标网页内容的网页截图。该网页截图不仅可以包含浏览器显示区域之内的网页内容，还可以包含浏览器显示区域之外的网页内容，从而实现对网页任意区域进行截图。

综上所述，本实施例中，当截图区域的部分或全部位于浏览器显示区域之外时，通过获取包含区域信息的截图指令，并根据该区域信息确定截图区域中包含的目标网页内容，从而根据目标网页内容生成网页截图；由于根据区域信息能够获取到浏览器显示区域以外的网页内容，因此能够解决使用浏览器进行网页截图时，只能截取浏览器窗口当前显示内容的问题，进而实现了利用浏览器对网页任意区域进行截图的效果。

在一种可能的实施方式中，终端获取当前网页中包含的各个网页节点，并根据截图区域的区域信息，确定出位于截图区域中的目标网页节点，进而对目标网页节点进行渲染，最终生成截图区域的网页截图。下面采用示意性的实施例进行说明。

请参考图5，其示出了本申请另一个示例性实施例提供的网页截图方法的流程图。本实施例以该方法应用于安装有浏览器的终端中来举例说明。所述方法包括：

步骤501，接收截图指令，截图指令中包含截图区域的区域信息，截图区域的部分或全部位于浏览器显示区域外。

相关技术中，当浏览器处于前台运行状态时，浏览器才能进行网页截图，当浏览器处于后台运行状态时，由于网页的缓存可能被回收，导致网页截图失败。而本申请实施例中，不论浏览器处于前台运行状态还是后台运行状态，均能够实现网页截图。

在一种可能的实施方式中，当浏览器在前台运行时，浏览器接收在浏览器界面触发的截图指令。可选的，前台浏览器检测到启用截图功能时，浏览器界面中显示截图区域设置界面，并接收用户输入的区域信息。其中，当获取到输入的区域信息时，浏览器即根据区域信息确定截图区域，当未获取到输入的区域信息时，浏览器默认截图区域为浏览器显示区域。

示意性的，如图6所示，当启用截图功能时，浏览器界面中显示截图区域设置界面61，并接收到用户设置的截图区域的尺寸2500×1080。

在另一种可能的实施方式中，当浏览器在后台运行时，浏览器接收前台应用程序向浏览器发送的截图指令，前台应用程序用于通过截图指令指示浏览器进行截图。

本实施例中，用户不仅能够指示前台运行的浏览器进行网页截图，还能够通过前台运行的其他应用程序指示后台运行的浏览器进行网页截图。可选的，当前台运行程序接收到指示后台浏览器进行截图的截图指令时，即通过系统广播的方式向后台浏览器发送该截图指令。相应的，后台浏览器接收到截图指令后，即通过后续步骤进行网页截图。

在实际应用过程中，当用户需要使用即时通信应用向其他用户分享浏览器网页截图时(浏览器处于后台运行状态)，通过前台即时通信应用向后台浏览器发送截图指令即可，无需将浏览器切换至前台进行截图后，再将即时通信应用切换至前台分享截图，从而避免应用间来回切换，提高了截图分享的效率。

步骤502，创建截图缓存区域和刷新区域。

在一种可能的实施方式中，浏览器接收到截图指令后，即创建根据截图区域的大小创建截图缓存区域，并对该截图缓存区域进行初始化，以便后续将渲染得到的截图图像缓存到截图缓存区域中。

可选的，创建完截图缓存区域后，浏览器将包含区域信息的截图指令发送给浏览器内核，由浏览器内核创建刷新区域，该刷新区域即用于存储渲染得到的网页内容。浏览器内核为浏览器的渲染引擎(Rendering Engine)，用于对网页的语法(如超级文本标记语言(HyperText Markup Language，HTML)、Java脚本)进行解释，并渲染显示网页。其中，不同浏览器采用的浏览器内核不同，本申请实施例并不对浏览器内核的具体类型进行限定。

步骤503，获取网页中包含的网页节点。

其中，每个网页节点对应网页中不同的网页内容。

在一种可能的实施方式中，浏览器内核获取网页对应的HTML文件，并根据HTML文件构建网页的文档对象模型(Document Object Model，DOM)树，进而从DOM树中获取网页中的各个网页节点(即DOM节点)。

步骤504，根据区域信息从网页节点中筛选目标网页节点，目标网页节点在网页中的显示位置位于截图区域内。

进一步的，浏览器内核根据区域信息，从网页节点中少选出位于截图区域内的目标网页节点，该目标网页节点对应的网页内容即显示在截图区域内。

在一种可能的实施方式中，浏览器内核获取各个网页节点在网页中的位置信息，从而根据给位置信息和截图区域的区域信息筛选出目标网页节点，可选的，本步骤包括如下步骤。

一、获取网页的渲染(Render)树，Render树根据网页的DOM树和层叠样式表对象模型(Cascading Style Sheets Object Model，CSSOM)树生成。

浏览器进行网页渲染通常包含如下步骤：

1、将网页HTML文件解析成DOM树(树形的数据结构)；

2、将网页的CSS文件解析成CSSOM树(树形的数据结构)；

3、将DOM树和CSSOM树合并生成Render树；

其中，生成的Render树用于指示网页中包含的网页节点、各个网页节点的CSS以及各个网页节点之间的从属关系。

4、对Render树进行布局(layout)。

通过对Render树进行布局，浏览器内核计算出各个网络节点在显示位置。

5、根据布局结果对Render树进行渲染。

本实施例中，浏览器内核获取到各个网页节点后，进一步获取网页的Render树。

二、对Render树进行布局，确定各个网页节点对应的位置信息，位置信息用于指示网页节点在网页中的显示位置。

进一步的，浏览器内核对Render树进行布局，从而确定网页中各个节点的显示位置，并得到相应的位置信息。

可选的，该位置信息采用坐标的形式表示。

三、根据位置信息与区域信息筛选目标网页节点，目标网页节点的位置信息与区域信息匹配。

进一步的，浏览器内核将位置信息与区域信息匹配的网页节点确定为目标网页节点，其中，位置信息与区域信息匹配是指：位置信息指示的显示位置位于区域信息指示的截图区域之内。

比如，浏览器内核获取到网页节点A的位置信息为(2280px，1050px)，且区域信息指示截图区域为2500px×1080px的矩形区域(以(0,0)为顶点)时，确定网页节点为目标网页节点。

步骤505，将目标网页节点确定为目标网页内容。

对于筛选出的目标网页节点，浏览器内核将其确定为截图区域中的目标网页内容。

步骤506，对目标网页节点进行刷新排版。

可选的，浏览器通过浏览器内核对筛选出的目标网页节点进行刷新排版，从而避免后续进行渲染合并时出现排版异常。

步骤507，通过GPU渲染刷新排版后的目标网页节点，并将渲染得到的节点图像写入刷新区域。

在一种可能的实施方式中，为了提高渲染效率，浏览器内核调用终端的GPU对刷新排版后的目标网页节点进行渲染，并将渲染后的目标网页节点(即节点图像)写入上述步骤502中创建的刷新区域中。

在其他可能的实施方式中，浏览器内核也可以调用中央处理器(CentralProcessing Unit，CPU)对目标网页节点进行渲染(渲染效率低于GPU)，本实施例并不对此进行限定。

步骤508，对刷新区域中的节点图像进行合成渲染，并将合成图像写入截图缓存区域。

完成对各个目标网页节点的渲染操作后，浏览器内核通过合并层(composite)对网页上不同显示区域的目标网页节点进行合成。从而将合成图像写入上述步骤502中创建的截图缓存区域。

可选的，将合成图像写入截图缓存区域后，浏览器内核删除刷新区域中写入的目标网络节点。

步骤509，对截图缓存区域中的合成图像进行编码，得到网页截图。

为了降低网页截图的数据量，浏览器内核还需要对截图缓存区域中的合成图像进行编码加密以及数据压缩等处理，从而得到预定图片格式的网页截图，方便用户进行查看和分享。

可选的，生成网页截图后，浏览器对截图缓存区域中的合成图像进行删除。

示意性的，如图6所示，浏览器显示区域的显示尺寸为2160px×1080px，浏览器根据用户设置的截图区域的尺寸，通过上述步骤生成的2500px×1080px的网页截图62，该网页截图62中即包含浏览器显示区域无法完整显示的图片63。

综上所述，本实施例中，终端获取当前网页中包含的各个网页节点后，对网页的Render树进行布局，从而确定各个网页节点的位置信息，进而根据网页节点的位置信息以及截图区域的区域信息，筛选出截图区域内的目标网页节点，最终对目标网页节点进行排版渲染以及合并，生成截图区域的网页截图，提高了网页截图的生成效率。

本实施例中，当浏览器在前台运行时，浏览器接收在浏览器界面触发的截图指令并进行网页截图；当浏览器在后台运行时，浏览器接收前台应用程序发送的截图指令后进行网页截图；使得浏览器不论在前台还是后台运行状态下，均能够完成网页截图，扩大了网页截图的应用场景，并提高了网页截图的效率。

下述为本申请装置实施例，可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节，请参照本申请方法实施例。

请参考图7，其示出了本申请一个示例性实施例提供的网页截图装置的结构框图。该网页截图装置包括：指令接收模块710、内容确定模块720和截图生成模块730。

指令接收模块710，用于接收截图指令，所述截图指令中包含截图区域的区域信息，所述截图区域的部分或全部位于浏览器显示区域外；

内容确定模块720，用于根据所述区域信息，确定所述截图区域中包含的目标网页内容，所述目标网页内容包括文字内容、图片内容和多媒体内容中的至少一种；

截图生成模块730，用于根据所述目标网页内容生成网页截图。

可选的，所述内容确定模块720，包括：

节点获取单元，用于获取网页中包含的网页节点；

节点筛选单元，用于根据所述区域信息从所述网页节点中筛选目标网页节点，所述目标网页节点在所述网页中的显示位置位于所述截图区域内；

节点确定单元，用于将所述目标网页节点确定为所述目标网页内容。

可选的，所述节点筛选单元，用于：

获取所述网页的Render树，所述Render树根据所述网页的DOM树和CSSOM树生成；

对所述Render树进行布局，确定各个网页节点对应的位置信息，所述位置信息用于指示所述网页节点在所述网页中的显示位置；

根据所述位置信息与所述区域信息筛选所述目标网页节点，所述目标网页节点的所述位置信息与所述区域信息匹配。

可选的，所述装置还包括：

创建模块，用于创建截图缓存区域和刷新区域；

所述截图生成模块730，包括：

刷新单元，用于对所述目标网页节点进行刷新排版；

渲染单元，用于通过GPU渲染刷新排版后的所述目标网页节点，并将渲染得到的节点图像写入所述刷新区域；

合并单元，用于对所述刷新区域中的所述节点图像进行合成渲染，并将合成图像写入所述截图缓存区域；

编码单元，用于对所述截图缓存区域中的所述合成图像进行编码，得到所述网页截图。

可选的，所述指令接收模块710，包括：

第一接收单元，用于当浏览器在前台运行时，接收在浏览器界面触发的所述截图指令；

或，

第二接收单元，用于当所述浏览器在后台运行时，接收前台应用程序向所述浏览器发送的所述截图指令，所述前台应用程序用于通过所述截图指令指示所述浏览器进行截图。

综上所述，本实施例中，当截图区域的部分或全部位于浏览器显示区域之外时，通过获取包含区域信息的截图指令，并根据该区域信息确定截图区域中包含的目标网页内容，从而根据目标网页内容生成网页截图；由于根据区域信息能够获取到浏览器显示区域以外的网页内容，因此能够解决使用浏览器进行网页截图时，只能截取浏览器窗口当前显示内容的问题，进而实现了利用浏览器对网页任意区域进行截图的效果。

本实施例中，终端获取当前网页中包含的各个网页节点后，对网页的Render树进行布局，从而确定各个网页节点的位置信息，进而根据网页节点的位置信息以及截图区域的区域信息，筛选出截图区域内的目标网页节点，最终对目标网页节点进行排版渲染以及合并，生成截图区域的网页截图，提高了网页截图的生成效率。

本实施例中，当浏览器在前台运行时，浏览器接收在浏览器界面触发的截图指令并进行网页截图；当浏览器在后台运行时，浏览器接收前台应用程序发送的截图指令后进行网页截图；使得浏览器不论在前台还是后台运行状态下，均能够完成网页截图，扩大了网页截图的应用场景，并提高了网页截图的效率。

需要说明的是，上述实施例提供的装置，在实现其功能时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将终端的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的装置与方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

本申请实施例还提供了一种计算机可读介质，该计算机可读介质存储有至少一条指令，所述至少一条指令由所述处理器加载并执行以实现如上各个实施例所述的网页截图方法。

本申请实施例还提供了一种计算机程序产品，该计算机程序产品存储有至少一条指令，所述至少一条指令由所述处理器加载并执行以实现如上各个实施例所述的网页截图方法。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本申请的较佳实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (12)

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

接收截图指令，所述截图指令中包含截图区域的区域信息，所述截图区域的部分或全部位于浏览器显示区域外；

根据所述区域信息，确定所述截图区域中包含的目标网页内容，所述目标网页内容包括文字内容、图片内容和多媒体内容中的至少一种；

根据所述目标网页内容生成网页截图。

2.根据权利要求1所述的方法，其特征在于，所述根据所述区域信息，确定所述截图区域中包含的目标网页内容，包括：

获取网页中包含的网页节点；

根据所述区域信息从所述网页节点中筛选目标网页节点，所述目标网页节点在所述网页中的显示位置位于所述截图区域内；

将所述目标网页节点确定为所述目标网页内容。

3.根据权利要求2所述的方法，其特征在于，所述根据所述区域信息从所述网页节点中筛选目标网页节点，包括：

获取所述网页的渲染Render树，所述Render树根据所述网页的文档对象模型DOM树和层叠样式表对象模型CSSOM树生成；

对所述Render树进行布局，确定各个网页节点对应的位置信息，所述位置信息用于指示所述网页节点在所述网页中的显示位置；

根据所述位置信息与所述区域信息筛选所述目标网页节点，所述目标网页节点的所述位置信息与所述区域信息匹配。

4.根据权利要求2或3所述的方法，其特征在于，所述接收截图指令之后，所述方法还包括：

创建截图缓存区域和刷新区域；

所述根据所述目标网页内容生成网页截图，包括：

对所述目标网页节点进行刷新排版；

通过图形处理器GPU渲染刷新排版后的所述目标网页节点，并将渲染得到的节点图像写入所述刷新区域；

对所述刷新区域中的所述节点图像进行合成渲染，并将合成图像写入所述截图缓存区域；

对所述截图缓存区域中的所述合成图像进行编码，得到所述网页截图。

5.根据权利要求1至3任一所述的方法，其特征在于，所述接收截图指令，包括：

当浏览器在前台运行时，接收在浏览器界面触发的所述截图指令；

或，

当所述浏览器在后台运行时，接收前台应用程序向所述浏览器发送的所述截图指令，所述前台应用程序用于通过所述截图指令指示所述浏览器进行截图。

6.一种网页截图装置，其特征在于，所述方法包括：

指令接收模块，用于接收截图指令，所述截图指令中包含截图区域的区域信息，所述截图区域的部分或全部位于浏览器显示区域外；

内容确定模块，用于根据所述区域信息，确定所述截图区域中包含的目标网页内容，所述目标网页内容包括文字内容、图片内容和多媒体内容中的至少一种；

截图生成模块，用于根据所述目标网页内容生成网页截图。

7.根据权利要求6所述的装置，其特征在于，所述内容确定模块，包括：

节点获取单元，用于获取网页中包含的网页节点；

节点筛选单元，用于根据所述区域信息从所述网页节点中筛选目标网页节点，所述目标网页节点在所述网页中的显示位置位于所述截图区域内；

节点确定单元，用于将所述目标网页节点确定为所述目标网页内容。

8.根据权利要求7所述的装置，其特征在于，所述节点筛选单元，用于：

获取所述网页的渲染Render树，所述Render树根据所述网页的文档对象模型DOM树和层叠样式表对象模型CSSOM树生成；

对所述Render树进行布局，确定各个网页节点对应的位置信息，所述位置信息用于指示所述网页节点在所述网页中的显示位置；

根据所述位置信息与所述区域信息筛选所述目标网页节点，所述目标网页节点的所述位置信息与所述区域信息匹配。

9.根据权利要求7或8所述的装置，其特征在于，所述装置还包括：

创建模块，用于创建截图缓存区域和刷新区域；

所述截图生成模块，包括：

刷新单元，用于对所述目标网页节点进行刷新排版；

渲染单元，用于通过图形处理器GPU渲染刷新排版后的所述目标网页节点，并将渲染得到的节点图像写入所述刷新区域；

合并单元，用于对所述刷新区域中的所述节点图像进行合成渲染，并将合成图像写入所述截图缓存区域；

编码单元，用于对所述截图缓存区域中的所述合成图像进行编码，得到所述网页截图。

10.根据权利要求6至8任一所述的装置，其特征在于，所述指令接收模块，包括：

第一接收单元，用于当浏览器在前台运行时，接收在浏览器界面触发的所述截图指令；

或，

第二接收单元，用于当所述浏览器在后台运行时，接收前台应用程序向所述浏览器发送的所述截图指令，所述前台应用程序用于通过所述截图指令指示所述浏览器进行截图。

11.一种终端，其特征在于，所述终端包括处理器和存储器，所述存储器中存储有至少一条指令，所述指令由所述处理器加载并执行以实现如权利要求1至5任一所述的网页截图方法。

12.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条指令，所述指令由处理器加载并执行以实现如权利要求1至5任一所述的网页截图方法。