[发明专利]一种图像对比方法和装置

说明书

本发明公开了一种图像对比方法，获取对预设第一图像的切图进行编程产生的预览图像；根据预设图像处理规则对所述第一图像进行处理，得到包含所述第一图像预设图像特征的第二图像；叠加所述预览图像和第二图像，将所述第二图像中的所述预设图像特征叠加到所述预览图像对应位置，得到第三图像，并显示所述第三图像。本发明公开了一种图像对比装置、存储介质。

技术领域

本发明涉及网页(Web)应用开发领域，尤其涉及一种图像对比方法和装置。

背景技术

切图是指将用户界面(UI，User Interface)设计图等设计稿切成便于制作成页面的图片，并完成超文本标记语言(html，HyperText Markup Language)+层叠样式表(css，Cascading Style Sheets)布局的静态网页界面，有利于交互，形成良好的视觉感。在网页设计过程中通常需要把编程后的网页界面与设计稿进行对比，以确定网页界面与设计稿一致；

目前，采用的网页界面对比方法都是在开发后通过切换窗口，或双屏显示等方式观察编程后的网页界面与UI设计图的差异。在开发过程中，很难实时对比出切图与UI设计图的结构一致性，如在开发结束后再进行网页界面的调整效率十分低下。

因此，如何能实现编程网页界面与设计图的实时高精度对比，提高开发效率，是亟待解决的问题。

发明内容

有鉴于此，本发明实施例图像对比方法，能实现编程网页界面与设计图的实时高精度对比，提高开发效率。

为达到上述目的，本发明实施例的技术方案是这样实现的：

本发明实施例提供了一种图像对比方法，所述方法包括：

获取对预设第一图像的切图进行编程产生的预览图像；

根据预设图像处理规则对所述第一图像进行处理，得到包含所述第一图像预设图像特征的第二图像；

叠加所述预览图像和第二图像，将所述第二图像中的所述预设图像特征叠加到所述预览图像对应位置，得到第三图像，并显示所述第三图像。

上述方案中，所述根据预设图像处理规则对所述第一图像进行处理，包括：

调整所述第一图像的透明度至预设透明值，和/或，去除所述第一图像中预设区域的预设颜色。

上述方案中，所述叠加所述预览图像和第二图像，包括：

根据预览图像上的第一预设定位点和所述第二图像上的第二预设定位点，叠加所述预览图像和第二图像。

上述方案中，所述叠加所述预览图像和第二图像后，所述方法还包括：

获取位移指令，根据所述位移指令移动所述第二图像。

本发明实施例还提供了一种图像对比装置，所述装置包括：获取模块、处理模块和叠加模块；其中，

所述获取模块，用于获取对预设第一图像的切图进行编程产生的预览图像；

所述处理模块，用于根据预设图像处理规则对所述第一图像进行处理，得到包含所述第一图像预设图像特征的第二图像；

所述叠加模块，用于叠加所述预览图像和第二图像，将所述第二图像中的所述预设图像特征叠加到所述预览图像对应位置，得到第三图像，并显示所述第三图像。

上述方案中，所述处理模块，具体用于：

调整所述第一图像的透明度至预设透明值，和/或，去除所述第一图像中预设区域的预设颜色。

上述方案中，所述叠加模块，具体用于：