网页截图方法和网页截图装置与流程

1.本发明涉及计算机技术领域，尤其涉及一种网页截图方法和网页截图装置。


背景技术：

2.随着前端开发技术的不断发展以及html5 canvas技术的不断普及，在浏览器端进行网页截图的需求也日益增多。目前在浏览器端进行图片裁剪的主要方式为利用canvas元素并结合其提供的todataurl方法，生成base64格式的截图。
3.在实现本发明过程中，发明人发现现有技术中至少存在如下问题：一、无法根据用户框选的范围进行图片截取，而只能根据固定的页面元素进行截取；二、无法直接在网页中截好图之后进行图片尺寸、标注等自定义操作。


技术实现要素：

4.有鉴于此，本发明实施例提供一种网页截图方法和网页截图装置，能够解决现有技术存在的在网页中无法实时根据用户的想法进行截图导致截图效果单一的问题，提高用户体验。
5.为实现上述目的，根据本发明实施例的第一方面，提供了一种网页截图方法。
6.本发明实施例的一种网页截图方法，包括：接收网页截图请求，创建待截图网页对应的指令画布，利用所述指令画布确定所述待截图网页对应的待截图区域；基于画布插件生成所述待截图网页对应的网页画布元素，创建裁剪后的画布元素；利用所述裁剪后的画布元素，按照所述待截图区域对所述网页画布元素进行裁剪处理，生成网页截图图片。
7.可选地，所述创建待截图网页对应的指令画布，利用所述指令画布确定所述待截图网页对应的待截图区域，包括：获取所述待截图网页，利用脚本语言创建所述待截图网页对应的指令画布，设置所述指令画布的坐标轴，其中，所述指令画布覆盖所述待截图网页，且所述指令画布的尺寸与所述待截图网页的尺寸相同；利用所述指令画布监听截图操作事件，根据所述截图操作事件和所述指令画布的坐标轴，确定所述待截图网页对应的待截图区域。
8.可选地，在确定所述待截图网页对应的待截图区域之后，所述方法还包括：显示标注工具栏，通过所述标注工具栏获取标注数据。
9.可选地，在显示标注工具栏之前，所述方法还包括：判断所述网页截图请求中是否包括标注请求，若是，则显示所述标注工具栏。
10.可选地，在利用所述指令画布确定所述待截图网页对应的待截图区域之后，所述方法还包括：释放所述指令画布和所述待截图区域。
11.可选地，所述基于画布插件生成所述待截图网页对应的网页画布元素，创建裁剪后的画布元素，包括：基于html2canvas插件将所述待截图网页下的节点转换为待截图canvas元素；利用脚本语言创建裁剪后的canvas元素。
12.可选地，所述利用所述裁剪后的画布元素，按照所述待截图区域对所述网页画布
元素进行裁剪处理，生成网页截图图片，包括：利用所述裁剪后的canvas元素调用裁剪语句，按照所述待截图区域对所述待截图canvas元素进行裁剪处理，获得最终裁剪后的canvas元素；利用所述最终裁剪后的canvas元素调用图片生成语句，生成所述最终裁剪后的canvas元素对应的网页截图图片。
13.可选地，在生成网页截图图片之后，所述方法还包括：根据所述标注数据对所述网页截图图片进行标注处理。
14.为实现上述目的，根据本发明实施例的第二方面，提供了一种网页截图装置。
15.本发明实施例的一种网页截图装置，包括：确定模块，用于接收网页截图请求，创建待截图网页对应的指令画布，利用所述指令画布确定所述待截图网页对应的待截图区域；生成模块，用于基于画布插件生成所述待截图网页对应的网页画布元素，创建裁剪后的画布元素；裁剪模块，用于利用所述裁剪后的画布元素，按照所述待截图区域对所述网页画布元素进行裁剪处理，生成网页截图图片。
16.可选地，所述确定模块还用于：获取所述待截图网页，利用脚本语言创建所述待截图网页对应的指令画布，设置所述指令画布的坐标轴，其中，所述指令画布覆盖所述待截图网页，且所述指令画布的尺寸与所述待截图网页的尺寸相同；利用所述指令画布监听截图操作事件，根据所述截图操作事件和所述指令画布的坐标轴，确定所述待截图网页对应的待截图区域。
17.可选地，所述装置还包括：标注模块，用于显示标注工具栏，通过所述标注工具栏获取标注数据。
18.可选地，所述标注模块还用于：判断所述网页截图请求中是否包括标注请求，若是，则显示所述标注工具栏。
19.可选地，所述确定模块还用于：释放所述指令画布和所述待截图区域。
20.可选地，所述生成模块还用于：基于html2canvas插件将所述待截图网页下的节点转换为待截图canvas元素；利用脚本语言创建裁剪后的canvas元素。
21.可选地，所述裁剪模块还用于：利用所述裁剪后的canvas元素调用裁剪语句，按照所述待截图区域对所述待截图canvas元素进行裁剪处理，获得最终裁剪后的canvas元素；利用所述最终裁剪后的canvas元素调用图片生成语句，生成所述最终裁剪后的canvas元素对应的网页截图图片。
22.可选地，所述标注模块还用于：根据所述标注数据对所述网页截图图片进行标注处理。
23.为实现上述目的，根据本发明实施例的第三方面，提供了一种电子设备。
24.本发明实施例的一种电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现本发明实施例的网页截图方法。
25.为实现上述目的，根据本发明实施例的第四方面，提供了一种计算机可读介质。
26.本发明实施例的一种计算机可读介质，其上存储有计算机程序，程序被处理器执行时实现本发明实施例的网页截图方法。
27.上述发明中的一个实施例具有如下优点或有益效果：本发明实施例的网页截图技术方案，首先创建待截图网页对应的指令画布，然后可以利用创建的指令画布确定待截图
区域，在获取到待截图区域后，直接按照待截图区域对待截图网页对应的网页画布元素进行裁剪处理，最后可以生成网页截图图片，能够解决现有技术存在的在网页中无法实时根据用户的想法进行截图导致截图效果单一的问题，提高用户体验。
28.上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
29.附图用于更好地理解本发明，不构成对本发明的不当限定。其中：
30.图1是根据本发明实施例的网页截图方法的主要步骤的示意图；
31.图2是根据本发明实施例的确定待截图区域的方法的主要流程的示意图；
32.图3是根据本发明实施例的网页截图方法的主要流程的示意图；
33.图4是根据本发明实施例的网页截图装置的主要模块的示意图；
34.图5是本发明实施例可以应用于其中的示例性系统架构图；
35.图6是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。
具体实施方式
36.以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
37.现有技术中，在浏览器端进行图片裁剪的主要流程可以为：在浏览器页面创建canvas元素，然后利用canvas内置方法todataurl，在canvas中绘制并转换需要截取的页面元素，最后生成base64格式的截图。其中，canvas是指html5(即，超文本标记语言的最新修订版本)新增的组件，可以用javascript(即，一种直译式脚本语言)在上面绘制各种图表、动画等；html5 canvas技术是指使用javascript在网页上绘制平面图像；todataurl是canvas中将图片的二进制格式转为base64格式的方法；dataurl是将数据按base64进行编码，并在前面声明数据类型的一种数据结构；base64格式是一种用于传输8字节代码的编码方式。
38.但是，目前在浏览器端进行图片裁剪的方法只能将某一个固定的页面中的元素转换成base64图片，无法根据用户框选的范围进行图片截取，而是只能根据固定的页面元素进行截取，并且无法直接在网页中截好图之后进行图片尺寸、标注等自定义操作。为了解决上述问题，本发明实施例提供一种网页截图方法，能够解决在网页中无法实时根据用户的想法进行截图导致截图效果单一的问题，提高用户体验。图1是根据本发明实施例的网页截图方法的主要步骤的示意图。如图1所示，网页截图方法的主要步骤可以包括：
39.步骤s101，接收网页截图请求，创建待截图网页对应的指令画布，利用指令画布确定待截图网页对应的待截图区域；
40.步骤s102，基于画布插件生成待截图网页对应的网页画布元素，创建裁剪后的画布元素；
41.步骤s103，利用裁剪后的画布元素，按照待截图区域对网页画布元素进行裁剪处理，生成网页截图图片。
42.本发明实施例的网页截图方法中，客户端接收到网页截图请求，比如用户需要对某网页进行截图，该网页的工具栏中有截图按钮，在用户点击截图按钮后，客户端可以接收到网页截图请求，该网页为待截图网页，比如电子图书平台中的某新闻，用户从该新闻中截取需要的内容。可以看出，客户端接收到网页截图请求后，可以直接确定需要截图的网页，然后创建该网页对应的指令画布。其中，指令画布用于确定待裁剪区域，需要注意的是，创建的指令画布是用户看不见的，是指待裁剪网页的可视区域，将指令画布呈现给用户，告知用户需要裁剪的区域是这个指令画布中的内容。因此，在创建指令画布后，可以利用创建的指令画布确定待截图网页对应的待截图区域。
43.步骤s102是基于画布插件生成待截图网页对应的网页画布元素。其中，画布插件可以为html2canvas(即，利用javascript进行屏幕截图的插件)，利用html2canvas能够将待截图网页转换为网页画布元素，这样才可以对转换的网页画布元素进行裁剪。此外，还需要创建裁剪后的画布元素，创建的裁剪后的画布元素相当于是一个容器，用于承载待截图区域对应的画布元素。
44.步骤s101用于确定待裁剪区域，步骤s102用于生成待截图网页对应的网页画布元素，以及创建用于承载待截图区域对应的画布元素，所以在步骤s103中，按照待截图区域对网页画布元素进行裁剪处理，获取待截图区域对应的画布元素，然后可以利用创建的裁剪后的画布元素承载通过裁剪获取的画布元素，最后可以生成网页截图图片。
45.本发明实施例的网页截图技术方案，首先创建待截图网页对应的指令画布，然后可以利用创建的指令画布确定待截图区域，在获取到待截图区域后，直接按照待截图区域对待截图网页对应的网页画布元素进行裁剪处理，最后可以生成网页截图图片，能够解决现有技术存在的在网页中无法实时根据用户的想法进行截图导致截图效果单一的问题，提高用户体验。
46.现有技术的网页截图方法中，不能根据用户的想法进行截图，只能将某一个固定的页面中的元素转换为图片，也就是说现有技术中不能获取用户期望截取的待截图区域，而本发明实施例的网页截图方法中，可以利用指令画布确定待截图区域。作为本发明的可参考实施例，创建待截图网页对应的指令画布，利用指令画布确定待截图网页对应的待截图区域，可以包括：获取待截图网页，利用脚本语言创建待截图网页对应的指令画布，设置指令画布的坐标轴；利用指令画布监听截图操作事件，根据截图操作事件和指令画布的坐标轴，确认待截图网页对应的待截图区域。其中，指令画布覆盖待截图网页，且指令画布的尺寸与待截图网页的尺寸相同。
47.本案方面实施例中，指令画布可以是canvas元素，创建指令画布可以是利用脚本语言，如javascript，在需要进行截图的网页中创建canvas元素。需要注意的是，此处创建的canvas元素相当于是一张全屏的canvas元素，也就是说创建的canvas元素的宽高必须和待截图网页的宽高是一样的，并且创建的canvas元素是透明的，即用户不可见的，利用这个创建的canvas元素进行待截图区域的选取。还需要注意的是，指令画布覆盖在待截图网页，也就是创建的canvas元素覆盖待截图网页。此外，为了获取到用户期望截图的区域，在创建指令画布后，可以设置该指令画布的坐标轴，然后借助坐标轴确定用户期望截图区域的坐
标，即设置指令画布的全局x、y变量。
48.在创建指令画布以及设置指令画布的坐标轴之后，可以利用指令画布监听截图操作事件，然后根据截图操作事件和指令画布的坐标轴，确定待截图网页对应的待截图区域。本发明实施例中，截图操作事件可以包括：鼠标点击按下事件、鼠标移动事件和鼠标松手事件。其中，鼠标点击按下事件可以用于监听待截图区域的开始，当指令画布监听到鼠标点击按下，则说明用户开始进行自定义截图；鼠标移动事件可以用于监听待截图区域的形状轨迹，根据形状轨迹则可以绘制出待截图区域；鼠标松手事件可以用于监听待截图区域的结束，则说明用户结束自定义截图，这样就可以得到待截图区域。接下来，以待截图区域为矩形为例，详细说明确定待截图区域的方法。
49.(1)利用指令画布监听鼠标点击按下事件。借助设置的全局x和y变量保存用户第一次点击时的坐标，记录x和y轴的坐标用于绘制矩形颜色框，然后可以进行矩形绘制。
50.(2)利用指令画布监听鼠标移动事件。结合设置的全局x和y变量实时计算待裁剪区域的宽度width和高度height，进行矩形绘制。具体的，可以用程序语言表示为：context.strokerect(x,y,width,height)，参数如表1所示。
51.参数描述x矩形左上角的x坐标y矩形左上角的y坐标width矩形的宽度，以像素计height矩形的高度，以像素计
52.表1
53.(3)利用指令画布监听鼠标松手事件。指令画布可以一直重复计算待裁剪区域的宽度和高度，直至监听到鼠标松手事件。在监听到鼠标松手事件之后，相当于是获取到待截图区域的结束坐标，也就是说利用指令画布可以获取到待截图区域的开始坐标、移动轨迹和结束坐标，这样就可以确定待截图区域。
54.本发明的可参考实施例中，在确定待截图网页对应的待截图区域之后，网页截图方法还可以包括：显示标注工具栏，通过标注工具栏获取标注数据。现有技术中，无法直接在网页中截好图之后进行图片尺寸、标注等自定义操作，为了解决这个问题，本发明实施例中在确定待截图区域后，可以显示标注工具栏，利用标注工具栏获取到用户期望进行的标注数据，标注数据可以包括标注类型、尺寸标注、颜色标注等。
55.值得注意的是，如果不需要进行标注，可以直接点击标注工具栏中的确认。或者是，本发明实施例中的网页截图请求中可以直接包括标注请求。因此，在显示标注工具栏之前，网页截图方法可以包括：判断网页截图请求中是否包括标注请求。如果包括，则在利用指令画布确定待截图区域之后，可以显示标注工具栏，从而可以利用标注工具栏获取标注数据。如果不包括，则在利用指令画布确定待截图区域之后，不显示标注工具栏。
56.此外，本发明的可参考实施例中，在利用指令画布确定待截图网页对应的待截图区域之后，网页截图方法还可以包括：释放指令画布和待截图区域。需要强调，创建的指令画布是用户不可见的，但是利用指令画布确定的待截图区域是用户可见的，在确定好待截图区域之后，需要删除页面上显示的待截图区域的选择框，还需要释放创建的指令画布，这样做的原因是在确定待截图区域后，可以将待截图区域传输至客户端，释放指令画布和待
截图区域可以释放内存，减少内存占有率。
57.图2是根据本发明实施例的确定待截图区域的方法的主要流程的示意图。如图2所示，确定待截图区域的方法的主要流程可以包括：
58.步骤s201，获取待截图网页，利用脚本语言创建待截图网页对应的指令画布，设置指令画布的坐标轴，其中，指令画布覆盖待截图网页，且指令画布的尺寸与待截图网页的尺寸相同；
59.步骤s202，利用指令画布监听截图操作事件；
60.步骤s203，根据截图操作事件和指令画布的坐标轴，确定待截图网页对应的待截图区域；
61.步骤s204，判断网页截图请求中是否包括标注请求，若是，则执行步骤s205，若否，则执行步骤s206；
62.步骤s205，显示标注工具栏，通过标注工具栏获取标注数据；
63.步骤s206，释放指令画布和待截图区域。
64.本发明实施例的确定待截图区域的技术方案，首先创建待截图网页对应的指令画布，然后可以利用创建的指令画布确定待截图区域，能够解决现有技术存在的在网页中无法实时根据用户的想法进行截图、以及自定义图片尺寸导致截图效果单一的问题。还有，可以通过标注请求显示标注工具栏，进而获取到标注数据，能够解决现有技术无法直接在网页中截好图之后进行图片尺寸、标注等自定义操作的问题，满足用户需求，提高用户体验。
65.本发明的可参考实施例中，基于画布插件生成待截图网页对应的网页画布元素，创建裁剪后的画布元素，可以包括：基于html2canvas插件将待截图网页下的节点转换为待截图canvas元素；利用脚本语言创建裁剪后的canvas元素。
66.具体的，可以利用html2canvas插件将待截图网页下的所有节点进行转换为canvas元素，为了方便理解，将此处的canvas元素命名为待截图canvas元素，实现语言可以为：
67.html2canvas(document.body,{}).then(clipcanvasdom＝>{})
68.此外，还需要利用脚本语言创建裁剪后的canvas元素，该裁剪后的canvas元素相当于是一个容器，用于承载待截图区域对应的画布元素，具体实现语言可以为：
69.var clipcanvasdom＝document.createelement(
‘
canvas’)。
70.本发明的可参考实施例中，利用裁剪后的画布元素，按照待截图区域对网页画布元素进行裁剪处理，生成网页截图图片，可以包括：利用裁剪后的canvas元素调用裁剪语句，按照待截图区域对待截图canvas元素进行裁剪处理，获得最终裁剪后的canvas元素；利用最终裁剪后的canvas元素调用图片生成语句，生成最终裁剪后的canvas元素对应的网页截图图片。
71.具体的，利用裁减后canvas元素调用canvas.getcontext(
‘
2d’).dra wimage方法，按照待截图区域对待截图canvas元素进行裁剪处理进行裁剪处理，获得最终裁剪后的canvas元素。具体的调用参数可以为：c lipcanvas.drawimage(clipcanvasdom，startx，starty，areawidth，area height，0，0，areawidth，areaheight)。其中，drawimage参数说明con text.drawimage(img,sx,sy,swidth,sheight,x,y,width,height)如表2所示。
[0072][0073][0074]
表2
[0075]
然后，利用得到的最终裁剪后的canvas元素调用图片生成语句，比如todataurl方法，生成网页截图图片。需要注意的是，最终生成的是base64格式的图片，用户可以自定义上传或者下载到本地。
[0076]
在网页截图请求可以包括标注请求的情况下，可以通过标注工具栏获取到标注数据，这样在生成网页截图图片之后，可以利用标注数据对网页截图图片进行标注处理。所以，本发明的可参考实施例中，在生成网页截图图片之后，网页截图方法还可以包括：根据标注数据对网页截图图片进行标注处理。标注工具栏可以通过document.createel ement('div')；document.body.appendchild(div)把工具栏元素渲染到页面中，工具栏可以通过脚本语言实现，可以选择方框、箭头、圆框来进行标注，比如，如果是选择方框进行标注，将绘制矩形标记线框。
[0077]
图3是根据本发明实施例的网页截图方法的主要流程的示意图。如图3所示，网页截图方法的主要流程可以包括：
[0078]
步骤s301，接收网页截图请求，获取待截图网页，利用脚本语言创建待截图网页对应的指令画布，设置指令画布的坐标轴，其中，指令画布覆盖待截图网页，且指令画布的尺寸与待截图网页的尺寸相同；
[0079]
步骤s302，利用指令画布监听截图操作事件；
[0080]
步骤s303，根据截图操作事件和指令画布的坐标轴，确定待截图网页对应的待截图区域；
[0081]
步骤s304，判断网页截图请求中是否包括标注请求，若是，则执行步骤s305，若否，则执行步骤s306；
[0082]
步骤s305，显示标注工具栏，通过标注工具栏获取标注数据；
[0083]
步骤s306，释放指令画布和待截图区域；
[0084]
步骤s307，基于html2canvas插件将待截图网页下的节点转换为待截图canvas元
素；
[0085]
步骤s308，利用脚本语言创建裁剪后的canvas元素；
[0086]
步骤s309，利用裁剪后的canvas元素调用裁剪语句，按照待截图区域对待截图canvas元素进行裁剪处理，获得最终裁剪后的canvas元素；
[0087]
步骤s310，利用最终裁剪后的canvas元素调用图片生成语句，生成最终裁剪后的canvas元素对应的网页截图图片；
[0088]
步骤s311，根据标注数据对网页截图图片进行标注处理。
[0089]
需要注意的是，如果网页截图请求中不包括标注请求，则说明生成网页截图图片之后，不需要利用标注数据进行标注处理。此种情况下，不执行步骤s311。
[0090]
本发明实施例的网页截图技术方案，首先创建待截图网页对应的指令画布，然后可以利用创建的指令画布确定待截图区域，在获取到待截图区域后，直接按照待截图区域对待截图网页对应的网页画布元素进行裁剪处理，最后可以生成网页截图图片，能够解决现有技术存在的在网页中无法实时根据用户的想法进行截图导致截图效果单一的问题，提高用户体验。
[0091]
图4是根据本发明实施例的网页截图装置的主要模块的示意图。如图4所示，网页截图装置400的主要模块可以包括：确定模块401、生成模块402和裁剪模块403。
[0092]
其中，确定模块401可用于：接收网页截图请求，创建待截图网页对应的指令画布，利用指令画布确定待截图网页对应的待截图区域；生成模块402可用于：基于画布插件生成待截图网页对应的网页画布元素，创建裁剪后的画布元素；裁剪模块403可用于：利用裁剪后的画布元素，按照待截图区域对网页画布元素进行裁剪处理，生成网页截图图片。
[0093]
本发明实施例中，确定模块401还可用于：获取待截图网页，利用脚本语言创建待截图网页对应的指令画布，设置指令画布的坐标轴；利用指令画布监听截图操作事件，根据截图操作事件和指令画布的坐标轴，确认待截图网页对应的待截图区域。其中，创建的指令画布需要覆盖待截图网页，并且设置指令画布的尺寸与待截图网页的尺寸相同。
[0094]
本发明实施例中，网页截图装置400还可以包括：标注模块(图中未示出)。该标注模块可用于显示标注工具栏，通过标注工具栏获取标注数据。
[0095]
本发明实施例中，标注模块还可用于：判断网页截图请求中是否包括标注请求，若是，则显示标注工具栏。
[0096]
本发明实施例中，确定模块401还可用于：释放指令画布和待截图区域。
[0097]
本发明实施例中，生成模块402还可用于：基于html2canvas插件将待截图网页下的节点转换为待截图canvas元素；利用脚本语言创建裁剪后的canvas元素。
[0098]
本发明实施例中，裁剪模块403还可用于：利用裁剪后的canvas元素调用裁剪语句，按照待截图区域对待截图canvas元素进行裁剪处理，获得最终裁剪后的canvas元素；利用最终裁剪后的canvas元素调用图片生成语句，生成最终裁剪后的canvas元素对应的网页截图图片。
[0099]
本发明实施例中，标注模块还可用于：根据标注数据对网页截图图片进行标注处理。
[0100]
从以上描述可以看出，本发明实施例的网页截图装置，能够创建待截图网页对应的指令画布，然后可以利用创建的指令画布确定待截图区域，在获取到待截图区域后，直接
按照待截图区域对待截图网页对应的网页画布元素进行裁剪处理，最后可以生成网页截图图片，能够解决现有技术存在的在网页中无法实时根据用户的想法进行截图导致截图效果单一的问题，提高用户体验。
[0101]
图5示出了可以应用本发明实施例的网页截图方法或网页截图装置的示例性系统架构500。
[0102]
如图5所示，系统架构500可以包括终端设备501、502、503，网络504和服务器505。网络504用以在终端设备501、502、503和服务器505之间提供通信链路的介质。网络504可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
[0103]
用户可以使用终端设备501、502、503通过网络504与服务器505交互，以接收或发送消息等。终端设备501、502、503上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。
[0104]
终端设备501、502、503可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。
[0105]
服务器505可以是提供各种服务的服务器，例如对用户利用终端设备501、502、503所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理，并将处理结果(例如目标推送信息、产品信息
--
仅为示例)反馈给终端设备。
[0106]
需要说明的是，本发明实施例所提供的网页截图方法一般由服务器505执行，相应地，网页截图装置一般设置于服务器505中。
[0107]
应该理解，图5中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
[0108]
下面参考图6，其示出了适于用来实现本发明实施例的终端设备的计算机系统600的结构示意图。图6示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
[0109]
如图6所示，计算机系统600包括中央处理单元(cpu)601，其可以根据存储在只读存储器(rom)602中的程序或者从存储部分608加载到随机访问存储器(ram)603中的程序而执行各种适当的动作和处理。在ram 603中，还存储有系统600操作所需的各种程序和数据。cpu 601、rom 602以及ram 603通过总线604彼此相连。输入/输出(i/o)接口605也连接至总线604。
[0110]
以下部件连接至i/o接口605：包括键盘、鼠标等的输入部分606；包括诸如阴极射线管(crt)、液晶显示器(lcd)等以及扬声器等的输出部分607；包括硬盘等的存储部分608；以及包括诸如lan卡、调制解调器等的网络接口卡的通信部分609。通信部分609经由诸如因特网的网络执行通信处理。驱动器610也根据需要连接至i/o接口605。可拆卸介质611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器610上，以便于从其上读出的计算机程序根据需要被安装入存储部分608。
[0111]
特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分609从网络上被下载和安装，和/或从可
拆卸介质611被安装。在该计算机程序被中央处理单元(cpu)601执行时，执行本发明的系统中限定的上述功能。
[0112]
需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、rf等等，或者上述的任意合适的组合。
[0113]
附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
[0114]
描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括确定模块、生成模块和裁剪模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，确定模块还可以被描述为“接收网页截图请求，创建待截图网页对应的指令画布，利用指令画布确定待截图网页对应的待截图区域的模块”。
[0115]
作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：接收网页截图请求，创建待截图网页对应的指令画布，利用指令画布确定待截图网页对应的待截图区域；基于画布插件生成待截图网页对应的网页画布元素，创建裁剪后的画布元素；利用裁剪后的画布元素，按照待截图区域对网页画布元素进行裁剪处理，生成网页截图图片。
[0116]
根据本发明实施例的技术方案，首先创建待截图网页对应的指令画布，然后可以
利用创建的指令画布确定待截图区域，在获取到待截图区域后，直接按照待截图区域对待截图网页对应的网页画布元素进行裁剪处理，最后可以生成网页截图图片，能够解决现有技术存在的在网页中无法实时根据用户的想法进行截图导致截图效果单一的问题，提高用户体验。
[0117]
上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。