CN103577187A - 一种实现网页截图的方法及相关设备 - Google Patents

Abstract

本发明公开了一种实现网页截图的方法及相关设备，该方法包括在终端侧执行的如下过程：在浏览器中嵌入截屏插件，当用户通过浏览器打开任一网页并启动该截屏插件时，对所述网页进行截图；以及在某个网页中嵌入截屏插件，当用户打开所述网页并启动其上的截屏插件时，对所述网页进行截图。本发明通过在用户侧生成网页截图，保证了用户体验的一致性，并且本发明不需要安装任何控件，即可实现网页中的截图，提高了用户的易用性。

Description

一种实现网页截图的方法及相关设备

技术领域

本发明涉及网络技术领域，尤其涉及一种网页截图的方法及相关设备。

背景技术

随着3G/4G在全球的部署，智能终端技术的不断发展，推动了移动互联网的发展大潮，在这波大潮中，互联网厂家、终端厂家凭着对传统互联网应用及终端资源的掌控，并凭借其创新能力，纷纷结合自己的优点推出丰富的应用。

此外，终端、用户体验和网络技术融合，已成为被业界证实的必然趋势。目前的终端侧在进行网页截图时通常是通过以下方法实现的：1、通过在操作***中安装ActiveX或Applet控件来实现，用户体验较差；2、通过终端触发后台截图***在服务器侧打开浏览器来实现截图，但是后台截图***由于无法获取用户会话，对于用户登录后的页面，不能正常处理，只能获取到用户登录前的页面截图；3、通过在终端上调用专门的客户端截屏软件来实现截图，而客户端截屏软件一般是通过***调用来实现截图且只能将截图存放在本地，不具备与服务器交互的功能。

发明内容

本发明要解决的技术问题是，提供一种实现网页截图的方法及相关设备，在无需安装或客户端截屏软件或者相关控件的情况下，实现网页画面的截图。

本发明采用的技术方案是，所述实现网页截图的方法，包括在终端侧执行的如下过程：

在浏览器中或者网页中嵌入截屏插件；

当用户打开网页并启动该截屏插件时，对所述网页进行截图。

进一步的，在终端侧为用户提供打开网页的方式包括：通过浏览器打开所述网页或者直接打开所述网页。

进一步的，当在浏览器中嵌入截屏插件时，在浏览器的工具栏中显示截屏插件的启动图标，供用户使用；

当在网页中嵌入截屏插件时，在该网页的任意位置显示截屏插件的启动图标，供用户使用；

所述截屏插件的编写形式包括网页脚本。

进一步的，作为一种可选的技术方案，在终端侧执行的过程还包括：

在本地为该用户保存所述网页的截图；和/或，

将该用户的信息与所述网页的截图一并上传到服务器侧。

进一步的，作为一种优选的技术方案，在终端侧执行的过程还包括：

在本地为该用户保存所述网页的地址及所述网页的截图；和/或，

将该用户的信息、所述网页的地址与所述网页的截图一并上传到服务器侧。

进一步的，所述将该用户的信息、所述网页的地址与所述网页的截图一并上传到服务器侧，具体包括：

对所述网页的截图进行编码；

对该用户的信息、所述网页的地址、以及所述网页的截图的有效性分别进行验证；

当验证结果为全部有效时，将该用户的信息、所述网页的地址与编码后的网页截图一并上传给服务器侧。

进一步的，当终端侧将用户的信息、网页的地址及网页的截图一并上传到服务器侧时，所述方法还包括在服务器侧执行的如下过程：

接收终端侧上传的用户的信息、网页的地址与所述网页的截图；

对接收到的所述网页的截图进行解码；

将该用户的信息、所述网页的地址与解码后的网页截图进行对应保存。

本发明还提供一种实现网页截图的终端，所述终端在浏览器中或者在网页中嵌入截屏插件，该截屏插件包括：

截屏模块，用于当用户打开网页并启动该截屏插件时，对所述网页进行截图。

进一步的，该终端为用户提供打开网页的方式包括：通过浏览器打开所述网页或者直接打开所述网页。

进一步的，该终端还包括：

插件图标显示模块，用于当在浏览器中嵌入截屏插件时，在浏览器的工具栏中显示截屏插件的启动图标，供用户使用；当在网页中嵌入截屏插件时，在该网页的任意位置显示截屏插件的启动图标，供用户使用；

所述截屏插件的编写形式包括网页脚本。

进一步的，作为一种可选的技术方案，所述截屏插件还具体包括：

本地存储模块，用于在本地为该用户保存所述网页的截图；和/或，

上传模块，用于将该用户的信息与所述网页的截图一并上传到服务器侧。

进一步的，作为一种优选的技术方案，所述截屏插件还具体包括：

本地存储模块，用于在本地为该用户保存所述网页的地址及所述网页的截图；和/或，

上传模块，用于将该用户的信息、所述网页的地址与所述网页的截图一并上传到服务器侧。

进一步的，所述上传模块，具体包括：

编码模块，用于对所述网页的截图进行编码；

有效性验证模块，用于对该用户的信息、所述网页的地址、以及所述网页的截图的有效性分别进行验证；

发送模块，用于当验证结果为全部有效时，将该用户的信息、所述网页的地址与编码后的网页截图一并上传给服务器侧。

本发明还一种配合上述终端工作以实现网页截图的服务器，该服务器包括：

接收模块，用于接收终端侧上传的用户的信息、网页的地址与所述网页的截图；

解码模块，用于对接收到的所述网页的截图进行解码；

保存模块，用于将该用户的信息、所述网页的地址与解码后的网页截图进行对应保存。

采用上述技术方案，本发明至少具有下列优点：

本发明所述实现网页截图的方法及相关设备，与现有的网页截图控件相比，本发明的截图操作由网页脚本实现，不需要用户安装任何控件，例如：ActiveX或Applet。本发明与现有的后台截图***相比区别在于：本发明无需在服务器侧打开浏览器来实现截图，且对于需要用户登录会话的页面能够正确处理，而后台截图***由于无法获取用户会话，对于用户登录后的页面也不能正常处理，只能获取到用户登录前的页面截图。本发明与客户端截屏软件的区别在于：本发明提供了一种截图插件，而无需客户端软件自带截屏程序；本发明截图完成后还可以对截图进行编码上传等处理，而不局限与将截图存放在本地；另外本发明通过截图插件来实现对网页截图，而不用向客户端软件自带的截屏程序那样通过***调用来实现截图。

附图说明

图1为本发明第一实施例的实现网页截图的方法流程图；

图2为本发明第三实施例的实现网页截图的终端组成示意图；

图3为本发明第四实施例实现网页截图的服务器组成示意图；

图4为本发明应用实例的实现网页截图的方法流程图；

图5为图4中的步骤S110的具体流程图；

图6为图4中的步骤S120的具体流程图；

图7为图4中的步骤S130的具体流程图；

图8为本发明应用实例的实现网页截图的***组成示意图；

图9为图8中的终端应用单元210的具体组成示意图；

图10为图8中的服务器侧控制单元220的具体组成示意图。

具体实施方式

为更进一步阐述本发明为达成预定目的所采取的技术手段及功效，以下结合附图及较佳实施例，对本发明进行详细说明如后。

本发明第一实施例，一种实现网页截图的方法，包括在终端侧以及在服务器侧执行的过程，其中，如图1所示，在终端侧执行的过程如下：

步骤S101，在浏览器中嵌入截屏插件。

具体的，当在浏览器中嵌入截屏插件时，在浏览器的工具栏中显示截屏插件的启动图标，供用户使用。

步骤S102，当用户通过浏览器打开任一网页并启动该截屏插件时，对所述网页进行截图。

与此同时，在终端侧执行的过程还可以包括步骤S103和步骤S104，但是步骤S103和步骤S104与步骤S101和步骤S102是并列描述的插件的两种嵌入情况，不区分时间上的先后顺序。

步骤S103，在某个网页中嵌入截屏插件。

具体的，当在网页中嵌入截屏插件时，在该网页的任意位置显示截屏插件的启动图标，供用户使用。该截屏插件的编写形式可以为网页脚本，比如：javascript网页脚本，该网页脚本可以直接嵌入网页的HTML（Hyper Text Mark-upLanguage，超文本标记语言）代码中，也可以根据网页的不同代码编写相应的网页脚本，以实现对不同网页的嵌入。

步骤S104，当用户打开所述网页并启动其上的截屏插件时，对所述网页进行截图。

除了上述单纯在终端侧实现的截图方案之外，优选的，本实施例还扩展一个终端侧与服务器侧交互的方案，延续上述步骤S101～S102或者步骤S103～104，在终端侧执行的过程还包括：

步骤S105，在本地为该用户保存所述网页的截图；和/或，将该用户的信息与所述网页的截图一并上传到服务器侧。

若对步骤S105进行优化，可以加上对网页地址的保存，具体的，在本地为该用户保存所述网页的地址及所述网页的截图；和/或，将该用户的信息、所述网页的地址与所述网页的截图一并上传到服务器侧。

进一步的，所述将该用户的信息、所述网页的地址与所述网页的截图一并上传到服务器侧，具体包括如下过程：

A1：对所述网页的截图进行编码。

A2：对该用户的信息、所述网页的地址、以及所述网页的截图的有效性分别进行验证。由于浏览器中存储有该用户的相关会话信息，从中可以判断该用户是否已登录，而验证用户信息的有效性时，可以做如下设置：已登录的用户信息为有效用户，未登录的用户信息为无效用户；在验证网页地址的有效性时，可以通过判断用户输入的网页路径，比如URL（Uniform Resource Locator，统一资源定位符），是否符合标准的格式等；在验证网页截图的有效性时，可以通过判断截图文件的大小是否符合要求，或者判断网页截图是否编码成功来确定其有效性。对于与上述三种信息，本发明也不排除有其他的有效性验证方式。

A3：当验证结果为全部有效时，将该用户的信息、所述网页的地址与编码后的网页截图一并上传给服务器侧。

进一步的，当步骤S105中包含：将该用户的信息与所述网页的截图一并上传到服务器侧的内容时，所述实现网页截图的方法还包括在服务器侧执行的如下过程：

步骤S106，服务器侧接收终端侧上传的用户的信息与所述网页的截图，对接收到的所述网页的截图进行解码，将该用户的信息与解码后的网页截图进行对应保存。

具体的，若针对优化后的步骤S105，步骤S106中的内容相应的为：接收终端侧上传的用户的信息、网页的地址与所述网页的截图，对接收到的所述网页的截图进行解码，将该用户的信息、所述网页的地址与解码后的网页截图进行对应保存。

本发明第二实施例，一种实现网页截图的终端，在浏览器中嵌入截屏插件，该截屏插件包括：

截屏模块，用于当用户通过浏览器打开任一网页并启动该截屏插件时，对所述网页进行截图。

具体的，当在浏览器中嵌入截屏插件时，在浏览器的工具栏中显示截屏插件的启动图标，供用户使用。

可选的，该终端在网页中也嵌入截屏插件，那么截屏模块还用于当用户打开所述网页并启动其上的截屏插件时，对所述网页进行截图。

具体的，当在网页中嵌入截屏插件时，在该网页的任意位置显示截屏插件的启动图标，供用户使用。该截屏插件的编写形式可以为网页脚本，比如：javascript网页脚本，该网页脚本可以直接嵌入网页的HTML代码中，也可以根据网页的不同代码编写相应的网页脚本，以实现对不同网页的嵌入。

本发明第三实施例，一种实现网页截图的终端，如图2所示，与第二实施例的区别在于，本实施例的截屏插件10除了包含截屏模块100之外，还包括：

本地存储模块200，用于在本地为该用户保存所述网页的截图；和/或，

上传模块300，用于将该用户的信息与所述网页的截图一并上传到服务器侧。

优选的，若对本地存储模块200和上传模块300的功能进行优化，可以加上对网页地址的保存，具体的，在该截屏插件中：

本地存储模块200，用于在本地为该用户保存所述网页的地址及所述网页的截图；和/或，

上传模块300，用于将该用户的信息、所述网页的地址与所述网页的截图一并上传到服务器侧。

进一步的，上传模块300，具体包括：

编码模块301，用于对所述网页的截图进行编码.

有效性验证模块302，用于对该用户的信息、所述网页的地址、以及所述网页的截图的有效性分别进行验证。由于浏览器中存储有该用户的相关会话信息，从中可以判断该用户是否已登录，而验证用户信息的有效性时，可以做如下设置：已登录的用户信息为有效用户，未登录的用户信息为无效用户；在验证网页地址的有效性时，可以通过判断用户输入的网页路径，比如URL，是否符合标准的格式等；在验证网页截图的有效性时，可以通过判断截图文件的大小是否符合要求，或者判断网页截图是否编码成功来确定其有效性。对于与上述三种信息，本发明也不排除有其他的有效性验证方式。

发送模块303，用于当验证结果为全部有效时，将该用户的信息、所述网页的地址与编码后的网页截图一并上传给服务器侧。

优选的，该终端还包括：

插件图标显示模块20，用于当在浏览器中嵌入截屏插件时，在浏览器的工具栏中显示截屏插件的启动图标，供用户使用；当在网页中嵌入截屏插件时，在该网页的任意位置显示截屏插件的启动图标，供用户使用。

本发明第四实施例，为了配合上述第三实施例的所述终端工作以实现网页截图，本实施例提供一种实现网页截图的服务器，如图3所示，该服务器包括：

接收模块500，用于接收终端侧上传的用户的信息、网页的地址与所述网页的截图；

解码模块600，用于对接收到的所述网页的截图进行解码；

保存模块700，用于将该用户的信息、所述网页的地址与解码后的网页截图进行对应保存。

本领域技术人员应该知道，本发明实施例中的截屏插件并不限于应用到特定网页或网页应用中，用户可以通过本发明实施例提供的截屏插件，包括但不限于浏览器插件或页面插件，实现对任意网页或网页应用的截图及上传处理。

本发明实施例的截屏插件作为浏览器插件时，包括但不限于工具栏式，作为优选实施例，本发明提供了一种浏览器插件工具栏的截图方式。用户可以将本发明提供的网页截图启动图标拖动到浏览器工具栏，用户用该浏览器打开所有的网页或网页应用，均可以使用浏览器工具栏中本发明提供的网页截图启动图标实现截图及后续处理。

本发明实施例的截屏插件作为页面插件时，在嵌入了页面插件代码的网页，会自动出现本发明提供的网页截图启动图标，用户可以点击该图标，实现对本网页的截图及后续处理。

本发明所述实现网页截图的方法及相关设备，与现有的网页截图控件相比，本发明的截图操作由网页脚本实现，不需要用户安装任何控件，例如：ActiveX或Applet。本发明与现有的后台截图***相比区别在于：本发明无需在服务器侧打开浏览器来实现截图，且对于需要用户登录会话的页面能够正确处理，而后台截图***由于无法获取用户会话，对于用户登录后的页面也不能正常处理，只能获取到用户登录前的页面截图。本发明与客户端截屏软件的区别在于：本发明提供了一种截图插件，而无需客户端软件自带截屏程序；本发明截图完成后还可以对截图进行编码上传等处理，而不局限与将截图存放在本地；另外本发明通过截图插件来实现对网页截图，而不用向客户端软件自带的截屏程序那样通过***调用来实现截图。

基于上述实施例，介绍本发明的一个应用实例，本应用实例提供的一种网页截图方法，应用在网络***中，如图4所示，该方法包括如下步骤：

步骤S110、在终端侧生成网页截图。

更为具体的，如图5所示，步骤S110包括如下过程：

S111：获取用户输入信息或打开的页面。在该步骤S111中，一般由终端应用从用户输入的URL信息或打开的Web页面获取信息。

S112：生成网页截图并对图片进行编码。在该步骤S112中，生成的网页截图，支持包括但不限于jpg、bmp、png、gif等图片格式；同时，对生成的网页截图进行编码，支持包括但不限于Base64编码。

S113：生成用户信息、网页地址及网页截图的对应关系。在该步骤S113中，将获取的用户信息、URL信息，网页截图信息等形成相互对应关系。

步骤S120、网页截图上传。

更为具体的，如图6所示，该步骤S120包括如下过程：

S121：图片上传预处理。在该步骤S121中，对获取的用户信息、URL信息、网页截图等的有效性进行验证。

S122：向服务器侧发起图片上传请求。在该步骤S122中，将获取的用户信息、URL信息、网页截图信息等作为参数向服务侧发起图片上传的请求。

步骤S130、服务器侧对网页截图进行处理。

更为具体的，如图7所示，该步骤S130包括如下过程：

S131：服务器侧对上传的编码图片进行解码。在该步骤S131中，服务器侧对经过编码的截图进行解码。

S132：服务器侧存储解码后图片，并保存用户信息、网页信息、以及网页截图的对应关系。在该步骤S132中，服务侧对已经解码的网页截图进行存储，包括但不限于数据库、硬盘等存储设备。

本应用实例还提供一种网页截图***，如图8所示，包括：

1）终端应用单元210，用于生成网页截图并上传。

更为具体的，如图9所示，终端应用单元210包括以下组成部分：

网页图片截取单元211，用于通过纯网页脚本对网页进行截取并生成图片；

图片编码单元212，用于对生成的图片进行编码；

终端侧接口单元213，用于建立与服务器侧的接口并上传图片。

2）服务器侧控制单元220，用于处理图片上传请求，并存储图片等信息。

更为具体的，如图10所示，服务器侧控制单元220包括以下组成部分：

服务器侧接口单元221，用于建立与终端侧的接口并传输响应消息；

图片解码单元222，用于对编码后图片进行解码处理；

存储服务单元223，用于对解码后的图片，以及用户信息、网页地址、图片的对应关系进行存储。

本发明提供的网页截图方法及相关设备，通过在用户侧生成网页截图，保证了用户体验的一致性，并且本发明不需要安装任何控件，即可实现网页中的截图，提高了用户的易用性。

通过具体实施方式的说明，应当可对本发明为达成预定目的所采取的技术手段及功效得以更加深入且具体的了解，然而所附图示仅是提供参考与说明之用，并非用来对本发明加以限制。

Claims (14)

1.一种实现网页截图的方法，其特征在于，包括在终端侧执行的如下过程：

在浏览器中或者网页中嵌入截屏插件；

当用户打开网页并启动该截屏插件时，对所述网页进行截图。

2.根据权利要求1所述的实现网页截图的方法，其特征在于，在终端侧为用户提供打开网页的方式包括：通过浏览器打开所述网页或者直接打开所述网页。

3.根据权利要求1或2所述的实现网页截图的方法，其特征在于，当在浏览器中嵌入截屏插件时，在浏览器的工具栏中显示截屏插件的启动图标，供用户使用；

当在网页中嵌入截屏插件时，在该网页的任意位置显示截屏插件的启动图标，供用户使用；

所述截屏插件的编写形式包括网页脚本。

4.根据权利要求1或2所述的实现网页截图的方法，其特征在于，在终端侧执行的过程还包括：

在本地为该用户保存所述网页的截图；和/或，

将该用户的信息与所述网页的截图一并上传到服务器侧。

5.根据权利要求1或2所述的实现网页截图的方法，其特征在于，在终端侧执行的过程还包括：

在本地为该用户保存所述网页的地址及所述网页的截图；和/或，

将该用户的信息、所述网页的地址与所述网页的截图一并上传到服务器侧。

6.根据权利要求5所述的实现网页截图的方法，其特征在于，所述将该用户的信息、所述网页的地址及所述网页的截图一并上传到服务器侧，具体包括：

对所述网页的截图进行编码；

对该用户的信息、所述网页的地址、以及所述网页的截图的有效性分别进行验证；

当验证结果为全部有效时，将该用户的信息、所述网页的地址与编码后的网页截图一并上传给服务器侧。

7.根据权利要求5所述的实现网页截图的方法，其特征在于，当终端侧将用户的信息、网页的地址及网页的截图一并上传到服务器侧时，所述方法还包括在服务器侧执行的如下过程：

接收终端侧上传的用户的信息、网页的地址与所述网页的截图；

对接收到的所述网页的截图进行解码；

将该用户的信息、所述网页的地址与解码后的网页截图进行对应保存。

8.一种实现网页截图的终端，其特征在于，所述终端在浏览器中或者在网页中嵌入截屏插件，该截屏插件包括：

截屏模块，用于当用户打开网页并启动该截屏插件时，对所述网页进行截图。

9.根据权利要求8所述的实现网页截图的终端，其特征在于，所述终端为用户提供打开网页的方式包括：通过浏览器打开所述网页或者直接打开所述网页。

10.根据权利要求8或9所述的实现网页截图的终端，其特征在于，所述终端还包括：

插件图标显示模块，用于当在浏览器中嵌入截屏插件时，在浏览器的工具栏中显示截屏插件的启动图标，供用户使用；当在网页中嵌入截屏插件时，在该网页的任意位置显示截屏插件的启动图标，供用户使用；

所述截屏插件的编写形式包括网页脚本。

11.根据权利要求8或9所述的实现网页截图的终端，其特征在于，所述截屏插件还具体包括：

本地存储模块，用于在本地为该用户保存所述网页的截图；和/或，

上传模块，用于将该用户的信息与所述网页的截图一并上传到服务器侧。

12.根据权利要求8或9所述的实现网页截图的终端，其特征在于，所述截屏插件还具体包括：

本地存储模块，用于在本地为该用户保存所述网页的地址及所述网页的截图；和/或，

上传模块，用于将该用户的信息、所述网页的地址与所述网页的截图一并上传到服务器侧。

13.根据权利要求12所述的实现网页截图的终端，其特征在于，所述上传模块，具体包括：

编码模块，用于对所述网页的截图进行编码；

有效性验证模块，用于对该用户的信息、所述网页的地址、以及所述网页的截图的有效性分别进行验证；

发送模块，用于当验证结果为全部有效时，将该用户的信息、所述网页的地址与编码后的网页截图一并上传给服务器侧。

14.一种实现网页截图的服务器，其特征在于，所述服务器包括：

接收模块，用于接收终端侧上传的用户的信息、网页的地址与所述网页的截图；

解码模块，用于对接收到的所述网页的截图进行解码；

保存模块，用于将该用户的信息、所述网页的地址与解码后的网页截图进行对应保存。

Images