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

Abstract

本申请公开了一种生成网页截图的方法及其装置。其中，生成网页截图的方法包括：获取用户对网页的截图操作的截图操作信息；基于打开网页的浏览器支持超文本标记语言的画布元素，创建网页的画布；在画布上生成与截图操作信息对应的网页截图。按照本申请的方案，能够在整个网页页面内进行截图操作。

Description

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

技术领域

本公开一般涉及计算机技术，具体涉及互联网技术，尤其涉及生成网页截图的方法及其装置。

背景技术

目前，在浏览器中进行截图操作主要有两种实现方案：基于浏览器截图插件的截图方案以及基于浮动框架(iframe)的页面截图方案。

在使用第一种基于浏览器截图插件的截图方案来进行用户反馈时，用户需要经过下载客户端截图工具、截图标注问题、保存图片到本地、上传图片到服务器以及说明问题的流程来完成沟通。此外，现有的截图工具软件仅能对展现在客户端的显示屏幕上的网页部分进行截图操作，而无法实现在整个网页页面内的截图操作。

而在使用第二种基于iframe的截图方案来进行用户反馈时，通过在网页上需要进行截图的区域加载iframe，并在iframe内进行截图操作。然而，部分网页不支持在其上添加iframe，因而在这些网页中，不能通过iframe进行截图操作。

发明内容

鉴于现有技术中的上述缺陷或不足，期望提供一种生成网页截图的方法及其装置，能够在整个网页页面内进行截图操作。

第一方面，本申请实施例提供了一种生成网页截图的方法，包括：获取用户对网页的截图操作的截图操作信息；基于打开网页的浏览器支持超文本标记语言的画布元素，创建网页的画布；在画布上生成与截图操作信息对应的网页截图。

第二方面，本申请实施例还提供了一种生成网页截图的方法，包括：基于客户端的打开网页请求，向客户端发送网页；基于客户端的截图请求，向网页加载截图插件；获取客户端的在截图插件中对网页的截图操作；以及基于截图操作生成截图图片。

第三方面，本申请实施例还提供了一种生成网页截图的装置，包括：获取模块，配置用于获取用户对网页的截图操作的截图操作信息；创建模块，配置用于基于打开网页的浏览器支持超文本标记语言的画布元素，创建网页的画布；生成模块，配置用于在画布上生成与截图操作信息对应的网页截图。

第四方面，本申请实施例还提供了一种生成网页截图的装置，包括：第一加载模块，配置用于基于客户端的打开网页请求，向客户端加载网页；第二加载模块，配置用于基于客户端的截图请求，向网页加载截图插件；获取模块，配置用于获取客户端的在截图插件中对网页的截图操作；以及生成模块，配置用于基于截图操作生成截图图片。

本申请实施例提供的生成网页截图的方案，可以在整个网页范围内，根据用户的截图操作，对网页内的多个区域进行截图。

在本申请的一些可选方案中，可以仅在用户请求时向网页加载截图插件，从而减小了客户端正常网页访问的硬件资源消耗。

在本申请的另一些可选方案中，可以通过将用户的截图操作信息发送至服务器，由服务器来根据用户的截图操作信息生成对应的截图图片，从而进一步减小客户端在截图操作时的硬件资源消耗。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1示出了可以应用本申请实施例的示例性系统架构；

图2示出了本申请实施例的网页截图交互过程的示例；

图3示出了根据本申请一个实施例的生成网页截图的方法的示意性流程图；

图4示出了根据本申请一个实施例的基于网页的DOM结构创建的画布的示意图；

图5示出了根据本申请一个实施例的基于截图操作的动作类别信息和位置信息，创建的画布的示意图；

图6示出了根据本申请另一个实施例的生成网页截图的方法的示意性流程图；

图7示出了本申请实施例的生成网页截图的方法的一种应用场景的示意性流程图；

图8示出了根据本申请一个实施例的生成网页截图的装置的示意性结构图；

图9示出了根据本申请另一个实施例的生成网页截图的装置的示意性结构图。

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关发明，而非对该发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与发明相关的部分。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

图1示出了可以应用本申请实施例的示例性系统架构100。

如图1所示，系统架构100可以包括终端设备101～103、网络104和服务器105。网络104用以在终端设备101～103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户110可以使用终端设备101～103通过网络104与服务器105交互，以接收或发送消息等。终端设备101～103上可以安装有各种通讯客户端应用，例如即时通信工具、邮箱客户端、社交平台软件等。

终端设备101～103可以是各种电子设备，包括但不限于个人电脑、智能手机、智能手表、平板电脑、个人数字助理等等。

服务器105可以是提供各种服务的服务器。例如，服务器105可以是网站服务器，用以基于用户110的请求，向终端设备101～103加载网页。服务器105可以对接收到的数据进行存储、分析等处理，并将处理结果反馈给终端设备101～103。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

图2示出了本申请实施例的网页截图交互过程的示例200。本领域技术人员可以理解，出于示例和便于理解的目的，在以下描述中绘出和描述了一个或多个特定技术细节，但是本申请的实施例也可以在不具有这些特征的情况下实践。在图2所示的实施例中，以一个服务器和一个客户端的交互为例进行说明。

在步骤201中，客户端向服务器发送网页加载请求。

例如，在一些应用场景中，用户通过在客户端打开浏览器并在浏览器的地址栏输入网址，从而向提供该网页内容的服务器发送网页加载请求。或者，在另一些应用场景中，用户通过点击链接至该网页的统一资源定位符(Uniform Resoure Locator，URL)，来向提供该网页内容的服务器发送网页加载请求。

接着，在步骤202中，服务器向客户端发送网页。

在一些实现方式中，服务器根据客户端请求的网页的URL，查找与之对应的网页内容，并将与网页内容对应的超文本标记语言(HyperText Markup Language，HTML)代码，发送至客户端。客户端的浏览器可通过解析与网页内容对应的HTML代码，在浏览器中展现该网页。

接着，在步骤203中，当客户端有对该网页进行截图的需求时，可向服务器发送截图请求。在步骤204中，服务器接收到客户端的截图请求后，向客户端的网页加载截图插件。

例如，在一些实现方式中，可以在网页中设置一截图请求的按钮，用户可通过点击该按钮，向服务器发送截图插件的URL。服务器基于该URL查找截图插件，并向客户端的网页加载该截图插件。

接着，在步骤205中，用户通过该截图插件对该网页进行截图操作，同时客户端获取截图操作的截图操作信息。截图操作信息可以体现用户想要在该网页中进行截图的区域。在一些应用场景中，用户想要进行截图的区域可以是一个区域，也可以是两个以上的区域。

接着，在步骤206中，创建网页的画布(Canvas)。

Canvas是HTML5的一个标签，通过Canvas标签，可以使用JavaScript在网页上绘制图像。在一些应用场景下，通过指定画布的位置和大小，便可将与该位置和大小对应的网页内容绘制到Canvas上。

在一些实现方式中，可以创建整个网页的画布。或者，在另一些实现方式中，可以基于截图操作的位置和大小来创建画布。在这些实现方式中画布可以包含全部截图区域。

接着，在步骤207中，生成截图图片。

从步骤206可以看出，生成的画布至少包括了全部的截图区域。因此，可以在画布上将与截图操作对应的区域截取出来，从而生成截图图片。

或者，在另一些实现方式中，可以由服务器来生成与截图操作对应的截图图片。

具体而言，在步骤208中，客户端将用户的截图操作信息发送至服务器。接着，在步骤209中，生成截图图片。

在一些应用场景中，服务器可基于客户端发送的截图操作信息来确定用户想要进行截图的区域。然后，服务器可获取截图区域所对应的网页内容(例如，截图区域的HTML代码)，并渲染生成与该部分网页内容对应的截图图片。

接着，在步骤210中，服务器将生成的截图图片发送给客户端。

以上对客户端与服务器之间的网页截图交互过程进行了描述。接下来，将分别以客户端和服务器为主体来详细描述本发明的生成网页截图的方法及其装置。

图3示出了根据本申请一个实施例的生成网页截图的方法的示意性流程图300。在本实施例中，生成网页截图的方法例如可以由展示该网页的客户端来执行。

在步骤310中，获取用户对网页的截图操作的截图操作信息。

在一些实现方式中，截图操作信息例如可以包括动作类别信息和位置信息。

在这里动作类别信息可以是能够表征用户的具体操作行为的信息。

在一些应用场景中，当用户使用鼠标进行截图操作时，动作类别信息例如可以包括鼠标的移动、鼠标的点击、鼠标的抬起等。或者，在另一些应用场景中，当用户使用键盘进行截图操作时，动作类别信息例如可以包括用户对某一个或者几个按键的操作信息，例如，用户对空格键、回车键、向上键、向下键、向左键或向右键的按下或抬起操作。或者，还有一些应用场景中，客户端的显示屏为触摸屏，动作类别信息例如可以包括手指和/或触摸笔对触摸屏的点击、滑动、抬起等等。

在一些实现方式中，截图操作信息中的位置信息例如可以包括截图操作的起始位置信息和/或终止位置信息。

例如，在一种应用场景中，用户使用鼠标进行截图操作。位置信息例如可以包括用户点击鼠标时鼠标在网页中所处的位置信息(即起始位置信息)以及用户抬起鼠标时鼠标在网页中所处的位置信息(即终止位置信息)。

或者，在一些可选方案中，可以通过跟踪用户的实时操作，来获得截图操作的位置信息。例如，在一些应用场景中，用户用手指对客户端的触摸屏进行截图操作。此时，可以跟踪用户的手指在触摸屏上的移动，进而获得与手指移动轨迹相对应的截图操作的位置信息。

接着，在步骤320中，判断打开网页的浏览器是否支持超HTML的Canvas元素。若浏览器支持Canvas元素，则在步骤330中，创建网页的画布。

本申请的生成网页截图的方法的实施，依赖于HTML5的Canvas元素。在浏览器支持Canvas元素的前提下，才可生成该网页的画布。

接着，在步骤340中，在画布上生成与截图操作信息对应的网页截图。该步骤例如可以理解为将与截图操作信息对应的网页区域，从画布上以图片格式“抓取”出来。

在一些可选方式中，步骤310可以通过获取截图操作的动作类别信息，获取截图操作的位置信息以及存储截图操作的动作类别信息和位置信息来实现。

在一些可选方式中，可以基于网页的文档对象(Document ObjectModel，DOM)结构，创建网页的画布。

DOM是以层次结构组织的节点或信息片断的集合，其将网页中的各个元素都看作一个个对象，从而使网页中的各元素可被计算机语言获取或者编辑。

例如，如图4所示，为基于网页的DOM结构创建的画布的示意图。在图4中，附图标记410所指区域为基于网页的DOM结构创建的画布，附图标记420所指区域为用户进行截图操作的区域。

从图4中可以看出，基于网页的DOM结构创建的画布，包含了整个网页的内容。

在另一些可选方式中，还可以基于截图操作的动作类别信息和位置信息，创建与截图操作对应的画布。

具体而言，首先，可以基于截图操作的位置信息确定画布的起始位置和终止位置。接着，基于画布的起始位置和终止位置创建画布。在这里，画布的范围覆盖截图操作的截图区域。

例如，如图5所示，为基于截图操作的动作类别信息和位置信息创建的画布的示意图。在图5中，附图标记510所指区域为基于截图操作的动作类别信息和位置信息创建的画布，附图标记520所指区域为用户进行截图操作的区域。

从图5中可以看出，基于截图操作的动作类别信息和位置信息创建的画布，包含了网页中一部分区域的内容，且该画布510覆盖了截图操作的截图区域520。

在一些可选方案中，步骤310的获取用户对网页的截图操作信息还可以包括基于截图操作的位置信息生成与截图操作对应的操作效果。

在这里，操作效果例如可以包括截图区域选定、截图区域取消、截图区域缩小以及截图区域扩大中的至少一者。

例如，在一些应用场景中，当鼠标经过截图区域时，沿着截图区域的轮廓生成用于突出显示该轮廓的框线，或者，在该轮廓的右上角生成用于取消该截图区域的“×”标记。或者，当鼠标经过截图区域的轮廓时，生成提示用户对该截图区域的轮廓进行缩小或者扩大的箭头等。

在一些可选方案中，在本实施例的生成网页截图的方法中的步骤340之前还可以包括步骤350：在画布上加载与截图操作对应的网页截图效果预览。通过该步骤，用户可以直观地获知其截图操作对应的区域，并且在一些实现方式中，可以通过与这些截图区域对应的操作效果，对截图区域进行调整(例如，取消、移动、放大或者缩小等)

在一些实现方式中，可以通过在画布上生成与网页截图效果预览对应的网页截图来实现在画布上生成与截图操作对应的网页截图。例如，可以基于html2Canvas技术，在画布上生成与截图操作对应的网页截图。

html2canvas是一个JavaScript类库，其使用了html5和层叠样式表(Cascading StyleSheet，CSS)3的一些新功能特性，实现了在客户端对网页进行截图的功能。html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。

当截图操作的区域包含较多的跨域资源(例如，图片)时，通过html2canvas的方式生成网页截图可能需要耗费大量的时间和客户端硬件资源。因此，在另一些实现方式中，还可以将截图操作信息上传至提供网页的服务器，并获取与截图操作信息对应的网页截图，从而实现在画布上生成与截图操作对应的网页截图。例如，服务器可以基于phantomJS技术来渲染与截图操作信息对应的网页截图。

PhantomJS是一个带有JavaScript宿主环境的webkit引擎封装，它类似于一个浏览器，因此，其可根据截图操作信息解析并渲染出与之对应的网页截图。

在一些实现方式中，生成的网页截图例如可以是base64格式的图片。

图6示出了根据本申请的另一实施例的生成网页截图的方法的示意性流程图600。在本实施例中，生成网页截图的的方法例如可以由提供该网页的服务器来执行。

在步骤610中，基于客户端的打开网页请求，向客户端发送网页。

接着，在步骤620中，基于客户端的截图请求，向网页加载截图插件。在这里，可以看出，若客户端不发送截图请求，则服务器不向客户端的网页加载截图插件。

接着，在步骤630中，获取客户端的在截图插件中对网页的截图操作的截图操作信息。与图3所示的实施例相同，本实施例中的截图操作信息也可以包括动作类别信息和位置信息。

接着在步骤640中，基于截图操作信息生成截图图片。在一些实现方式中，例如可以基于phantomJS技术来渲染与截图操作信息对应的网页截图。

在一些可选方案中，本实施例的生成网页截图的方法还可以包括步骤650，向客户端发送截图图片，截图图片的格式例如可以是base64格式。

图7示出了本申请实施例的生成网页截图的方法的一种应用场景700的示意性流程图。

在该应用场景中，本申请实施例的生成网页截图的方法用于网页的问题反馈插件中。也即是说，用户可通过该插件获取网页的截图，并将截图发送给服务器，从而向服务器反馈截图部分存在的问题。

在一些实现方式中，反馈插件可以是弹框的形式。例如，用户通过在网页上的操作(例如点击指示弹出反馈插件的按钮)，可以弹出该反馈插件的交互界面。在这些实现方式中，如图7中的附图标记710所示，为了保证反馈插件在任意打开该网页的客户端均能正常弹出，需要对反馈插件进行兼容性处理。

此外，在一些应用场景下，弹框的弹出位置可能与用户想要进行截图操作的位置部分重合。此时，为了使用户能够在网页的任意位置进行截图操作，反馈插件的交互界面需要是可拖拽的，也即是说，如图7中的附图标记720所示，用户可以通过操作(例如，通过鼠标点击反馈插件的交互界面并移动鼠标)来实现交互界面的移动。

此外，如图7中的附图标记730所示，该反馈插件还可以更换不同的交互界面样式(例如颜色、背景等)，从而给客户提供个性化的使用体验。

用户可以通过该反馈插件，使用本申请实施例中的生成网页截图的方法来对网页中的任意位置进行截图操作并得到与截图操作对应的网页截图，如图7中的附图标记740所示。

图8示出了根据本申请一个实施例的生成网页截图的装置的示意性结构图800。

如图8所示，生成网页截图的装置800可包括获取模块810、创建模块820和生成模块830。

其中，获取模块810可配置用于获取用户对网页的截图操作的截图操作信息。创建模块820可配置用于基于打开网页的浏览器支持超文本标记语言的画布元素，创建网页的画布。生成模块830可配置用于在画布上生成与截图操作信息对应的网页截图。

在一些实现方式中，获取模块810可进一步包括类别获取单元811、位置获取单元812和存储单元813。

其中，类别获取单元811可配置用于获取截图操作的动作类别信息。位置获取单元812可配置用于获取截图操作的位置信息，在这里，位置信息可以包括截图操作的起始位置和/或终止位置。存储单元813可配置用于存储截图操作的动作类别信息和位置信息。

在一些实现方式中，截图操作的动作类别信息例如包括以下至少一项：手指、鼠标和/或触摸笔的点击、移动、以及抬起；以及键盘中指定按键的按下和/或抬起。

在一些实现方式中，创建模块820可以包括第一创建单元821或者第二创建单元822。

其中，第一创建单元821可配置用于基于网页的文档对象结构，创建网页的画布。第二创建单元822可配置用于基于截图操作的动作类别信息和位置信息，创建与截图操作对应的画布。

作为一种可选方案，第二创建单元822可进一步配置用于基于截图操作的位置信息确定画布的起始位置和终止位置并基于画布的起始位置和终止位置创建画布。在这些可选方案中，画布的范围可覆盖截图操作的截图区域。

作为一种可选方案，获取模块810可进一步配置用于基于截图操作的位置信息生成与截图操作信息对应的操作效果。

在这些可选方案中，操作效果可以包括截图区域选定、截图区域取消、截图区域缩小以及截图区域扩大中的至少一项。

作为一种可选方案，本实施例的生成网页截图的装置800还可以包括预览模块840，其可配置用于在生成模块在画布上生成与截图操作对应的网页截图之前，在画布上加载与截图操作对应的网页截图效果预览。

在一些实现方式中，生成模块830可以包括第一生成单元831和第二生成单元832中的任意一者。

其中，第一生成单元831可配置用于在画布上生成与网页截图效果预览对应的网页截图。第二生成单元832可配置用于将截图操作信息上传至提供网页的服务器，并获取与截图操作信息对应的网页截图。

在一些实现方式中，网页截图例如可以为base64图片格式。

图9示出了根据本申请另一个实施例的生成网页截图的装置的示意性结构图900。

如图9所示，生成网页截图的装置900可以包括第一加载模块910、第二加载模块920、获取模块930和生成模块940。

其中，第一加载模块910可配置用于基于客户端的打开网页请求，向客户端加载网页。第二加载模块920可配置用于基于客户端的截图请求，向网页加载截图插件。获取模块930可配置用于获取客户端的在截图插件中对网页的截图操作的截图操作信息。生成模块940可配置用于基于截图操作信息生成截图图片。

在一些实现方式中，本实施例的生成网页截图的装置还可以包括发送模块950，其可配置用于向客户端发送截图图片。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本申请实施例中所涉及到的单元或模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元或模块也可以设置在处理器中，例如，可以描述为：一种处理器包括获取模块、创建模块和生成模块。其中，这些单元或模块的名称在某种情况下并不构成对该单元或模块本身的限定，例如，获取模块还可以被描述为“用于获取用户对网页的截图操作的截图操作信息的模块”。

作为另一方面，本申请还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中装置中所包含的计算机可读存储介质；也可以是单独存在，未装配入设备中的计算机可读存储介质。计算机可读存储介质存储有一个或者一个以上程序，程序被一个或者一个以上的处理器用来执行描述于本申请的公式输入方法。

以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (24)

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

获取用户对所述网页的截图操作的截图操作信息；

基于打开所述网页的浏览器支持超文本标记语言的画布元素，创建所述网页的画布；

在所述画布上生成与所述截图操作信息对应的网页截图。

2.根据权利要求1所述的方法，其特征在于，所述获取用户对所述网页的截图操作的截图操作信息包括：

获取所述截图操作的动作类别信息；

获取所述截图操作的位置信息，所述位置信息包括所述截图操作的起始位置信息和/或终止位置信息；以及

存储所述截图操作的动作类别信息和位置信息。

3.根据权利要求2所述的方法，其特征在于，所述截图操作的动作类别信息包括以下至少一项：

手指、鼠标和/或触摸笔的点击、移动、以及抬起；以及

键盘中指定按键的按下和/或抬起。

4.根据权利要求2所述的方法，其特征在于，所述创建所述网页的画布包括以下任意一项：

基于所述网页的文档对象结构，创建所述网页的画布；以及

基于所述截图操作的动作类别信息和位置信息，创建与所述截图操作对应的画布。

5.根据权利要求4所述的方法，其特征在于，所述基于所述截图操作的动作类别信息和位置信息，创建与所述截图操作对应的画布包括：

基于所述截图操作的位置信息确定所述画布的起始位置和终止位置；

基于所述画布的起始位置和终止位置创建画布；

其中，所述画布的范围覆盖所述截图操作的截图区域。

6.根据权利要求2所述的方法，其特征在于，所述获取用户对所述网页的截图操作信息还包括：

基于所述截图操作的位置信息生成与所述截图操作对应的操作效果。

7.根据权利要求6所述的方法，其特征在于，所述操作效果包括以下至少一项：

截图区域选定、截图区域取消、截图区域缩小以及截图区域扩大。

8.根据权利要求4所述的方法，其特征在于，在所述画布上生成与所述截图操作对应的网页截图之前，所述方法还包括：

在所述画布上加载与所述截图操作对应的网页截图效果预览。

9.根据权利要求8所述的方法，其特征在于，所述在所述画布上生成与所述截图操作对应的网页截图包括以下任意一项：

在所述画布上生成与所述网页截图效果预览对应的网页截图；以及

将所述截图操作信息上传至提供所述网页的服务器，并获取与所述截图操作信息对应的网页截图。

10.根据权利要求9所述的方法，其特征在于：

所述网页截图为base64图片格式。

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

基于客户端的打开网页请求，向所述客户端发送所述网页；

基于客户端的截图请求，向所述网页加载截图插件；

获取所述客户端的在所述截图插件中对所述网页的截图操作的截图操作信息；以及

基于所述截图操作信息生成截图图片。

12.根据权利要求11所述的方法，其特征在于，还包括：

向所述客户端发送所述截图图片。

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

获取模块，配置用于获取用户对所述网页的截图操作的截图操作信息；

创建模块，配置用于基于打开所述网页的浏览器支持超文本标记语言的画布元素，创建所述网页的画布；

生成模块，配置用于在所述画布上生成与所述截图操作信息对应的网页截图。

14.根据权利要求13所述的装置，其特征在于，所述获取模块包括：

类别获取单元，配置用于获取所述截图操作的动作类别信息；

位置获取单元，配置用于获取所述截图操作的位置信息，所述位置信息包括所述截图操作的起始位置和/或终止位置；以及

存储单元，配置用于存储所述截图操作的动作类别信息和位置信息。

15.根据权利要求14所述的装置，其特征在于，所述截图操作的动作类别信息包括以下至少一项：

手指、鼠标和/或触摸笔的点击、移动、以及抬起；以及

键盘中指定按键的按下和/或抬起。

16.根据权利要求15所述的装置，其特征在于，所述创建模块包括以下任意一项：

第一创建单元，配置用于基于所述网页的文档对象结构，创建所述网页的画布；以及

第二创建单元，配置用于基于所述截图操作的动作类别信息和位置信息，创建与所述截图操作对应的画布。

17.根据权利要求16所述的装置，其特征在于，所述第二创建单元进一步配置用于：

基于所述截图操作的位置信息确定所述画布的起始位置和终止位置；以及

基于所述画布的起始位置和终止位置创建画布；

其中，所述画布的范围覆盖所述截图操作的截图区域。

18.根据权利要求14所述的装置，其特征在于，所述获取模块进一步配置用于：

基于所述截图操作的位置信息生成与所述截图操作信息对应的操作效果。

19.根据权利要求18所述的装置，其特征在于，所述操作效果包括以下至少一项：

截图区域选定、截图区域取消、截图区域缩小以及截图区域扩大。

20.根据权利要求16所述的装置，其特征在于，所述装置还包括：

预览模块，配置用于在所述生成模块在所述画布上生成与所述截图操作对应的网页截图之前，在所述画布上加载与所述截图操作对应的网页截图效果预览。

21.根据权利要求20所述的装置，其特征在于，所述生成模块包括以下至少一项：

第一生成单元，配置用于在所述画布上生成与所述网页截图效果预览对应的网页截图；以及

第二生成单元，配置用于将所述截图操作信息上传至提供所述网页的服务器，并获取与所述截图操作信息对应的网页截图。

22.根据权利要求21所述的装置，其特征在于：

所述网页截图为base64图片格式。

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

第一加载模块，配置用于基于客户端的打开网页请求，向所述客户端加载所述网页；

第二加载模块，配置用于基于客户端的截图请求，向所述网页加载截图插件；

获取模块，配置用于获取所述客户端的在所述截图插件中对所述网页的截图操作的截图操作信息；以及

生成模块，配置用于基于所述截图操作信息生成截图图片。

24.根据权利要求23所述的装置，其特征在于，还包括：

发送模块，配置用于向所述客户端发送所述截图图片。