[发明专利]页面检查方法、装置、设备及计算机可读存储介质

说明书

本公开提供一种页面检查方法、装置、设备及计算机可读存储介质，包括：生成与待检查的页面对应的页面截图；在所述页面截图中确定一指定区域，并根据指定区域的区域像素信息，在与页面对应的设计图中确定与指定区域对应的匹配区域；根据指定区域在页面截图中的位置信息、匹配区域在设计图中的位置信息，确定页面与设计图之间的差异。本公开提供的方法、装置、设备及计算机可读存储介质，能够通过比对页面截图中指定区域与设计图中匹配区域的方式，确定页面截图与设计图之间的量化的差异，从而能够更加准确的指导用户页面与设计图之间的差异，还能够避免用户通过肉眼观察确定二者差异产生的错误。

技术领域

本公开涉及图像处理技术，尤其涉及图像比对技术。

背景技术

目前，页面开发完成之后，需要由视觉工程师根据设计图检查前端页面样式。这一过程中，由于不同设备存在样式误差或设计图尺寸标注不清楚等因素，导致Web页面与视觉设计图存在误差，需要视觉工程师花费大量时间检查页面样式以及前端工程师重新开发调整页面样式，平均要历时2天左右的时间，对于复杂的业务花费的时间会更多。

为了便于工程师比对设计图与开发完的页面，现有技术中存在一种页面还原度检查工具PerfectPixel，但是，发明人发下，该工具存在以下问题：

PerfectPixel能够直观看到页面与设计图存在误差，但无法提供具体的误差信息。

发明内容

本公开提供了一种页面检查方法、装置、设备及计算机可读存储介质，以解决现有技术中的页面检查工具存在无法提供具体的误差信息的问题。

本公开第一个方面提供了一种页面检查方法，包括：

生成与待检查的页面对应的页面截图；

在所述页面截图中确定一指定区域，并在与所述页面对应的设计图中确定与所述指定区域对应的匹配区域；

根据所述页面截图中的指定区域、所述设计图中的匹配区域，确定页面与设计图之间的差异。

在一种可选的实施例中，还包括：

获取所述设计图中包括的第二像素信息；

所述根据所述指定区域的区域像素信息，在与所述页面对应的设计图中确定与所述指定区域对应的匹配区域，包括：

根据所述指定区域的区域像素信息、所述第二像素信息，在与所述页面对应的设计图中确定与所述指定区域对应的匹配区域。

本可选的实施例中，通过预先读取设计图的第二像素信息，能够直接比对区域像素信息与第二像素信息，从而快速的找到匹配区域，而无需对设计图本身进行处理，能够提高处理速度，降低数据处理量。

在一种可选的实施例中，所述根据所述页面截图中的指定区域、所述设计图中的匹配区域，确定页面与设计图之间的差异，包括：

根据所述指定区域在所述页面截图中的位置信息、所述匹配区域在所述设计图中的位置信息确定位置差值，并根据所述位置差值确定页面与设计图之间的差异。

本可选的实施例中，可以通过比对指定区域与匹配区域的方式，确定页面与设计图之间该区域的差异，进而使用户获知量化的页面与设计图之间的差异。

在一种可选的实施例中，所述在所述页面截图中确定一指定区域，包括：

响应作用于所述页面截图的点击操作，确定点击位置所属的指定区域。本可选的实施例中，可以响应用户的点击操作确定指定区域，从而可以基于该点击操作触发比对页面截图与设计图之间差异的流程，这种方式仅需要简便操作就能够得到比对结果，能够提高用户体验。

在一种可选的实施例中，所述根据所述页面截图中的指定区域、所述设计图中的匹配区域，确定页面与设计图之间的差异，包括：