一种截图方法和装置与流程

[0001]
本发明涉及计算机应用技术领域，特别是涉及一种截图方法和一种截图装置。


背景技术：

[0002]
在实际web(world wide web，全球广域网)交互应用中，用户常有需要对页面进行截图的场景需求；通过截图操作用户可以将屏幕界面中感兴趣的图像部分截取下来，现有技术的实现方案是用户通过页面发起请求并提交数据，交由服务器进行生成图片的操作，然后发送至用户的终端设备。服务器端实现的技术方案往往需要获悉发起方的终端设备上的屏幕信息，进而开发实现页面布局和生成图片，既要开发web页面，又要基于页面原有设计布局开发服务器端生成页面功能；导致页面实现成本增加。


技术实现要素：

[0003]
鉴于上述问题，提出了本发明实施例以便提供一种克服上述问题或者至少部分地解决上述问题的一种截图方法和相应的一种截图装置。
[0004]
本发明实施例公开了一种截图方法，应用于终端设备，所述终端设备运行有浏览器，所述浏览器上部署有绘制图像元素canvas，所述方法包括：
[0005]
接收针对所述浏览器展示的全球广域网web应用的截图指令；
[0006]
响应于所述截图命令，针对所述web应用当前所显示的页面生成页面拷贝数据；
[0007]
调用所述canvas将所述页面拷贝数据生成第一canvas对象；
[0008]
将所述第一canvas对象转化为第一字符串；
[0009]
调用所述浏览器解析所述第一字符串，生成截图数据。
[0010]
可选地，所述响应于所述截图命令，针对所述web应用当前所显示的页面生成页面拷贝数据的步骤包括：
[0011]
响应于所述截图命令，获取所述web应用当前所显示的页面对应的文档对象模型dom，所述dom包括样式信息与结构信息；
[0012]
基于所述样式信息和所述结构信息，生成页面拷贝数据。
[0013]
可选地，所述调用所述canvas将所述页面拷贝数据生成第一canvas对象的步骤包括：
[0014]
调用所述canvas对所述样式信息和所述结构信息进行渲染，得到对应的页面元素；
[0015]
对所述页面元素进行可视化处理，生成第一canvas对象。
[0016]
可选地，所述调用所述canvas对所述dom样式与所述dom结构进行渲染，得到对应的页面元素的步骤包括：
[0017]
调用所述canvas读取所述样式信息和所述结构信息；
[0018]
依据预设的绘制规则，对所述样式信息和所述结构信息进行绘制，生成dom组合；
[0019]
对所述dom组合进行渲染得到对应的页面元素。
[0020]
可选地，所述将所述第一canvas对象转化为第一字符串的步骤包括：
[0021]
采用base64编码规则，对所述第一canvas对象转化为第一字符串。
[0022]
可选地，所述方法还包括：
[0023]
接收针对所述截图数据的共享操作命令；
[0024]
响应于所述共享操作命令，将所述截图数据进行共享。
[0025]
可选地，所述方法还包括：
[0026]
接收拓展数据；
[0027]
调用所述canvas将所述页面拷贝数据与所述拓展数据生成第二canvas对象；
[0028]
将所述第二canvas对象转化为第二字符串。
[0029]
本发明实施例还公开了一种截图装置，应用于终端设备，所述终端设备运行有浏览器，所述浏览器上部署有绘制图像元素canvas，所述装置包括：
[0030]
第一接收模块，用于接收针对所述浏览器展示的全球广域网web应用的截图指令；
[0031]
第一响应模块，用于响应于所述截图命令，针对所述web应用当前所显示的页面生成页面拷贝数据；
[0032]
画布模块，用于调用所述canvas将所述页面拷贝数据生成第一canvas对象；
[0033]
第一转化模块，用于将所述第一canvas对象转化为第一字符串；
[0034]
解析模块，用于调用所述浏览器解析所述第一字符串，生成截图数据。
[0035]
本发明实施例还公开了一种车辆包括：
[0036]
一个或多个处理器；和
[0037]
其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述车辆执行如上所述的一个或多个的方法。
[0038]
本发明实施例还公开了一个或多个机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得所述处理器执行如上所述的一个或多个的方法。
[0039]
本发明实施例包括以下优点：
[0040]
本发明实施例通过接收针对所述浏览器展示的全球广域网web应用的截图指令；响应于所述截图命令，针对所述web应用当前所显示的页面生成页面拷贝数据；调用所述canvas将所述页面拷贝数据生成第一canvas对象；将所述第一canvas对象转化为第一字符串；调用所述浏览器解析所述第一字符串，生成截图数据。整个截图的过程无需重复页面开发即可实现，只需要增加对页面元素克隆以及绘制图片实现即可，页面开发成本降低，并且基于页面底层元素拷贝，可以做到小范围开发改动即可实现截图功能，对于技术的局限性小。
附图说明
[0041]
图1是现有的web页面截图生成图片的流程的示意图；
[0042]
图2是本发明的一种截图方法实施例的步骤流程图；
[0043]
图3是本发明的一种截图生成图片的流程的示例图；
[0044]
图4是本发明的一种截图方法示例的示意图；
[0045]
图5是本发明的一种截图装置实施例的结构框图。
具体实施方式
[0046]
为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。
[0047]
需要说明的是，若在不包含截图功能的情况下，web网页的开发流程上只需要实现前端页面开发以及服务端数据接口开发即可。其中，前端开发是指创建web页面或app(applicatione，应用程序)等前端界面呈现给用户的过程，通过html(hyper text markup language，超级文本标记语言)，css(cascading style sheets，层叠样式表)及javascript(编程语言)衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互开发。而服务端数据接口开发是指操作系统是用户的终端设备与服务器计算机硬件系统之间的接口开发，使得终端设备与服务器可以进行数据的交互。
[0048]
参照图1，示出了现有web页面截图生成图片的流程的示意图；
[0049]
现有技术中若是要在web网页中提供截图的功能，处理需要进行前端页面开发以及服务端数据接口开发外，往往需要在服务端实现同款页面的布局；当开发出页面设计稿后，分成两部分进行开发实现，一是页面前端开发，开发出可以与用户进行交互的web页面；二是页面布局服务端开发，对页面上的页面数据布局渲染，使之生成页面图片。当用户在web页面内，进行点击生成图片时，web页面发起截图请求并提交页面数据；服务端需通过生成图接口获悉发起方的终端设备屏幕当前网页所显示的信息，进而对网页数据进行布局，然后生成截图的图片。将生成的图片文件返回给终端设备，终端设备上显示的就是截图的图片。这导致页面实现的服务端实现的成本增加，既要对web页面进行显示，又要基于页面原有设计布局开发服务端生成页面的功能。可以看出现有技术中对在web页面中生成截图的图片需要独立的开发出对应的功能模块，导致网页的实现成本、接口承载成本以及服务端消耗成本都增加，使得页面开发实现的成本增加。而本发明实施例就是为解决页面开发实现截图功能导致的成本增加的技术问题而提出。
[0050]
参照图2，示出了本发明的一种截图方法实施例的步骤流程图，所述方法应用于终端设备，所述终端设备运行有浏览器，所述浏览器上部署有绘制图像元素canvas；
[0051]
需要说明的是，所述终端设备通过浏览器来检索、展示以及传递web信息资源。可以借助超级链接(hyperlinks)，在浏览器内浏览互相关联的web信息。
[0052]
canvas是在html(hyper text markup language，超文本标记语言)5中新增的标签，用于在网页实时生成图像，并且可以操作图像内容，是一个可以用javascript(一种高级编程语言)操作的位图(bitmap)。canvas是为了终端设备端的矢量图形而设计的。它自己没有行为，但却把一个绘图api展现给终端设备端javascript以使脚本能够把想绘制的东西都绘制到一块画布上。
[0053]
所述方法具体包括如下步骤：
[0054]
步骤201，接收针对所述浏览器展示的全球广域网web应用的截图指令；
[0055]
需要说明的是，web应用是一种可以通过web访问的应用程序，程序的最大好处是用户很容易访问应用程序，用户只需要有浏览器即可，不需要再安装其他软件。
[0056]
当用户通过浏览器访问web应用程序需要对其进行截图，生成截图的图片时，用户通过浏览器当前的web页面发起截图指令，终端设备则接收针对所述浏览器当前所展示的web应用页面的截图指令。
[0057]
步骤202，响应于所述截图命令，针对所述web应用当前所显示的页面生成页面拷贝数据；
[0058]
当终端设备接收到所述截图命令后，响应所述针对web应用当前所显示的页面进拷贝生成页面拷贝数据。
[0059]
可选地，所述响应于所述截图命令，针对所述web应用当前所显示的页面生成页面拷贝数据的步骤包括：
[0060]
步骤s2021，响应于所述截图命令，获取所述web应用当前所显示的页面对应的文档对象模型dom，所述dom包括样式信息与结构信息；
[0061]
需要说明的是，dom是一种与平台和语言无关的应用程序接口，它可以动态地访问程序和脚本，更新其内容、结构。文档可以进一步被处理，处理的结果可以加入到当前的页面。dom是一种基于树的api文档，它要求在处理过程中整个文档都表示在存储器中。而不同的dom构建出了不同的页面，因此，每一个页面都有着与其对应的dom。
[0062]
响应于所述截图命令，需要对web应用当前所显示的页面进行拷贝，因此，首先获取web应用当前所显示的页面对应的dom，而dom可以包括页面的样式信息与结构信息；其中，样式信息可以为页面内容数据的具体样式，而具体样式本领域技术人员可以根据实际要求进行选择，本发明实施例对此并不做限定。结构信息可以是各数据之间的结构关系。
[0063]
具体实现中，可以获取web应用当前所显示的页面的html代码，通过html解析器将html代码解析构建为一颗dom树，而dom树的中的节点就是样式信息；节点之间的关系就有多种，例如父子、有兄弟，可以接着将接收到的css(cascading style sheets，层叠样式表)代码，通过css解析器构建出样式表规则，所述样式表规则就可以是结构信息。其中，css能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
[0064]
步骤s2022，基于所述样式信息和所述结构信息，生成页面拷贝数据。
[0065]
当获取到页面中的样式信息和结构信息后，将页面中的样式信息和结构信息进行拷贝克隆，生成页面拷贝数据。
[0066]
步骤203，调用所述canvas将所述页面拷贝数据生成第一canvas对象；
[0067]
调用所述浏览器的canvas将页面拷贝数据生成单个canvas图片元素对象。
[0068]
可选地，所述调用所述canvas将所述页面拷贝数据生成第一canvas对象的步骤包括：
[0069]
步骤s2031，调用所述canvas对所述样式信息和所述结构信息进行渲染，得到对应的页面元素；
[0070]
通过调用所述canvas将页面拷贝数据中的所述样式信息和所述结构信息进行渲染，得到出所述样式信息和所述结构信息组合后对应的页面元素。
[0071]
可选地，所述调用所述canvas对所述dom样式与所述dom结构进行渲染，得到对应的页面元素的步骤包括：
[0072]
步骤s20311，调用所述canvas读取所述样式信息和所述结构信息；
[0073]
调用所述canvas读取页面拷贝数据中的样式信息和结构信息，并暂时存放在canvas上。
[0074]
步骤s20312，依据预设的绘制规则，对所述样式信息和所述结构信息进行绘制，生
成dom组合；
[0075]
依据预设的绘制规则，对canvas上存放的样式信息和结构信息进行结合，绘制生成dom组合；其中，预设的绘制规则可以是从上到下，从左到右的顺序进行绘制，本领域技术人员也可以根据实际需求选择不同的绘制规则，本发明实施例对此并不做限定。
[0076]
步骤s20313，对所述dom组合进行渲染得到对应的页面元素。
[0077]
对dom组合进行渲染得到其对应的页面元素。
[0078]
步骤s2032，对所述页面元素进行可视化处理，生成第一canvas对象。
[0079]
此时，所述页面元素在实现层面来说，页面已经完成实现了，页面已经生成了，但是此时的页面在用户并无法看到页面的实际样子，因此，需要对页面元素进行可视化处理，生成第一canvas对象。
[0080]
具体实现时，终端设备可以按从上到下，从左到右的顺序，读取dom树的文档节点，按顺序存放到文档流上，当读取到的节点是属于另一个节点下的子节点时，将该节点放置于其父节点内；根据结构信息，层层嵌套，但是嵌套的层级并不限制，当文档流排完之后，开始获取计算节点的坐标和大小等css属性，已完成对页面拷贝数据的布局，布局完成之后，只是计算出了每一个节点对象应该被放到页面的哪个位置上，但并没有可视化。因此最后一步就是将所有内容进行可视化，生成第一canvas对象。
[0081]
步骤204，将所述第一canvas对象转化为第一字符串；
[0082]
通过拷贝页面的页面数据后生成的第一canvas对象，对于终端设备来说是无法识别的，因此，需要将第一canvas对象转化为终端设备可以识别的第一字符串数据。
[0083]
可选地，所述将所述第一canvas对象转化为第一字符串的步骤包括：
[0084]
步骤s2041，采用base64编码规则，对所述第一canvas对象转化为第一字符串。
[0085]
可以通过canvas的todataurl方法，采用base64编码规则将第一canvas对象转义成base64编码格式的第一字符串。其中，base64编码是一种基于64个可打印字符来表示二进制数据的表示方法，是一种常见的用于传输8bit字节码的编码方式之一。此外，本领域技术人员还可以使用其他编码方式将第一canvas对象转化为终端设备可以识别的字符串类型的数据。
[0086]
步骤205，调用所述浏览器解析所述第一字符串，生成截图数据。
[0087]
终端设备调用浏览器对第一字符串进行识别从而生成截图数据，终端设备可以展示截图数据于当前屏幕上，使用户查看对页面的截图形况。对比于现有技术之下，优势在于，只需要前端技术即可实现截图功能，并且能等比例精确还原web页面效果，节省了服务端实现成本和接口，将性能分摊到页面终端上，节省服务器开销成本。
[0088]
可选地，所述方法还包括：
[0089]
步骤s1，接收针对所述截图数据的共享操作命令；
[0090]
当终端设备生成截图数据并展示于终端设备当前的显示屏幕上时，用户可以通过该查看界面发起共享操作请求。
[0091]
步骤s2，响应于所述共享操作命令，将所述截图数据进行共享。
[0092]
终端设备接收到所述共享操作命令后，将所述截图数据进行共享。其中，用户可以共享给终端设备内的其他应用程序进行使用，也可以是将截图数据共享给其他终端设备或者是其他用户。
[0093]
可选地，所述方法还包括：
[0094]
步骤s3，接收拓展数据；
[0095]
在生成截图数据后，由于canvas本身就具备绘图功能，可以在页面生成图片的情况下，接收对于截图的拓展数据；增加页面实现的可扩展性。举例而言，拓展数据可以是截图水印、推广二维码、时间、地点等，本领域技术人员可以根据实际要求选择不同的拓展数据，本发明实施例对此并不做限定。
[0096]
步骤s4，调用所述canvas将所述页面拷贝数据与所述拓展数据生成第二canvas对象；
[0097]
将存放在canvas上的页面拷贝数据重复利用，在原来的页面拷贝数据上融合接收到的拓展数据，生成第二canvas对象。同样地，可以通过调用所述canvas将页面拷贝数据中的所述样式信息和所述结构信息于拓展数据进行渲染，得到出所述样式信息和所述结构信息组合后对应的页面元素。再通过对该页面元素进行可视化处理，生成第二canvas对象
[0098]
步骤s5，将所述第二canvas对象转化为第二字符串。
[0099]
生成的第二canvas对象，对于终端设备来说也是无法识别的，因此，需要将第二canvas对象转化为终端设备可以识别的第二字符串数据。其中，第二字符串数据可以是base64编码格式的第二字符串数据。
[0100]
此外，第二字符串也可以被浏览器所识别，生成图片数据，以供用户对该图片数据进行编辑，共享等。
[0101]
本发明实施例通过接收针对所述浏览器展示的全球广域网web应用的截图指令；响应于所述截图命令，针对所述web应用当前所显示的页面生成页面拷贝数据；调用所述canvas将所述页面拷贝数据生成第一canvas对象；将所述第一canvas对象转化为第一字符串；调用所述浏览器解析所述第一字符串，生成截图数据。整个截图的过程无需重复页面开发即可实现，只需要增加对页面元素克隆以及绘制图片实现即可，页面开发成本降低，并且基于页面底层元素拷贝，可以做到小范围开发改动即可实现截图功能，对于技术的局限性小。其次，节省了接口调用，功能的代码完全依赖于终端的js引擎(浏览器集成引擎，职责是运行前端javascript代码)解释运行，分摊了本该服务端来承担的运行成本，提高了页面的整体访问稳定性。
[0102]
为了更加清楚理解本发明，参照图3，示出了本发明的一种截图生成图片的流程的示例图；
[0103]
在本发明实施例中，要在web网页中提供截图的功能，只需要在前端进行开发即可。当开发出页面设计稿后，只需要对页面前端开发即可生成页面，当用户在web页面内，进行点击生成图片时，通过本发明实施例的集成前端生成图片的技术即可生成图片，并展示在终端设备上。实际的截图方法参照图4，示出本发明的一种截图方法示例的示意图；
[0104]
在当前的web页面上，发起截图请求后，通过克隆拷贝当前页面对于的dom与样式，利用canvas将克隆的dom组合生成单个canvas对象，并利用todataurl方法，将图片元素转义成base64编码的字符串，浏览器识别该字符串，生成截图图片，展示于用户。
[0105]
本发明实施例通过无需重复页面开发实现，只需要增加对页面元素克隆以及绘制图片实现即可，开发成本低；其次，节省了接口调用，功能的代码完全依赖于终端的js引擎(浏览器集成引擎，职责是运行前端javascript代码)解释运行，分摊了本该服务端来承担
的运行成本，提高了页面的整体访问稳定性。
[0106]
需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明实施例并不受所描述的动作顺序的限制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本发明实施例所必须的。
[0107]
参照图5，示出了本发明的一种截图装置实施例的结构框图，所述装置应用于终端设备，所述终端设备运行有浏览器，所述浏览器上部署有绘制图像元素canvas，具体可以包括如下模块：
[0108]
第一接收模块501，用于接收针对所述浏览器展示的全球广域网web应用的截图指令；
[0109]
第一响应模块502，用于响应于所述截图命令，针对所述web应用当前所显示的页面生成页面拷贝数据；
[0110]
画布模块503，用于调用所述canvas将所述页面拷贝数据生成第一canvas对象；
[0111]
第一转化模块504，用于将所述第一canvas对象转化为第一字符串；
[0112]
解析模块505，用于调用所述浏览器解析所述第一字符串，生成截图数据。
[0113]
可选地，所述第一响应模块502包括：
[0114]
第一响应子模块，用于响应于所述截图命令，获取所述web应用当前所显示的页面对应的文档对象模型dom，所述dom包括样式信息与结构信息；
[0115]
拷贝子模块，用于基于所述样式信息和所述结构信息，生成页面拷贝数据。
[0116]
可选地，所述画布模块包括：
[0117]
渲染子模块，用于调用所述canvas对所述样式信息和所述结构信息进行渲染，得到对应的页面元素；
[0118]
可视化子模块，用于对所述页面元素进行可视化处理，生成第一canvas对象。
[0119]
可选地，所述渲染子模块包括：
[0120]
读取单元，用于调用所述canvas读取所述样式信息和所述结构信息；
[0121]
绘制单元，用于依据预设的绘制规则，对所述样式信息和所述结构信息进行绘制，生成dom组合；
[0122]
渲染单元，用于对所述dom组合进行渲染得到对应的页面元素。
[0123]
可选地，所述第一转化模块504包括：
[0124]
转化子模块，用于采用base64编码规则，对所述第一canvas对象转化为第一字符串。
[0125]
可选地，所述装置还包括：
[0126]
第二接收模块，用于接收针对所述截图数据的共享操作命令；
[0127]
共享模块，用于响应于所述共享操作命令，将所述截图数据进行共享。
[0128]
可选地，所述装置还包括：
[0129]
第三接收模块，用于接收拓展数据；
[0130]
拓展画布模块，用于调用所述canvas将所述页面拷贝数据与所述拓展数据生成第二canvas对象；
[0131]
第二转化模块，用于将所述第二canvas对象转化为第二字符串。
[0132]
对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
[0133]
本发明实施例还提供了一种车辆，包括：
[0134]
一个或多个处理器；和
[0135]
其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述车辆执行如上所述的一个或多个的方法。
[0136]
本发明实施例还提供一个或多个机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得所述处理器执行如上所述的一个或多个的方法。
[0137]
本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。
[0138]
本领域内的技术人员应明白，本发明实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本发明实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
[0139]
本发明实施例是参照根据本发明实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
[0140]
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
[0141]
这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
[0142]
尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。
[0143]
最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品
或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。
[0144]
以上对本发明所提供的一种截图方法和一种截图装置，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。