CN109977337A - 一种网页设计对比方法、装置、设备及可读存储介质 - Google Patents

Abstract

本发明提供了一种网页设计对比、装置、设备及可读存储介质，包括：接收针对目标网页的网页设计对比请求；根据所述网页设计对比请求，提取所述目标网页的页面源码；根据所述页面源码渲染并获取所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据；获取所述目标网页对应的预设设计图中的预设图片数据，以及所述预设设计图的预设图片属性数据；分别计算所述目标图片数据与所述预设图片数据之间的第一相似度，以及所述目标图片属性数据与所述预设图片属性数据之间的第二相似度；根据所述第一相似度和所述第二相似度生成网页设计对比报告。解决了现有技术中页面设计验证会造成人工成本升高造成扩展性差的问题。

Description

一种网页设计对比方法、装置、设备及可读存储介质

技术领域

本发明涉及网页设计技术领域，特别是涉及一种网页设计对比方法、装置、设备及可读存储介质。

背景技术

随着计算机网络技术的不断发展，网页应用开发的不断进步，网页界面的设计和实现是由不同的人员协作完成，由于界面设计与界面实现分别会有不同的侧重点，导致界面的实现效果与设计图不一致的情况，因此网页界面的设计验证工作也逐步细致和复杂。

现有技术中，大多制作团队中，网页界面实现效果与设计图两者对比过程完全依赖于人工，验证依赖的数据单一，不利于用户的分析统计，且对于复杂的页面设计验证会造成人工成本升高，造成上述验证方法成本高且没有可扩展性。

发明内容

鉴于上述问题，提出了本发明实施例以便提供一种克服上述问题或者至少部分地解决上述问题的一种网页设计对比方法和相应的一种网页设计对比装置。

根据本发明的第一方面，本发明实施例公开了一种网页设计对比方法，具体包括：

接收针对目标网页的网页设计对比请求；

根据所述网页设计对比请求，提取所述目标网页的页面源码；

根据所述页面源码渲染并获取所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据；

获取所述目标网页对应的预设设计图中的预设图片数据，以及所述预设设计图的预设图片属性数据；

分别计算所述目标图片数据与所述预设图片数据之间的第一相似度，以及所述目标图片属性数据与所述预设图片属性数据之间的第二相似度；

根据所述第一相似度和所述第二相似度生成网页设计对比报告。

根据本发明的第二方面，本发明实施例公开了一种网页设计对比装置，具体包括：

网页设计对比请求接收模块，用于接收针对目标网页的网页设计对比请求；

页面源码提取模块，用于根据所述网页设计对比请求，提取所述目标网页的页面源码；

目标图片数据获取模块，用于根据所述页面源码渲染并获取所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据；

预设图片信息获取模块，用于获取所述目标网页对应的预设设计图中的预设图片数据，以及所述预设设计图的预设图片属性数据；

相似度计算模块，用于分别计算所述目标图片数据与所述预设图片数据之间的第一相似度，以及所述目标图片属性数据与所述预设图片属性数据之间的第二相似度；

网页设计对比报告生成模块，用于根据所述第一相似度和所述第二相似度生成网页设计对比报告。

根据本发明的第三方面，提供了一种设备，包括：处理器、存储器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如前述的网页设计对比方法。

根据本发明的第四方面，提供了一种可读存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够实现前述的网页设计对比方法。

本发明实施例包括以下优点接收针对目标网页的网页设计对比请求；根据所述网页设计对比请求，提取所述目标网页的页面源码；获取所述目标网页对应的预设设计图中的预设图片数据，以及所述预设设计图的预设图片属性数据；根据所述页面源码渲染并获取所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据；分别计算所述目标图片数据与所述预设图片数据之间的第一相似度，以及所述目标图片属性数据与所述预设图片属性数据之间的第二相似度；根据所述第一相似度和所述第二相似度生成网页设计对比报告。提供了一种利用图片相似度算法，实现批量确定页面与设计图的关联性，并对比其相似度而实现网页设计对比的方法，具备不依赖人工操作而自动实现网页设计的对比并提供用户可读评测报告的有益效果。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本发明的一种网页设计对比方法实施例的步骤流程图；

图2是本发明的一种网页设计对比方法实施例的步骤流程图；

图3是本发明的一种网页设计对比装置实施例的结构框图；

图4是本发明的一种网页设计对比装置实施例的结构框图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

图像特征：图像特征主要有图像的颜色特征、纹理特征、形状特征和空间关系特征。颜色特征是一种全局特征，描述了图像或图像区域所对应的景物的表面性质；纹理特征也是一种全局特征，它也描述了图像或图像区域所对应景物的表面性质；形状特征有两类表示方法，一类是轮廓特征，另一类是区域特征，图像的轮廓特征主要针对物体的外边界，而图像的区域特征则关系到整个形状区域；空间关系特征，是指图像中分割出来的多个目标之间的相互的空间位置或相对方向关系，这些关系也可分为连接/邻接关系、交叠/重叠关系和包含/包容关系等。

图像识别：是指利用计算机对图像进行处理、分析和理解，以识别各种不同模式的目标和对像的技术。一般工业使用中，采用工业相机拍摄图片，然后再利用软件根据图片灰阶差做进一步识别处理。另外在地理学中指将遥感图像进行分类的技术。

DOM元素：文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

无头浏览器：无头浏览器(Headless browser)指没有用户图形界面(GUI)的浏览器，目前广泛运用于自动化测试中。

模式匹配：模式匹配是数据结构中字符串的一种基本运算，给定一个子串，要求在某个字符串中找出与该子串相同的所有子串，这就是模式匹配。

实施例一

参照图1，示出了本发明的一种网页设计对比方法实施例的步骤流程图，具体可以包括如下步骤：

步骤101，接收针对目标网页的网页设计对比请求；

本发明实施例中，网页设计完成后，根据网页设计图进行网页开发与内容添加后，需要对开发后的网页进行评测，通常可以由网页设计用户针对开发完成的网页发起评测请求，以查看开发网页是否符合设计要求。

可以理解地，网页设计对比请求的发起方式可以由人工发起，或者通过测试软件自动发起，本发明实施例对网页设计对比请求的发起方式不加以限定。

步骤102，根据所述网页设计对比请求，提取所述目标网页的页面源码；

本发明实施例中，当接收到网页设计对比请求后，首先通过无头浏览器和模式匹配获取所有相关页面源码。

其中，无头浏览器(Headless browser)指没有用户图形界面的(GUI)的浏览器，例如，一个基于开源的浏览器引擎webkit内核的无头浏览器，即没有UI(User Interface，用户界面)，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现，提供javascript API接口(JavaScript语言编写的应用程序接口)，即通过编写javascript程序可以直接与webkit内核交互，在此之上可以结合java语言等，通过java调用javascript等相关操作，提供windows、linux、mac等不同操作系统的安装使用包，也就是说可以在不同平台上二次开发采集项目或是自动项目测试等工作。

具体地，通过无头浏览器上提供的接口以及实现针对不同系统的程序，以提取当前开发完成网页的所有源代码。

步骤103，根据所述页面源码渲染并获取所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据；

本发明实施例中，在步骤102中获取当前开发完成目标网页的包含的所有源码以后，获取源码中包含的目标图片数据以及对应的目标图片属性。

其中，获取的目标图片数据以及目标图片属性与预设图片数据以及预设图片属性对应，以便进行比对。

步骤104，获取所述目标网页对应的预设设计图中的预设图片数据，以及所述预设设计图的预设图片属性数据；

本发明实施例中，根据针对当前开发完成的目标网页的预先设计的预设页面内容，包括预设设计图片，以及对应该图片的预设图片属性，例如图像特征、图像大小、图像位置等。

当然，预设图片属性还可以包括预设图片色度、预设图片动态显示方式等，本发明实施例对预设图片属性的具体内容不做限制。

步骤105，分别计算所述目标图片数据与所述预设图片数据之间的第一相似度，以及所述目标图片属性数据与所述预设图片属性数据之间的第二相似度；

本发明实施例中，可以通过获取目标图片数据与预设图片数据的图像特征，进一步计算目标图片数据与预设图片数据中图像特征的相似度，获得图片数据与预设图片数据的相似度，再将目标图片属性数据与预设图片属性数据进行量化后，计算其相似度，得到目标图片属性数据与预设图片属性数据之间的相似度。

其中，图像特征主要有图像的颜色特征、纹理特征、形状特征和空间关系特征。获取目标图片数据与预设图片数据的图像特征的上述图像特征后，通过图像识别技术做进一步识别处理，得到图像特征数据之间的相似度。

可以理解地，图像特征的相似度计算方式不是本发明实施例的限定范围。

其中，综合目标图片数据与预设图片数据，以及，目标图片属性数据与预设图片属性数据之间的相似度，计算目标网页与预设网页之间的相似度，生成用户可读的网页设计对比报告。

其中，可以对目标图片数据与预设图片数据，以及，目标图片属性数据与预设图片属性数据进行加权求和的方式计算目标网页与预设网页之间的相似度，当然，目标网页与预设网页之间的相似度的获得方式不限于上述描述，本发明实施例不加以限制。

在实际应用中，设计网页中包含多个目标图片数据，同样地预设设计图中也包含多个对应的预设图片数据，所以可以对多个目标图片数据和多个对应的预设图片数据进行批量相似度计算，得到每个对比图片数据之间的相似度，以生成网页设计对比报告。

可以理解地，用户可读的网页设计对比报告包括目标网页中目标图片与预设图偏差异区域进行标注等方式，供用户直观得到评测结果，当然，直观展示评测结果的方式不限于上述一种描述，本发明实施例对此不加以限制。

步骤106，根据所述第一相似度和所述第二相似度生成网页设计对比报告。

本发明实施例中，将上述得到的评测报告在用户设备上展示给用户，其中，可以将评测报告直接展示在测试软件上，也可以以图片格式或者文本格式存储，发送给用户。

在本发明实施例中，接收针对目标网页的网页设计对比请求；根据所述网页设计对比请求，提取所述目标网页的页面源码；根据所述页面源码渲染并获取所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据；获取所述目标网页对应的预设设计图中的预设图片数据，以及所述预设设计图的预设图片属性数据；分别计算所述目标图片数据与所述预设图片数据之间的第一相似度，以及所述目标图片属性数据与所述预设图片属性数据之间的第二相似度；根据所述第一相似度和所述第二相似度生成网页设计对比报告。实现了不依赖人工对比以进行网页设计测试的有益效果。

实施例二

参照图2，示出了本发明的一种网页设计对比方法实施例的步骤流程图，具体可以包括如下步骤：

步骤201，接收针对目标网页的网页设计对比请求；

此步骤与步骤101相同，在此不再详述。

步骤202，根据所述网页设计对比请求，以预设浏览工具遍历所述目标网页的URL集下所有子链接；

具体地，根据所述网页设计对比请求对应的目标网页，通过预设无头浏览器中URL(Uniform Resource Location，统一资源定位符)调用接口对象page.open(url,function(status){}，打开URL链接，并可以回调其声明的回调函数，其回调发生的时机为该URL被彻底打开完毕，即该URL所引发的请求项被全部加载完，以实现获取目标网页的URL集下所有子链接。

步骤203，提取所述子链接下所述目标网页的页面源码。

具体地，提取URL集中所有包含的子链接对应的页面源码。

步骤204，获取所述目标网页对应的预设设计图中的预设图片数据，以及所述预设设计图的预设图片属性数据；

此步骤与步骤103相同，在此不再详述。

优选地，步骤204之后，还包括：

步骤A1，获取所述目标网页对应的预设设计图中的预设文本区域所在预设位置坐标和预设文本内容；

具体地，根据图像处理方法获取目标网页对应的预设设计图中预设文本区域所在位置、大小，并根据位置和大小确定本文区域的范围，提取其中包含的文本内容。

步骤A2，根据所述页面源码中的DOM接口，获取所述目标网页中的文本区域所在目标位置坐标；

步骤A3，将所述预设文本内容填充在所述目标网页中所述目标位置坐标对应的所述文本区域内。

具体地，通过无头浏览器获取所有DOM元素坐标及区域(设计图中文字内容与坐标为多个二元组，如<content,location>；DOM元素坐标及区域为多个二元组，如<name,location>，然后通过图片相似度算法裁剪设计图页面的完全无关区域(如设计图中的native区域、设计图仅为页面局部区域等情况)并通过依据DOM元素区域与文字数据内容区域是否真包含对DOM元素的文本内容自动填充。

其中，上述方法通过依据DOM元素区域与文字数据内容区域包含对DOM元素的文本内容自动填充。

当然，获取预设文本内容和目标网页中文本区域位置的方式不限于上述描述的方法，对于不同的无头浏览器所使用的方法不同，本发明实施例不加以限制。

步骤205，所述网页设计对比请求包括去除页面文字显示内容，根据所述页面源码中的DOM接口，获取所述目标网页的DOM元素及DOM父元素；

具体地，如果在网页设计对比请求中包含去除页面文字显示内容的要求，则首先使用目标网页对应的接口操作所有包含文字的DOM元素以及其父元素。

步骤206，根据所述DOM元素获取所述目标网页的文字显示色；

具体地，DOM元素是网页开发中文档对象模型的简称，包含网页页面组织结构的所有内容，以及对应每个结构组成部分的属性元素，其中文字显示色是目标网页对应各文字区域的DOM元素的组成部分之一。

步骤207，根据所述DOM父元素，获取所述目标网页的文字显示背景色；

具体地，获取DOM父元素的对应目标网页中文字区域对应的背景显示色。

步骤208，将所述文字显示色替换为所述文字显示背景色，得到去除了页面文字显示内容的第一页面源代码；

具体地，将上述获取的文字显示色替换为文字背景显示色，以达到去除页面文字显示的目的。

其中，去除页面文字显示内容后，由于对网页DOM元素中的文字区域部分的属性做出了修改，需要再次获取目标网页的所有源代码，定义为第一页面源代码。

步骤209，响应于所述第一页面源代码中存在变更数据，删除在所述第一页面源代码中与所述预设图片数据以及对应的预设图片属性数据不相关的无关图片数据以及对应的无关图片属性数据，所述变更数据包括导致所述第一页面源代码改变的数据；

具体地，进一步具体判断第一页面源代码中是否存在变更数据，变更数据是指一些源代码中会导致整体页面改变的数据，例如一些页面结构数据的改变会导致页面整体结构发生改变，页面渲染后的显示结构也会不同。

其中，如果第一页面源代码中存在上述描述的变更数据，则删除变更数据相关的图片数据以及对应的无关图片属性数据，即与预设图片数据以及对应的预设图片属性数据不相关的无关图片数据以及对应的无关图片属性数据。

步骤210，根据所述第一页面源代码，获取去除了页面文字显示内容的所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据。

具体地，第一页面源代码对应的是去除了页面文字显示内容的目标网页，所以进一步获取第一页面源代码中目标图片数据以及对应的目标图片属性数据。

其中，以无头浏览器为phantom javascript为例，利用其中设置的对象var page＝require('webpage')获取DOM或web网页的对象，通过它可以打开网页、接收网页内容、request、response上述源代码中包含的图像数据以及对应属性，获取其中上的目标图片数据，以及所述目标图片数据的目标图片属性数据。

步骤211，所述网页设计对比请求包括页面色度对比，通过二值化方法分别处理所述目标图片数据和所述预设图片数据中的色度，得到二值化目标图片数据和二值化预设图片数据；

具体地，如果网页设计对比请求中包括页面色度对比请求，则首先通过二值化分别处理目标图片数据和预设图片数据中，得到目标图片数据和预设图片数据的色度。

其中，通过依据用户自定义的配置对目标图片数据和预设图片数据进行基于图像二值化的自定义操作如忽略页面半透明遮罩层区域、页面色度等，得到目标图片数据和预设图片数据的色度。

其中，忽略页面半透明遮罩层区域也是属于色度处理的一种，对于色度获得方法不限于上述描述的方案，本发明实施例对此不加以限制。

可以理解地，通过依据用户自定义的配置对页面DOM元素或页面截图进行自动处理，例如基于DOM元素的自定义操作如忽略页面文字、边框、动画等、多个条件渲染DOM元素的组合情况穷举截图对比等，可以实现多维网页设计对比要求。所以，网页设计对比请求中包含的内容不限于上述描述的内容，针对不同具体请求都可以将网页评测操作自动化实现。

步骤212，通过预设感知哈希方法计算所述二值化目标图片数据和所述二值化预设图片数据之间的第一相似度，以及，所述目标图片属性数据与所述预设图片属性数据之间的第二相似度；

具体地，感知哈希方法是目前应用在搜索引擎中的以图搜图方法中使用的主要计算图像数据之间相似度的方法，主要将对比图像和待对比图像处理为相同尺寸，在转换为灰度图后，分别计算其灰度平均值，比较两者之间的灰度值，将比较结果组合在一起构成了一个64位的二进制整数，得到图片的指纹后，就可以对比不同的图片的指纹计算出两个图片数据之间的第一相似度，计算出64位中有多少位是不一样的。如果不相同的数据位数不超过5，就说明两张图片很相似,如果大于10,说明它们是两张不同的图片。

可以看出，根据感知哈希算法计算二值化目标图片数据与二值化预设图片数据，以及，目标图片属性数据与图片属性数据的图片指纹，进一步计算它们之间的第二相似度。

可以理解地，图片相似度计算方法不限于感知哈希方法，本发明实施例对相似度计算的具体方法不加以限制。

步骤212A，如果所述第一相似度和所述第二相似度大于或等于预设阈值，则网页设计对比成功，生成第一网页设计对比报告；

具体地，如上述根据感知哈希方法计算相似度，如果二值化目标图片数据二值化预设图片数据的指纹数据不超过5，则是相同图片。

进一步地，根据模式匹配方法，获得不超过5果二值化目标图片占所有二值化预设图片的比例，如果该比例等于或超过预设阈值，则网页设计对比确定为符合设计，生成网页设计对比报告。

步骤212B，如果所述第二相似度和所述第二相似度小于预设阈值，则标记最高所述相似度对应的目标网页，生成第二网页设计对比报告。

具体地，如上述根据感知哈希方法计算相似度，如果二值化目标图片数据二值化预设图片数据的指纹数据超过5，则是不相同图片。

进一步地，获得超过5的二值化目标图片占所有二值化预设图片的比例，如果该比例不超过预设阈值，则网页设计对比确定为不符合设计，生成网页设计对比报告，根据模式匹配方法在网页设计对比报告中标注具体区别数据所在位置，以供用户直观查看。

当然，预设阈值的设置由相关技术人员根据不同的相似性算法以及具体图像数据进行设置，本发明实施例不加以限制。

在本发明实施例中，接收针对目标网页的网页设计对比请求；根据所述网页设计对比请求，提取所述目标网页的页面源码；获取所述目标网页对应的预设设计图中的预设图片数据，以及所述预设设计图的预设图片属性数据；获取所述目标网页对应的预设设计图中的预设文本区域所在预设位置坐标和预设文本内容；根据所述页面源码中的DOM接口，获取所述目标网页中的文本区域所在目标位置坐标；将所述预设文本内容填充在所述目标网页中所述目标位置坐标对应的所述文本区域内。根据所述页面源码渲染并获取所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据；分别计算所述目标图片数据与所述预设图片数据之间的第一相似度，以及所述目标图片属性数据与所述预设图片属性数据之间的第二相似度；根据所述第一相似度和所述第二相似度生成网页设计对比报告。实现了不依赖人工对比以进行网页设计测试，并利用文字识别技术，实现自动将设计图文字数据填充至页面的有益效果。

实施例三

参照图3，示出了本发明的一种网页设计对比装置实施例的结构框图，具体可以包括如下模块：

网页设计对比请求接收模块301，用于接收针对目标网页的网页设计对比请求；

页面源码提取模块302，用于根据所述网页设计对比请求，提取所述目标网页的页面源码；

目标图片数据获取模块303，用于根据所述页面源码渲染并获取所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据；

预设图片信息获取模块304，用于获取所述目标网页对应的预设设计图中的预设图片数据，以及所述预设设计图的预设图片属性数据；

相似度计算模块305，用于分别计算所述目标图片数据与所述预设图片数据之间的第一相似度，以及所述目标图片属性数据与所述预设图片属性数据之间的第二相似度；

网页设计对比报告生成模块306，用于根据所述第一相似度和所述第二相似度生成网页设计对比报告。

在本发明实施例中，网页设计对比请求接收模块，用于接收针对目标网页的网页设计对比请求；页面源码提取模块，用于根据所述网页设计对比请求，提取所述目标网页的页面源码；预设图片信息获取模块，用于获取所述目标网页对应的预设设计图中的预设图片数据，以及所述预设设计图的预设图片属性数据；目标图片数据获取模块，用于根据所述页面源码渲染并获取所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据；相似度计算模块，用于分别计算所述目标图片数据与所述预设图片数据之间的第一相似度，以及所述目标图片属性数据与所述预设图片属性数据之间的第二相似度；网页设计对比报告生成模块，用于根据所述第一相似度和所述第二相似度生成网页设计对比报告。实现了不依赖人工对比以进行网页设计测试的有益效果。

实施例四

参照图4，示出了本发明的一种网页设计对比装置实施例的结构框图，具体可以包括如下模块：

网页设计对比请求接收模块301，用于接收针对目标网页的网页设计对比请求；

页面源码提取模块302，用于根据所述网页设计对比请求，提取所述目标网页的页面源码；

优选地，所述页面源码提取模块302，包括：

目标网页子链接遍历子模块，用于根据所述网页设计对比请求，以预设浏览工具遍历所述目标网页的URL集下所有子链接；

页面源码提取子模块，用于提取所述子链接下所述目标网页的页面源码。

目标图片数据获取模块303，用于根据所述页面源码渲染并获取所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据；

预设图片信息获取模块304，用于获取所述目标网页对应的预设设计图中的预设图片数据，以及所述预设设计图的预设图片属性数据；

优选地，还包括：

预设文本获取模块307，用于获取所述目标网页对应的预设设计图中的预设文本区域所在预设位置坐标和预设文本内容；

目标位置坐标获取模块308，用于根据所述页面源码中的DOM接口，获取所述目标网页中的文本区域所在目标位置坐标；

预设文本填充模块309，用于将所述预设文本内容填充在所述目标网页中所述目标位置坐标对应的所述文本区域内。

优选地，所述网页设计对比请求包括去除页面文字显示内容，所述目标图片数据获取模块303，包括：

DOM元素获取子模块，用于根据所述页面源码中的DOM接口，获取所述目标网页的DOM元素及DOM父元素；

文字显示色获取子模块，用于根据所述DOM元素获取所述目标网页的文字显示色；

文字显示背景色获取子模块，用于根据所述DOM父元素，获取所述目标网页的文字显示背景色；

第一页面源代码获取子模块，用于将所述文字显示色替换为所述文字显示背景色，得到去除了页面文字显示内容的第一页面源代码；

目标图片数据获取子模块，用于根据所述第一页面源代码，获取去除了页面文字显示内容的所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据。

优选地，所述目标图片数据获取模块304，还包括：

删除子模块，用于响应于所述第一页面源代码中存在变更数据，删除在所述第一页面源代码中与所述预设图片数据以及对应的预设图片属性数据不相关的无关图片数据以及对应的无关图片属性数据，所述变更数据包括导致所述第一页面源代码改变的数据；

相似度计算模块305，用于分别计算所述目标图片数据与所述预设图片数据之间的第一相似度，以及所述目标图片属性数据与所述预设图片属性数据之间的第二相似度；

优选地，所述网页设计对比请求包括页面色度对比，所述相似度计算模块305，包括：

二值化处理子模块，用于通过二值化方法分别处理所述目标图片数据和所述预设图片数据中的色度，得到二值化目标图片数据和二值化预设图片数据；

相似度计算子模块，用于通过预设感知哈希方法计算所述二值化目标图片数据和所述二值化预设图片数据之间的第一相似度，以及，所述目标图片属性数据与所述预设图片属性数据之间的第二相似度；

网页设计对比报告生成模块306，用于根据所述第一相似度和所述第二相似度生成网页设计对比报告。

优选地，网页设计对比报告生成模块306，包括：

第一网页设计对比报告生成子模块，用于如果所述第一相似度和所述第二相似度大于或等于预设阈值，则网页设计对比成功，生成第一网页设计对比报告；

第二网页设计对比报告生成子模块，用于如果所述第二相似度和所述第二相似度小于预设阈值，则标记最高所述相似度对应的目标网页，生成第二网页设计对比报告。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本发明实施例还提供一种设备，包括：处理器、存储器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如上述的一个或多个所述的网页设计对比。

本发明实施例还提供一种可读存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如所述的网页设计对比。

综上所述，在本发明实施例中，通过网页设计对比请求接收模块，用于接收针对目标网页的网页设计对比请求；页面源码提取模块，用于根据所述网页设计对比请求，提取所述目标网页的页面源码；预设图片信息获取模块，用于获取所述目标网页对应的预设设计图中的预设图片数据，以及所述预设设计图的预设图片属性数据；预设文本获取模块，用于获取所述目标网页对应的预设设计图中的预设文本区域所在预设位置坐标和预设文本内容；目标位置坐标获取模块，用于根据所述页面源码中的DOM接口，获取所述目标网页中的文本区域所在目标位置坐标；预设文本填充模块，用于将所述预设文本内容填充在所述目标网页中所述目标位置坐标对应的所述文本区域内。目标图片数据获取模块，用于根据所述页面源码渲染并获取所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据；相似度计算模块，用于分别计算所述目标图片数据与所述预设图片数据之间的第一相似度，以及所述目标图片属性数据与所述预设图片属性数据之间的第二相似度；网页设计对比报告生成模块，用于根据所述第一相似度和所述第二相似度生成网页设计对比报告。实现了不依赖人工对比以进行网页设计测试，并利用文字识别技术，实现自动将设计图文字数据填充至页面的有益效果。其具有如下优点：

一.利用图片相似度算法，实现批量确定页面与设计图的关联性，并对比其相似度；

二.利用图像处理方法与无头浏览器，实现个性化对比页面与设计图相似度；

三.利用文字识别技术，实现自动将设计图文字数据填充至页面；

四.利用模式匹配技术，实现支持自动遍历SPA(单页面应用)所有子链接获取页面截图。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本发明实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本发明实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明实施例是参照根据本发明实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本发明所提供的一种网页设计对比方法和一种网页设计对比装置，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (10)

1.一种网页设计对比方法，其特征在于，包括：

接收针对目标网页的网页设计对比请求；

根据所述网页设计对比请求，提取所述目标网页的页面源码；

根据所述页面源码渲染并获取所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据；

获取所述目标网页对应的预设设计图中的预设图片数据，以及所述预设设计图的预设图片属性数据；

分别计算所述目标图片数据与所述预设图片数据之间的第一相似度，以及所述目标图片属性数据与所述预设图片属性数据之间的第二相似度；

根据所述第一相似度和所述第二相似度生成网页设计对比报告。

2.根据权利要求1所述的方法，其特征在于，所述根据所述网页设计对比请求，提取所述目标网页的页面源码的步骤，包括：

根据所述网页设计对比请求，以预设浏览工具遍历所述目标网页的URL集下所有子链接；

提取所述子链接下所述目标网页的页面源码。

3.根据权利要求1所述的方法，所述网页设计对比请求包括去除页面文字显示内容，所述根据所述页面源码渲染并获取所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据的步骤，包括：

根据所述页面源码中的DOM接口，获取所述目标网页的DOM元素及DOM父元素；

根据所述DOM元素获取所述目标网页的文字显示色；

根据所述DOM父元素，获取所述目标网页的文字显示背景色；

将所述文字显示色替换为所述文字显示背景色，得到去除了页面文字显示内容的第一页面源代码；

根据所述第一页面源代码，获取去除了页面文字显示内容的所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据。

4.根据权利要求3所述的方法，在所述获取所述目标网页对应的预设设计图中的预设图片数据，以及所述预设设计图的预设图片属性数据的步骤之后，还包括：

响应于所述第一页面源代码中存在变更数据，而在执行根据所述第一页面源代码获取去除了页面文字显示内容的所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据的操作之前，

先删除在所述第一页面源代码中与所述预设图片数据以及对应的预设图片属性数据不相关的无关图片数据以及对应的无关图片属性数据，所述变更数据包括导致所述第一页面源代码改变的数据。

5.根据权利要求1所述的方法，所述网页设计对比请求包括页面色度对比，所述分别计算所述目标图片数据与所述预设图片数据之间的第一相似度，以及所述目标图片属性数据与所述预设图片属性数据之间的第二相似度的步骤，包括：

通过二值化方法分别处理所述目标图片数据和所述预设图片数据中的色度，得到二值化目标图片数据和二值化预设图片数据；

通过预设感知哈希方法计算所述二值化目标图片数据和所述二值化预设图片数据之间的第一相似度，以及，所述目标图片属性数据与所述预设图片属性数据之间的第二相似度。

6.根据权利要求5所述的方法，其特征在于，所述根据所述第一相似度和所述第二相似度生成网页设计对比报告的步骤，包括：

如果所述第一相似度和所述第二相似度大于或等于预设阈值，则网页设计对比成功，生成第一网页设计对比报告；

如果所述第二相似度和所述第二相似度小于预设阈值，则标记最高所述相似度对应的目标网页，生成第二网页设计对比报告。

7.根据权利要求1所述的方法，在所述获取所述目标网页对应的预设设计图中的预设图片数据，以及所述预设设计图的预设图片属性数据的步骤之后，还包括：

获取所述目标网页对应的预设设计图中的预设文本区域所在预设位置坐标和预设文本内容；

根据所述页面源码中的DOM接口，获取所述目标网页中的文本区域所在目标位置坐标；

将所述预设文本内容填充在所述目标网页中所述目标位置坐标对应的所述文本区域内。

8.一种网页设计对比装置，其特征在于，包括：

网页设计对比请求接收模块，用于接收针对目标网页的网页设计对比请求；

页面源码提取模块，用于根据所述网页设计对比请求，提取所述目标网页的页面源码；

目标图片数据获取模块，用于根据所述页面源码渲染并获取所述目标网页上的目标图片数据，以及所述目标图片数据的目标图片属性数据；

预设图片信息获取模块，用于获取所述目标网页对应的预设设计图中的预设图片数据，以及所述预设设计图的预设图片属性数据；

相似度计算模块，用于分别计算所述目标图片数据与所述预设图片数据之间的第一相似度，以及所述目标图片属性数据与所述预设图片属性数据之间的第二相似度；

网页设计对比报告生成模块，用于根据所述第一相似度和所述第二相似度生成网页设计对比报告。

9.一种设备，其特征在于，包括：

处理器、存储器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-7之任一项所述的网页设计对比方法。

10.一种可读存储介质，其特征在于，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够实现如权利要求1-7之任一项所述的测网页设计对比方法。