CN112784202A - 一种基于web技术的提高网页截图清晰度的方法 - Google Patents

Abstract

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

Description

一种基于WEB技术的提高网页截图清晰度的方法

技术领域

本发明涉及截图技术领域，尤其涉及一种基于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、将绘制到画布中的内容进行图片转化，生成最终截图文件。

进一步的，所述步骤1中，通过读取浏览器全局变量windows.document获取待截取网页的HTML元素内容；对于待截取页面的HTML元素进行DOM结构解析，识别可做缓存优化的元素，对需要在页面的不同地方进行重复渲染的元素、页面中需要预加载的外部图片资源等进行缓存，避免多次加载或请求同一资源；调用cloneNode克隆待截取页面的DOM，其中包括克隆各目标节点的子节点；

进一步的，所述步骤2中，通过浏览器的window.getComputedStyle API(Application Programming Interface，应用程序接口)获取步骤1中克隆的DOM结构中的目标节点、子节点的自定义样式与浏览器默认赋予节点样式的融合结果作为该节点的最终样式；对目标节点的所有属性进行解析构造，递归生成包含Styles、textNodes、Elments及Bounds字段的渲染对象树，其中Styles字段存储目标节点的最终样式、textNodes存储节点的文本信息、Elements存储节点的子节点信息、Bounds字段存储节点的大小和位置信息。

进一步的，所述步骤3中，依据步骤2中生成的渲染对象树的内容判断待截取DOM结构中是否存在影响截图精确度的CSS样式要求的情况，所述影响截图精确度的CSS样式包括阴影属性box-shadow、缩放属性zoom、边框的圆角属性border-radius及边框的样式属性为虚线dashed。

进一步的，所述步骤4中，判断是否存在对待截取网页内容中的跨域资源或执行脚本由于安全隐私要求而不允许远程访问原始精确资源的情况，若存在，则进行画布绘制坐标参数按需缩放配置，设置缩放比例参数ratio的值，其中ratio∈正整数且ratio＞1，将原始图片左上角的坐标记为(sx,sy)，将原始图片的宽度记为sWidth，高度记为sHeight，将在画布上的绘制图片左上角坐标记为(dx,dy)，将在画布上的绘制宽度记为dWidth，高度记为dHeight，则dWidth＝sWidth*ratio，dHeight＝sHeight*ratio，dx＝sx–sWidth(ratio-1)，dy＝sy–sHeight(ratio-1)。

进一步的，所述步骤5中：

步骤5-1，若截取网页的HTML内容中包含外部图片、样式及脚本资源，则将这些资源进行内联化预处理，构建预处理后的样式表和完整的文档document，并用预处理后的样式表替换已有样式表；截取网页的HTML内容的类型分为整个文档节点、部分文档片段及HTML资源连接三类；通过将外部链接资源内联化，一方面由于缓存机制保证了截图的性能；另一方面保证了截图内容的完整性。通过将外部链接资源内联化，一方面由于缓存机制保证了截图的性能；另一方面保证了截图内容的完整性。

步骤5-2，根据截图尺寸要求计算最终绘制图片的大小，按照截图尺寸要求创建一个空的内联框架iframe并将步骤5-1中预处理过的文档document加载到其中，以该内联框架iframe渲染后的宽度clientWidth以高度clientHeight作为最终SVG需要渲染的宽度及高度；

步骤5-3，构建SVG文档格式并将其进行图片化处理，对步骤5-1中预处理后的文档document进行序列化，即递归遍历文档document节点、处理文档document中需要转义的符号并为文档document添加命名空间；依据步骤5-2中计算的最终渲染宽度和高度，结合序列化后的内容构建SVG文档；最后通过调用浏览器的window.URL.createObjectURL API将SVG文档处理生成图片资源。

进一步的，所述步骤5-1包括：

5-1-1：对于外部图片资源，将其转换为base64(基于64个可打印字符来表示二进制数据)格式，并将HTML文档中的图像元素img的src值替换为base64格式；

5-1-2：对于外部样式资源，通过ajax(Asynchronous JavaScript and XML，异步的JavaScript和XML)请求文档与外部资源的关系标签link标签类的外部样式表；对以样式标签style描述的内联样式中包含背景图的情况进行解析，并将背景图资源通过ajax请求获取到本地；解析样式表中以背景图像属性background方式引入的图片资源，将其处理为内联图片；对于样式表中以@font-face方式引入的外部字体库进行解析处理为内联样式；

5-1-3：对于外部脚本资源，通过ajax请求获取外部脚本内容，并用该内容替换原有的脚本标签script内容。

进一步的，所述步骤3中所述层级指在垂直于屏幕的Z轴方向上元素渲染时的叠加顺序，遵循CSS的7阶层叠水平，即第一层为整个文档的背景和边框；第二层针对z-index为负的层叠上下文元素，z-index值越小则层级越底；第三层为非内联元素inline-block的流式布局元素；第四层为float浮动元素且无position定位的元素；第五层为无position定位且流式布局为内联元素inline-block；第六层为z-index为0、auto、transform、opacity中的任意一个的元素；第七层为z-index为正的元素；层级越高则渲染优先级越高，元素越不容易被遮挡；所述以不同层级的优先级将其绘制到画布中指绘制顺序自底向上，即先绘制第一层，再绘制第二层，以此类推，直到第七层。

进一步的，所述步骤6中，将绘制到画布中的内容进行图片转化包括对待绘制元素根据不同的样式属性按渲染层级进行分组：若当前节点中子节点是无position定位且流式布局为内联元素inline-block的则分为一组；若当前节点中子节点是非内联元素inline-block的流式布局元素则分为一组；若当前节点中子节点设置元素堆叠顺序的z-index属性为负，会形成层叠上下文，则分为一组并构建特定层叠的数据结构；若当前节点中子节点的z-index属性为0、auto、transform、opacity中的任意一个，则分为一组；若当前节点中子节点的z-index属性为正，则分为一组；若当前节点中子节点没有position定位方式约束且有float浮动属性形成的层叠上下文，则分为一组。最后，根据上述层级分组及以层级自底向上的顺序进行截图内容渲染并通过浏览器的toDataURL API生成最终截图结果。

有益效果：本发明与现有技术相比具有以下的优点：

1)在截图精度方面，通过将目标节点绘制换算交由浏览器执行，避免了对于阴影、特殊边框、元素缩放、圆弧等CSS属性样式计算精度低及由于DOM嵌套层次过深而导致的像素丢失问题。

2)通过将外部链接资源内联化，一方面由于缓存机制保证了截图的性能；另一方面保证了截图内容的完整性。

3)在不依赖外部图片处理工具如Adobe Photoshop、Illustrator等的情况下，结合浏览器内置API通过Web技术提高了网页截图的清晰度，减少了额外的图片处理操作。

附图说明

下面结合附图和具体实施方式对本发明做更进一步的具体说明，本发明的上述和或其他方面的优点将会变得更加清楚。

图1是本发明的流程示意图。

图2是本发明实施例构建CSSOM示意图。

图3是本发明实施例中图片缩放配置示意图。

图4是本发明实施例截图测试网页及结果示意图。

具体实施方式

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

下面结合附图和具体实施例，进一步阐述本发明。

实现本发明的流程示意图如图1所示，方法具体实施步骤如下：

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

本实施例中，首先，读取浏览器全局变量windows.document来获取待截取网页的HTML元素内容；然后，对于待截取页面的HTML元素进行DOM结构解析，识别可做缓存优化的元素，对需要在页面的不同地方进行重复渲染的元素、页面中需要预加载的外部图片资源等进行缓存，避免多次加载或请求同一资源；例如，本实施例中待截图页面中包含blob形式的图片资源，则通过FileReader将该图片资源处理成内存链接并将其添加到缓存中，方式如下：

const fileReader＝new FileReader()；

fileReader.addEventListener('load',function(){resolve(fileReader.result)},false)；

fileReader.addEventListener('erro',function(e){reject(e)},false)；

fileReader.readAsDataURL(xhr.response)；

最后，调用cloneNode克隆待截取页面的DOM，其中包括克隆目标节点的子节点：

const cloneDOM＝window.document.cloneNode(true)；

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

本实施例中，通过浏览器的window.getComputedStyle API获取步骤1中克隆的DOM结构中的目标节点、子节点的自定义样式与浏览器默认赋予节点样式的融合结果作为该节点的最终样式，在该过程中，首先处理节点的自定义CSS标记并构建CSSOM(CSS ObjectModel，CSS对象模型)，然后将DOM与CSSOM合并生成渲染树，最后根据渲染树的层级及布局规则计算每个节点最终样式的几何信息，如图2所示是本实施例中构建的CSSDOM，可以看到对每个节点自底向上进行追溯、合并计算确定节点最终样式信息的过程。对目标节点的所有属性进行解析构造，递归生成包含Styles、textNodes、Elments及Bounds字段的渲染对象树，其中Styles字段存储目标节点的最终样式、textNodes存储节点的文本信息、Elements存储节点的子节点信息、Bounds字段存储节点的大小和位置信息。

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

本实施例中，判断目标节点的最终样式中是否存在box-shadow、zoom、border-radius及dashed类型的边框，若存在，则执行步骤4；否则，根据待截取节点元素样式、层级关系以不同层级的优先级将其绘制到画布中；所述画布为HTML5中用于在网页中生成图像的标签canvas；所述层级指在垂直于屏幕的Z轴方向上元素渲染时的叠加顺序，遵循CSS的7阶层叠水平，即第一层为整个文档的背景和边框；第二层针对z-index为负的层叠上下文元素，z-index值越小则层级越底；第三层为非内联元素inline-block的流式布局元素；第四层为float浮动元素且无position定位的元素；第五层为无position定位且流式布局为内联元素inline-block；第六层为z-index为0、auto、transform、opacity中的任意一个的元素；第七层为z-index属性为正的元素；层级越高则渲染优先级越高，元素越不容易被遮挡；所述以不同层级的优先级将其绘制到画布中指绘制顺序自底向上，即先绘制第一层，再绘制第二层，以此类推，直到第七层。

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

本实施例中，判断是否存在对待截取网页内容中的跨域资源或执行脚本由于安全隐私要求而不允许远程访问原始精确资源的情况，若存在，则进行画布绘制坐标参数按需缩放配置，实施例中设置缩放比例参数ratio的值为3，使得原始像素与绘制像素的比例为1比3，如图3所示，可知，dWidth＝sWidth*ratio，dHeight＝sHeight*ratio，dx＝sx–sWidth(ratio-1)，dy＝sy–sHeight(ratio-1)；否则，执行步骤5。

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

本实施例中，执行以下步骤：

步骤5-1，将待截图的HTML内容进行转换，根据不同的CSS样式要求、截取内容的类型进行相应的截图预处理。对截图内容为整个文档节点、部分文档片段及HTML资源连接这三类截图需求进行预处理，将其转换为完整的document文档节点；若截取内容中包含外部图片、样式及脚本资源，则将这些资源进行内联化处理：(1)对于外部图片资源，将其转换为base64格式，并将HTML文档中的img的src值替换为base64格式；(2)对于外部样式资源，通过ajax请求link标签类的外部样式表；对以style标签描述的内联样式中包含背景图的情况进行解析，并将背景图资源通过ajax请求获取到本地；解析样式表中以background属性方式引入的图片资源，将其处理为内联图片；对于样式表中以@font-face方式引入的外部字体库进行解析处理为内联样式；(3)对于外部脚本资源，通过ajax请求获取外部脚本内容，并用该内容替换原有的script标签内容。本实施例中，内联化处理过程如下：

1)遍历截图网页内容所涉及的所有CSS样式规则，定位并过滤出需要进行内联化处理替换的规则，并提取其中的外部链接；

2)通过ajax方式请求1)中的外部链接资源，并将返回的响应资源处理为base64类型；

3)以2)中生成的base64类型的data链接替换原有CSS样式规则中的外部链接资源地址，构建形成新的CSS规则；

最后，用预处理后构建的样式表替换已有样式表。

步骤5-2，根据截图尺寸要求计算最终绘制图片的大小。按照截图尺寸要求创建一个空的iframe并将步骤5-1中预处理过的文档加载到其中，以该iframe渲染后的clientWidth以clientHeight作为最终SVG需要渲染的宽度及高度。本实施例子中，SVG的渲染宽度为iframe渲染后的网页可见区域宽，即document.body.clientWidth；SVG的渲染高度为iframe渲染后的网页可见区域高，即document.body.clientHeight；

步骤5-3，构建SVG文档格式并将其进行图片化处理。对步骤5-1中预处理后的文档进行序列化，即递归遍历文档节点、处理文档中需要转义的符号并为文档添命名空间；依据步骤5-2中计算的最终渲染宽度、高度，结合序列化后的内容构建SVG文档；最后通过调用浏览器的window.URL.createObjectURL API将SVG文档处理生成图片资源。

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

本实施例中，对待绘制元素根据不同的样式属性按渲染层级进行分组：若当前节点中子节点是无position定位且流式布局为内联元素inline-block的则分为一组；若当前节点中子节点是非内联元素inline-block的流式布局元素则分为一组；若当前节点中子节点的z-index属性为负，会形成层叠上下文，则分为一组并构建特定层叠的数据结构；若当前节点中子节点的z-index属性为0、auto、transform、opacity中的任意一个，则分为一组；若当前节点中子节点的z-index属性为正，则分为一组；若当前节点中子节点没有position定位方式约束且有float浮动属性形成的层叠上下文，则分为一组。本实施例中，层级优先级策略遵循CSS的7阶层叠水平，即第一层为整个文档的背景和边框；第二层针对z-index为负的层叠上下文元素，z-index值越小则层级越底；第三层为非inline-block类的流式布局元素；第四层为float浮动元素且无position定位的元素；第五层为无position定位且流式布局为inline-block元素；第六层为z-index为0或auto的元素；第七层为z-index为正的元素。最后，根据上述层级分组及以层级自底向上的顺序进行截图内容渲染并通过浏览器的toDataURL API生成最终截图结果。在实施例中对echarts官网相关网页进行截图测试，如图4所示，其中左侧红色框选部分时待截图的网页内容，其中包含丰富的图文要素，右侧图片是通过本实施例生成的最终截图结果。

本发明提供了一种基于WEB技术的提高网页截图清晰度的方法。具体实现该技术方案的方法和途径很多，以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。本实施例中未明确的各组成部分均可用现有技术加以实现。

Claims (9)

1.一种基于WEB技术的提高网页截图清晰度的方法，其特征在于，包括以下步骤：

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

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

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

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

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

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

2.根据权利要求1所述的一种基于WEB技术的提高网页截图清晰度的方法，其特征在于，所述步骤1中包括：通过读取浏览器全局变量windows.document获得待截取网页的HTML元素内容；对于待截取网页的HTML元素进行DOM结构解析，识别可做缓存优化的元素，对需要在网页的不同地方进行重复渲染的元素、网页中需要预加载的外部图片资源进行缓存；调用cloneNode克隆待截取网页的DOM，其中包括克隆各目标节点的子节点。

3.根据权利要求1所述的一种基于WEB技术的提高网页截图清晰度的方法，其特征在于，所述步骤2中包括：通过浏览器的window.getComputedStyle API获得步骤1中克隆的DOM结构中的目标节点、子节点的自定义样式与浏览器默认赋予节点样式的融合结果作为该节点的最终样式；对目标节点的所有属性进行解析构造，递归生成包含Styles、textNodes、Elments及Bounds字段的渲染对象树，其中Styles字段存储目标节点的最终样式、textNodes存储节点的文本信息、Elements存储节点的子节点信息、Bounds字段存储节点的大小和位置信息。

4.根据权利要求3所述的一种基于WEB技术的提高网页截图清晰度的方法，其特征在于，所述步骤3中依据所述渲染对象树的内容判断待截取DOM结构中是否存在影响截图精确度的CSS样式要求的情况，所述影响截图精确度的CSS样式包括阴影属性box-shadow、缩放属性zoom、边框的圆角属性border-radius及边框的样式属性为虚线dashed。

5.根据权利要求1所述的一种基于WEB技术的提高网页截图清晰度的方法，其特征在于，所述步骤4中若存在对待截取网页内容中的跨域资源或执行脚本由于安全隐私要求而不允许远程访问原始精确资源的情况，则进行画布绘制坐标参数按需缩放配置，设置缩放比例参数ratio的值，其中ratio∈正整数且ratio＞1，将原始图片左上角的坐标记为(sx,sy)，将原始图片的宽度记为sWidth，高度记为sHeight，将在画布上的绘制图片左上角坐标记为(dx,dy)，将在画布上的绘制宽度记为dWidth，高度记为dHeight，则dWidth＝sWidth*ratio，dHeight＝sHeight*ratio，dx＝sx–sWidth(ratio-1)，dy＝sy–sHeight(ratio-1)。

6.根据权利要求1所述的一种基于WEB技术的提高网页截图清晰度的方法，其特征在于，所述步骤5包括如下步骤：

步骤5-1，若截取网页的HTML内容中包含外部图片、样式及脚本资源，则将这些资源进行内联化预处理，构建预处理后的样式表和完整的文档document，并用预处理后的样式表替换已有样式表；

步骤5-2，根据截图尺寸要求计算最终绘制图片的大小，按照截图尺寸要求创建一个空的内联框架iframe并将步骤5-1中预处理过的文档document加载到其中，以该内联框架iframe渲染后的宽度clientWidth和高度clientHeight作为最终SVG需要渲染的宽度及高度；

步骤5-3，构建SVG文档格式并将其进行图片化处理，对步骤5-1中预处理后的文档document进行序列化，即递归遍历文档document节点、处理文档document中需要转义的符号并为文档document添加命名空间；依据步骤5-2中计算的最终渲染宽度和高度，结合序列化后的内容构建SVG文档；最后通过调用浏览器的window.URL.createObjectURL API将SVG文档处理生成图片资源。

7.根据权利要求6所述的一种基于WEB技术的提高网页截图清晰度的方法，其特征在于，所述步骤5-1包括：

5-1-1：对于外部图片资源，将其转换为base64格式，并将HTML文档中的img标签的src值替换为base64格式；

5-1-2：对于外部样式资源，通过ajax请求link标签类的外部样式表；对以style标签描述的内联样式中包含背景图的情况进行解析，并将背景图资源通过ajax请求获取到本地；解析样式表中以background属性方式引入的图片资源，将其处理为内联图片；对于样式表中以@font-face方式引入的外部字体库进行解析处理为内联样式；

5-1-3：对于外部脚本资源，通过ajax请求获取外部脚本内容，并用该内容替换原有的script标签内容。

8.根据权利要求1所述的一种基于WEB技术的提高网页截图清晰度的方法，其特征在于，所述步骤3中所述层级指在垂直于屏幕的Z轴方向上元素渲染时的叠加顺序，遵循CSS的7阶层叠水平，即第一层为整个文档的背景和边框；第二层针对z-index为负的层叠上下文元素，z-index值越小则层级越底；第三层为非内联元素inline-block的流式布局元素；第四层为float浮动元素且无position定位的元素；第五层为无position定位且流式布局为内联元素inline-block；第六层为z-index为0、auto、transform、opacity中的任意一个的元素；第七层为z-index为正的元素；层级越高则渲染优先级越高，元素越不容易被遮挡；所述以不同层级的优先级将其绘制到画布中指绘制顺序自底向上，即先绘制第一层，再绘制第二层，以此类推，直到第七层。

9.根据权利要求8所述的一种基于WEB技术的提高网页截图清晰度的方法，其特征在于，所述步骤6将绘制到画布中的内容进行图片转化包括对待绘制元素根据不同的样式属性按渲染层级进行分组：若当前节点中子节点是无position定位且流式布局为内联元素inline-block的则分为一组；若当前节点中子节点是非内联元素inline-block的流式布局元素则分为一组；若当前节点中子节点的z-index属性为负，会形成层叠上下文，则分为一组并构建特定层叠的数据结构；若当前节点中子节点的z-index属性为0、auto、transform、opacity中的任意一个，则分为一组；若当前节点中子节点的z-index为正，则分为一组；若当前节点中子节点没有position定位方式约束且有float浮动属性形成的层叠上下文，则分为一组；最后，根据上述层级分组及以层级自底向上的顺序进行截图内容渲染并通过浏览器的toDataURL API生成最终截图结果。

Images