网页截图方法及系统技术方案

本发明专利技术提供一种网页截图方法及系统，所述方法包括：所述用户终端接收网页上的截图触发，获取在该网页的上指定的截图范围；所述用户终端判断所述截图范围内是否包含有可缩放矢量图层；当所述截图范围内包含有可缩放矢量图层时，所述用户终端根据所述指定的截图范围在该网页的位置及该网页的链接地址生成截图请求并发送至所述服务器；所述服务器获取所述截图请求，根据所述链接地址请求所述网页并进行渲染，截取渲染后网页中与所述截图范围对应区域的图片并发送给所述用户终端。如此，在所述用户终端无法完成对可缩放矢量图层的截图时，通过发送截图请求给服务器的方式由服务器代替所述用户终端完成截图。

Web page shooting method and system

The present invention provides a method and system for web page screenshot, the method includes: the user terminal receives the page screenshot trigger, access to the specified in the web page on the screenshot range; the user terminal judges the screenshot within whether it contains a zoom vector layer; when the range contains. Can zoom vector map, the user terminal according to the specified range in the screenshot the location of the page and the page link address generation screenshot request and send to the server; the server acquires the screenshot request according to the link address request the web page and rendering, rendering the corresponding interception with the screenshot range of pictures and is transmitted to the user terminal. Thus, when the user terminal can not complete a screenshot of the scalable vector layer, the server replaces the user terminal in the way of sending screenshots to the server to complete the screenshot.

【技术实现步骤摘要】
网页截图方法及系统
本专利技术涉及浏览器
，具体而言，涉及一种网页截图方法及系统。
技术介绍
随着HTML5标准的推广，网页所能展示的图像越来越丰富。现有技术的浏览器截图方法中，或通过ActiveX控件截图工具进行截图，存在操作系统兼容性差，开发成本高，容易被当做病毒等缺陷；或通过html2canvas采用JAVACRIPT进行截图，存在不支持可缩放矢量图，在3D图像z-index复杂时截取的图像缺失严重等缺陷。
技术实现思路
为了克服现有技术中的上述不足，本专利技术的目的在于提供一种网页截图方法，应用于与相互通信的用户终端及服务器，所述方法包括：所述用户终端接收网页上的截图触发，获取在该网页的上指定的截图范围；所述用户终端判断所述截图范围内是否包含有可缩放矢量图层；当所述截图范围内包含有可缩放矢量图层时，所述用户终端根据所述指定的截图范围在该网页的位置及该网页的链接地址生成截图请求；所述用户终端将所述截图请求发送至所述服务器；所述服务器获取所述截图请求，根据所述链接地址请求所述网页并进行渲染，截取渲染后网页中与所述截图范围对应区域的图片并发送给所述用户终端。进一步地，在上述方法中，所述服务器获取所述截图请求，根据所述链接地址请求所述网页并进行渲染，截取渲染后网页中与所述截图范围对应区域的图片并发送给所述用户终端的步骤，包括：接收所述用户终端发送的链接地址，根据所述链接地址请求所述网页，并通过该服务器上的浏览器渲染获得渲染后的网页；根据所述用户终端发送的所述截图范围，通过WebDriver截取所述渲染后网页中该截图范围对应区域的图片；将截取到的图片发送给所述用户终端。进一步地，在上述方法中，所述截图请求中还包括指定的截图格式；所述根据所述用户终端发送的所述截图范围，通过WebDriver截取所述渲染后网页中该截图范围对应区域的图片的步骤，包括：根据所述用户终端发送的所述截图范围，通过WebDriver截取所述渲染后网页中该截图范围对应区域以生成预设格式的图片。进一步地，在上述方法中，所述方法还包括：当所述截图范围内不包含有可缩放矢量图层时，所述用户终端通过应用程序编程接口调用convas函数对所述截图范围内的图像进行绘图以获得截图图片。进一步地，在上述方法中，所述用户终端接收网页上的截图触发，获取指定在该网页的上指定的截图范围的步骤，包括：在待截图的网页上绘制一定位方式为绝对定位的显示层；通过JAVASCRIPT在该显示层上生成大小可调整的截图框，获取对所述截图框的操作以确定所述截图范围，记录所述截图范围在所述显示层上的位置及大小。进一步地，在上述方法中，所述用户终端判断所述截图范围内是否包含有可缩放矢量图层的步骤，包括：获取所述截图范围在该网页的HTML文件中对应的HTML代码片段；检测所述HTML代码片段中是否存在SVG标签，以判断该截图范围内是否包含可缩放矢量图层。进一步地，在上述方法中，所述获取所述截图范围在该网页的HTML文件中对应的HTML代码片段的步骤，包括：通过JAVASCRIPT获取所述截图范围在该网页的HTML文件中对应的HTML代码片段。进一步地，在上述方法中，所述用户终端将所述截图请求发送至所述服务器的步骤，包括：所述用户终端通过AJAX请求将所述截图请求发送至所述服务器。本专利技术的另一目的在于提供一种网页截图系统，所述系统包括相互通信的用户终端及服务器；所述用户终端用于接收网页上的截图触发，获取指定在该网页的上指定的截图范围；判断所述截图范围内是否包含有可缩放矢量图层；当所述截图范围内包含有可缩放矢量图层时，所述用户终端根据所述指定的截图范围在该网页的位置及该网页的链接地址生成截图请求；及将所述截图请求发送至所述服务器；所述服务器用于获取所述截图请求，根据所述链接地址请求所述网页并进行渲染，截取渲染后网页中与所述截图范围对应区域的图片并发送给所述用户终端。进一步地，在上述系统中，所述用户终端还用于当所述截图范围内不包含有可缩放矢量图层时，所述用户终端通过应用程序编程接口调用convas函数对所述截图范围内的图像进行绘图以获得截图图片。相对于现有技术而言，本专利技术具有以下有益效果：本专利技术提供的网页截图方法及系统，通过用户终端判断网页上指定截图范围内是否存在可缩放矢量图层，当存在可缩放矢量图层时，将截图范围的位置及所述网页的连接发送给服务器进行截图。如此，在所述用户终端无法完成对可缩放矢量图层的截图时，通过发送截图请求给服务器的方式由服务器代替所述用户终端完成截图。附图说明为了更清楚地说明本专利技术实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本专利技术的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。图1为本专利技术实施例提供的网页截图系统的示意图；图2为本专利技术实施例提供的网页截图方法的步骤流程示意图之一；图3为本专利技术实施例提供的截图范围选定示意图；图4为本专利技术实施例提供的网页截图方法的步骤流程示意图之二。图标：10-网页截图系统；100-服务器；200-用户终端；300-网络。具体实施方式为使本专利技术实施例的目的、技术方案和优点更加清楚，下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本专利技术实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本专利技术的实施例的详细描述并非旨在限制要求保护的本专利技术的范围，而是仅仅表示本专利技术的选定实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。在本专利技术的描述中，还需要说明的是，除非另有明确的规定和限定，术语“设置”、“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本专利技术中的具体含义。请参照图1，图1是本专利技术较佳实施例提供的网页截图系统10的示意图，所述网页截图系统10包括相互通信的服务器100与用户终端200。所述服务器100可通过网络300与所述用户终端200进行通信，以实现服务器100与用户终端200之间的数据通信或交互。本实施例中，所述服务器100可以是，但不限于，web(网站)服务器、ftp(filetransferprotocol，文件传输协议)服务器等。所述用户终端200可以是，但不限于，智能手机、个人电脑(personalcomputer，PC)、平板电脑、个人数字助理(personaldigitalassistant，PDA)、移动上网设备(mobileInternetdevice，MID)等。所述用户终端200的操作系统可以是，但不限于，安卓(Android)系本文档来自技高网...

【技术保护点】
一种网页截图方法，应用于相互通信的用户终端及服务器，其特征在于，所述方法包括：所述用户终端接收网页上的截图触发，获取在该网页的上指定的截图范围；所述用户终端判断所述截图范围内是否包含有可缩放矢量图层；当所述截图范围内包含有可缩放矢量图层时，所述用户终端根据所述指定的截图范围在该网页的位置及该网页的链接地址生成截图请求并发送至所述服务器；所述服务器获取所述截图请求，根据所述链接地址请求所述网页并进行渲染，截取渲染后网页中与所述截图范围对应区域的图片并发送给所述用户终端。

【技术特征摘要】
1.一种网页截图方法，应用于相互通信的用户终端及服务器，其特征在于，所述方法包括：所述用户终端接收网页上的截图触发，获取在该网页的上指定的截图范围；所述用户终端判断所述截图范围内是否包含有可缩放矢量图层；当所述截图范围内包含有可缩放矢量图层时，所述用户终端根据所述指定的截图范围在该网页的位置及该网页的链接地址生成截图请求并发送至所述服务器；所述服务器获取所述截图请求，根据所述链接地址请求所述网页并进行渲染，截取渲染后网页中与所述截图范围对应区域的图片并发送给所述用户终端。2.根据权利要求1所述的方法，其特征在于，所述服务器获取所述截图请求，根据所述链接地址请求所述网页并进行渲染，截取渲染后网页中与所述截图范围对应区域的图片并发送给所述用户终端的步骤，包括：接收所述用户终端发送的链接地址，根据所述链接地址请求所述网页，并通过该服务器上的浏览器渲染获得渲染后的网页；根据所述用户终端发送的所述截图范围，通过WebDriver截取所述渲染后网页中该截图范围对应区域的图片；将截取到的图片发送给所述用户终端。3.根据权利要求2所述的方法，其特征在于，所述截图请求中还包括指定的截图格式；所述根据所述用户终端发送的所述截图范围，通过WebDriver截取所述渲染后网页中该截图范围对应区域的图片的步骤，包括：根据所述用户终端发送的所述截图范围，通过WebDriver截取所述渲染后网页中该截图范围对应区域以生成预设格式的图片。4.根据权利要求1所述的方法，其特征在于，所述方法还包括：当所述截图范围内不包含有可缩放矢量图层时，所述用户终端通过应用程序编程接口调用convas函数对所述截图范围内的图像进行绘图以获得截图图片。5.根据权利要求1所述的方法，其特征在于，所述用户终端接收网页上的截图触发，获取指定在该网页的上指定的截图范围的步骤...

【专利技术属性】
技术研发人员：李存昌，
申请(专利权)人：四川九鼎瑞信软件开发有限公司，
类型：发明
国别省市：四川,51