[发明专利]截图方法及装置

说明书

本发明公开了一种截图方法及装置。其中，该方法包括：获取网页表单元素，网页表单元素用于使得浏览器在网页上显示与网页表单元素对应的样式；获取用于定义网页表单元素的脚本代码；调用脚本代码，以绘制网页表单元素的内容；将绘制的网页表单元素的内容转化为对应的图片，以完成对网页表单元素的截图操作。本发明解决了相关技术中由于使用图片预先绘制好某些表单元素造成的截图容易出现失真的技术问题。

技术领域

本发明涉及网页处理领域，具体而言，涉及一种截图方法及装置。

背景技术

在前端进行当前网页截图，是一种常用的技术手段，现有技术canvas绘图技术是通过获取html dom元素后并且解析dom元素的样式，根据dom元素的样式，在canvas元素上进行绘制，最后将绘制内容转化为图片。在这种情况下，对于常规的dom元素，可以通过css指定样式，canvas绘图技术的出现能够在一定程度上解决js网页截图的问题，但是对于常见的表单元素，显示样式由浏览器渲染，不能通过css指定样式，因此，通过canvas技术实现网页截图时，无法绘制样式由浏览器自行渲染的元素，例如常见的表单元素单选按钮、下拉列表框等。

对于浏览器自行渲染的元素，有一种现有技术方案是预先使用图片绘制好这些元素，在截图时，去服务器端调取这些图片，将这些图片绘制在canvas上。此类表单元素用户可以定义大小，对于使用图片代替的情况，由于图片不是矢量的，绘制完成后可能会失真，另外，此种方式多了与服务器端的交互，在单纯使用前端应用的场景显得十分不便。

针对上述的问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种截图方法及装置，以至少解决相关技术中由于使用图片预先绘制好某些表单元素造成的截图容易出现失真的技术问题。

根据本发明实施例的一个方面，提供了一种截图方法，包括：获取网页表单元素，上述网页表单元素用于使浏览器在网页上显示与上述网页表单元素对应的样式；获取用于定义上述网页表单元素的脚本代码；调用上述脚本代码，以绘制上述网页表单元素的内容；将绘制的上述网页表单元素的内容转化为对应的图片，以完成对上述网页表单元素的截图操作。

进一步地，在获取用于定义上述网页表单元素的脚本代码之前，上述方法还包括：判断上述网页表单元素是否是可由层叠样式表定义样式的表单元素；若否，执行获取用于定义上述网页表单元素的脚本代码的步骤，以完成对上述网页表单元素的截图操作。

进一步地，在将绘制的上述网页表单元素的内容转化为对应的图片，以完成对上述网页表单元素的截图操作之前，上述方法还包括：若上述网页表单元素是可由层叠样式表定义样式的表单元素，则在获取网页表单元素之后，解析上述网页表单元素的样式；根据上述网页表单元素的样式的解析结果，绘制上述网页表单元素的内容。

进一步地，调用上述脚本代码，以绘制上述网页表单元素的内容包括：调用上述脚本代码；根据上述脚本代码定义的内容确定上述网页表单元素的属性信息；根据确定出的上述网页表单元素的上述属性信息绘制上述网页表单元素的内容。

进一步地，上述属性信息至少包括：上述网页表单元素的类型、状态、绘制样式和用于显示上述网页表单元素的样式的浏览器。

根据本发明的另一方面，还提供了一种截图装置，包括：第一获取单元，用于获取网页表单元素，上述网页表单元素用于使浏览器在网页上显示与上述网页表单元素对应的样式；第二获取单元，用于获取用于定义上述网页表单元素的脚本代码；调用单元，用于调用上述脚本代码，以绘制上述网页表单元素的内容；转化单元，用于将绘制的上述网页表单元素的内容转化为对应的图片，以完成对上述网页表单元素的截图操作。