一种基于图像特征的网页效果图自动切图的方法

文档序号:8282445阅读:213来源:国知局
一种基于图像特征的网页效果图自动切图的方法
【技术领域】
[0001]本发明涉及一种使用图形识别算法对网页效果图进行自动切图的方法。
【背景技术】
[0002]目前,前端开发人员在对网页进行切图时,均采用手动切图的方式。这种方式不仅效率低下,而且,随着视网膜屏幕的大量普及,屏幕分辨率越来越高,已经达到了人眼识别的极限,采用手动切图的方法所产生的误差也越来越大。

【发明内容】

[0003]为了解决现有手动切图效率低下且存在误差的问题,本发明提供了一种图像识别算法,使得程序能够根据效果图的特征自动切图,并生成相应的代码和切片,从而提高前端开发人员切图的效率与精度。
[0004]本发明实现程序自动切图的技术方案是:程序根据已设定的间距和背景色扫描图片,当两个相临切片之间的距离与预设的间距一致时,标记此切片的位置坐标,并计算切片的宽度和高度值。对于两切片之间无间距的情况,程序自动将图像转为灰度图,并计算相临切片之间的色差,当色差超出设定范围时被认定为两个不同的切片,同时忽略掉渐变色(色差在设定范围内),然后计算目标切片的位置和宽高。最终根据目标切片的位置、宽度和高度导出目标切片,从而实现网页的自动化切图。
[0005]本发明的有益效果是:使用程序自动切图,避免手动的误差,并自动生成网页代码,从而提升切图的效率和精度。
【附图说明】
[0006]下面结合附图和实施例对本发明进一步说明。
[0007]图1是本发明针对切片之间有间距的情况进行间距识别的原理图。
[0008]图2是本发明针对切片之间无间距的情况进行色差识别的原理图。
[0009]图中1.切片,2.间距,3.色差。
【具体实施方式】
[0010]在图1所示的实施例中,有六个目标切片(1),程序扫描图片,当间距(2)超出已设定的最小距离时,计算切片(I)的位置、宽度和高度。导出目标切片(I)。
[0011]在图2所示的实施例中,有四个目标切片(I)且无间距(2),四个切片(I)的颜色均不同,颜色相同或相近被认为是一个切片(1),将图片转为灰度图,扫描图片,当相临两像素间的色差超出预定范围时标记为切分,否则为不切分,计算同一维度内切分的比例,当这个比例超出预定值时,程序认为是独立的切片(I)并将图片导出。
【主权项】
1.一种网页自动切图的方法,具有程序自动识别并导出切片生成网页的功能,其特征是:通过切片之间的间距或色差识别目标切片,当相临切片间的距离或色差超出预设值时,标记像素位置,并计算切片的宽度和高度,然后导出目标切片、生成网页。
2.根据权利要求1所述的自动切图方法,其特征是使用程序识别切片间距或识别切片间的色差来计算目标切片的位置和宽高,并导出切片。
3.根据权利要求1所述的自动切图方法,其特征是程序根据切片的位置和宽高,自动生成网页代码。
【专利摘要】本发明涉及一种网页自动切图的图形识别算法,它由间距识别和色差识别两种方法构成,其特征在于程序自动识别切片之间的距离或色差,当超出目标设定范围时标记切片的像素位置,并计算宽度和高度,然后根据位置、宽度和高度导出目标切片,然后生成网页代码,这样,不仅能够提网页切图的精度,还能提高前端开发人员的效率。
【IPC分类】G06F17-30, G06F9-44
【公开号】CN104598627
【申请号】CN201510057723
【发明人】杨星
【申请人】杨星
【公开日】2015年5月6日
【申请日】2015年2月4日
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1