[发明专利]一种基于图像特征的网页效果图自动切图的方法

说明书

技术领域

本发明涉及一种使用图形识别算法对网页效果图进行自动切图的方法。

背景技术

目前，前端开发人员在对网页进行切图时，均采用手动切图的方式。这种方式不仅效率低下，而且，随着视网膜屏幕的大量普及，屏幕分辨率越来越高，已经达到了人眼识别的极限，采用手动切图的方法所产生的误差也越来越大。

发明内容

为了解决现有手动切图效率低下且存在误差的问题，本发明提供了一种图像识别算法，使得程序能够根据效果图的特征自动切图，并生成相应的代码和切片，从而提高前端开发人员切图的效率与精度。

本发明实现程序自动切图的技术方案是：程序根据已设定的间距和背景色扫描图片，当两个相临切片之间的距离与预设的间距一致时，标记此切片的位置坐标，并计算切片的宽度和高度值。对于两切片之间无间距的情况，程序自动将图像转为灰度图，并计算相临切片之间的色差，当色差超出设定范围时被认定为两个不同的切片，同时忽略掉渐变色（色差在设定范围内），然后计算目标切片的位置和宽高。最终根据目标切片的位置、宽度和高度导出目标切片，从而实现网页的自动化切图。

本发明的有益效果是：使用程序自动切图，避免手动的误差，并自动生成网页代码，从而提升切图的效率和精度。

附图说明

下面结合附图和实施例对本发明进一步说明。

图1是本发明针对切片之间有间距的情况进行间距识别的原理图。

图2是本发明针对切片之间无间距的情况进行色差识别的原理图。

图中1.切片，2.间距，3.色差。

具体实施方式

在图1所示的实施例中，有六个目标切片（1），程序扫描图片，当间距（2）超出已设定的最小距离时，计算切片（1）的位置、宽度和高度。导出目标切片（1）。

在图2所示的实施例中，有四个目标切片（1）且无间距（2），四个切片（1）的颜色均不同，颜色相同或相近被认为是一个切片（1），将图片转为灰度图，扫描图片，当相临两像素间的色差超出预定范围时标记为切分，否则为不切分，计算同一维度内切分的比例，当这个比例超出预定值时，程序认为是独立的切片（1）并将图片导出。