[发明专利]一种基于WEB技术的提高网页截图清晰度的方法

说明书

本发明提供了一种基于WEB技术的提高网页截图清晰度的方法，包括如下步骤：获取待截取页面的HTML元素内容，克隆待截取页面的DOM结构；对该DOM结构中待截取的目标节点、子节点及相应样式、层级要求进行解析判断；若DOM结构中不存在影响截图精确度的CSS样式要求的情况，则根据待截取节点元素样式、层级关系将其绘制到画布中；否则，若存在对待截取网页内容中的跨域资源或执行脚本由于安全隐私要求而不允许远程访问原始资源的情况，则进行画布绘制坐标参数按需缩放配置；否则，将待截图的HTML内容进行转换，根据不同的CSS样式要求进行截图预处理，构建SVG文档格式并将其进行图片化处理；最后，将绘制到画布中的内容进行图片转化，生成截图文件。

技术领域

本发明涉及截图技术领域，尤其涉及一种基于WEB(World Wide Web，全球广域网)技术的提高网页截图清晰度的方法。

背景技术

富图文分享是一种信息传播的重要途径之一，通过截取网页整个或部分内容来生成图片的方式被广泛使用，网页截图在电子存档、追溯取证及传播分享等方面发挥着重要作用。然而，实际操作中，网页截图往往会出现像素失真、清晰度不高、无法精确绘制原始网页内容的情况，在渲染样式、渲染层次、外部资源及特殊属性处理方面仍存在诸多问题：1)对于阴影、特殊边框、元素缩放、圆弧等CSS(Cascading Style Sheets，层叠样式表)属性样式计算精度低，导致截图结果模糊；2)对于深层次嵌套的DOM (Document Object Model，文档对象模型)节点，在像素化计算方面容易出现像素丢失，导致出现黑色截图结果；3)对于外部链接图片、脚本等资源，由于不支持跨域访问或执行受限，导致截取内容不完整。

发明内容

发明目的：本发明所要解决的技术问题是针对现有技术的不足，提供一种基于WEB技术的提高网页截图清晰度的方法，该方法通过获取待截取页面的HTML(Hyper TextMarkup Language，超文本标记语言)元素内容，克隆待截取页面的DOM结构；对该DOM结构中待截取的目标节点、子节点及相应样式、层级要求进行解析判断；若DOM结构中不存在影响截图精确度的CSS样式要求的情况，则根据待截取节点元素样式、层级关系以不同优先级将其绘制到画布中；否则，若存在对待截取网页内容中的跨域资源或执行脚本由于安全隐私要求而不允许远程访问原始精确资源的情况，则进行画布绘制坐标参数按需缩放配置；否则，将待截图的HTML内容进行转换，根据不同的CSS样式要求进行相应的截图预处理，构建SVG(Scalable Vector Graphics，可缩放矢量图形)文档格式并将其进行图片化处理；最后，将绘制到画布中的内容进行图片转化，生成截图文件。

本发明公开了一种基于WEB技术的提高网页截图清晰度的方法，包括如下步骤：

步骤1、获取待截取页面的HTML元素内容，克隆待截取页面的DOM结构。

步骤2、对克隆的DOM结构中的目标节点、子节点及其所有属性、CSS样式、层级要求进行解析、构造生成待截取元素及其最终样式的结构化数据；

步骤3、判断待截取网页的DOM结构中是否存在影响截图精确度的CSS样式的情况，若存在，则执行步骤4；否则，根据待截取节点元素样式、层级关系以不同层级的优先级将其绘制到画布中，再执行步骤6；

步骤4、判断是否存在对待截取网页内容中的跨域资源或执行脚本由于安全隐私要求而不允许远程访问原始精确资源的情况，若存在，则根据待截取节点元素样式、层级关系以不同优先级将其绘制到画布中，进行画布绘制坐标参数按需缩放配置，再执行步骤6；否则，执行步骤5；

步骤5、将待截取网页的HTML内容进行转换，根据不同的CSS样式要求进行相应的截图预处理，构建SVG文档格式并将其进行图片化处理，生成最终截图文件；

步骤6、将绘制到画布中的内容进行图片转化，生成最终截图文件。