CN105183478B - 一种基于颜色传递的网页重构方法及其装置 - Google Patents
一种基于颜色传递的网页重构方法及其装置 Download PDFInfo
- Publication number
- CN105183478B CN105183478B CN201510579884.5A CN201510579884A CN105183478B CN 105183478 B CN105183478 B CN 105183478B CN 201510579884 A CN201510579884 A CN 201510579884A CN 105183478 B CN105183478 B CN 105183478B
- Authority
- CN
- China
- Prior art keywords
- webpage
- result
- color
- color transfer
- elements
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000012546 transfer Methods 0.000 title claims abstract description 81
- 238000000034 method Methods 0.000 title claims abstract description 62
- 238000011156 evaluation Methods 0.000 claims abstract description 37
- 238000012937 correction Methods 0.000 claims abstract description 23
- 238000005070 sampling Methods 0.000 claims description 14
- 230000008878 coupling Effects 0.000 claims description 13
- 238000010168 coupling process Methods 0.000 claims description 13
- 238000005859 coupling reaction Methods 0.000 claims description 13
- 238000007689 inspection Methods 0.000 claims description 11
- 235000013399 edible fruits Nutrition 0.000 claims description 3
- 238000013461 design Methods 0.000 description 14
- 230000008569 process Effects 0.000 description 8
- 208000036693 Color-vision disease Diseases 0.000 description 6
- 201000007254 color blindness Diseases 0.000 description 6
- 230000000694 effects Effects 0.000 description 6
- 239000003086 colorant Substances 0.000 description 5
- 238000010586 diagram Methods 0.000 description 5
- 230000003044 adaptive effect Effects 0.000 description 4
- 239000000203 mixture Substances 0.000 description 4
- 238000000605 extraction Methods 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 230000008447 perception Effects 0.000 description 3
- 238000011160 research Methods 0.000 description 3
- 230000006399 behavior Effects 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 2
- 238000010276 construction Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000010365 information processing Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000003860 storage Methods 0.000 description 2
- 241000208340 Araliaceae Species 0.000 description 1
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 description 1
- 235000003140 Panax quinquefolius Nutrition 0.000 description 1
- 230000002547 anomalous effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000000295 complement effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000007812 deficiency Effects 0.000 description 1
- 238000002845 discoloration Methods 0.000 description 1
- 238000009826 distribution Methods 0.000 description 1
- 239000000284 extract Substances 0.000 description 1
- 235000008434 ginseng Nutrition 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- SBNFWQZLDJGRLK-UHFFFAOYSA-N phenothrin Chemical group CC1(C)C(C=C(C)C)C1C(=O)OCC1=CC=CC(OC=2C=CC=CC=2)=C1 SBNFWQZLDJGRLK-UHFFFAOYSA-N 0.000 description 1
- 238000002360 preparation method Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000001915 proofreading effect Effects 0.000 description 1
- 229910052701 rubidium Inorganic materials 0.000 description 1
- IGLNJRXAVVLDKE-UHFFFAOYSA-N rubidium atom Chemical compound [Rb] IGLNJRXAVVLDKE-UHFFFAOYSA-N 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明实施例公开了一种基于颜色传递的网页重构方法及其装置，其中，该方法包括：获取任意两个网页的网页元素信息，对所述网页元素信息进行聚类评估，获得评估结果；获取所述任意两个网页的分块，根据所述评估结果对所述任意两个网页对应的分块进行颜色传递，获得颜色传递结果；对所述颜色传递结果进行校正，并根据校正结果进行网页重构。在本发明实施例中，通过用户指定待重构的网页(目标网页)和用户想要重构成的参考网页，利用本文的重构方法，可以使得重构后的网页具有参考网页的颜色特征，又保证了目标网页元素的对比度和可读性，简化设计人员在配色部分的工作。
Description
技术领域
本发明涉及网页构建技术领域，尤其涉及一种基于颜色传递的网页重构方法及其装置。
背景技术
颜色作为用户对于一个网站观感的最直观感受，拥有一个好的配色对一个网站的建设是相当重要的。随着各种网页设计美学的普及，如何形成良好的网页配色成为目前网页设计的一个重点。颜色传递方法可以通过一系列的图像处理使得目标图片具有参考图片的颜色特征，利用颜色传递的这一特性可以对网页颜色重构进行指导：通过选取合适的参考网页，使得目标网页具有参考网页的颜色特征，达到配色要求。该方法作为图形学中经典的图像色彩迁移方法，可以将参考网页的色彩特征传递到目标网页中，使得目标网页拥有参考网页的色彩特征。传统的颜色传递对图片的相似度要求比较高，这对于参考网页的选择有很大的局限性，如果参考网页与目标网页的结构稍有不同，一般的颜色传递得出的传递效果都不会太好。
目前国内外有关网页重构的研究主要面向的是基于用户操作习惯的自适应或页面友好性优化的网页重构，或是针对不同显示设备的尺寸自适应网页重构，有关网页色彩的研究主要是从色彩来分析用户对网页的印象及观感，或是针对特定用户如色盲用户的网页配色的研究。
基于用户体验的网页重构方法的思想是结合用户的浏览习惯或用户本身的特征，将网页进行重构，使得重构的网页更贴合用户的使用习惯或其自身的操作特征。目前热门的基于用户体验的网页重构方法主要分为：基于用户行为预测的网页重构方法，基于用户体验预测的网页重构方法，基于用户交互障碍自适应的网页重构方法。
1、基于用户行为预测的网页重构方法
将整个网站通过基于状态图的方法分解成树形结构,根据作者提出的算法预测出用户在某个节点的状态下，下一步最有可能访问的节点；然后抽取出这个节点的DOM树结构，将这个节点作为用户下一步操作的第一个显示页面。
虽然实现起来简便直观，但其并没有考虑到页面中的非交互性元素如图片、文本、影像等，这样一方面破坏了原有的网页结构，另一方面也遗漏掉了一些本应该参与显示的元素。
2、基于用户交互体验预测的网页重构方法
用户对于网站的体验在很大程度上受到其对网页第一印象的影响。 Reinecke等人提出了一种通过计算网页色彩复杂度，建立一个预测用户对网页第一印象模型的网页色彩评估方法，从网页色彩的角度提出了一种提升用户对于网页第一印象的方法。他们的方法首先将网页从彩度和视觉复杂度两个方面进行分析，预测出让大多素用户对网页印象好的界面。该方案成本高，而且灵活性不强。
3、基于用户交互障碍自适应的网页重构方法
这种方法主要针对色盲人群的网页颜色重构方法。该方法相比于传统的面向色盲用户的网页色彩设计而言具有更真实的观感。他们将用户对于色彩的主管因素考虑进来，建立了一种模拟用户对于色彩主观反映的模型。他们的方法首先抽取出CSS文件中所定义的颜色。之后，针对色盲、色弱患者的特点，作者提出将CSS文件中提取出来的色彩用二原色-三原色等效平面上的色彩进行替换。在获取了每个可替换颜色集的总代价之后，文章使用两次爬山算法得出最优解。通过上述的源色彩-替换色彩的映射生成步骤后，源CSS文件中的每个色彩值将被替换成十六进制的六位替换色彩值。新生成的网页将具备替换色彩的颜色特征，从而达到适应于色盲用户的目的。这种现有方法更适合于色盲用户，但这种方法的局限性在于现代网页设计中，有很大一部分的色彩是由图片直接作为背景而实现的，并没有在 CSS文件中定义，导致实际重构的效果并不好。而且，这种重构方法仅适用于特定的人群，不具有广泛性。
发明内容
本发明的目的在于克服现有技术的不足，本发明提供了一种基于颜色传递的网页重构方法及其装置，可以减少大部分元素的配色设计，极大地缩短了整个设计周期，而且减少了对用户对色彩方面的专业要求。
为了解决上述问题，本发明提出了一种基于颜色传递的网页重构方法，所述方法包括：
获取任意两个网页的网页元素信息，对所述网页元素信息进行聚类评估，获得评估结果；
获取所述任意两个网页的分块，根据所述评估结果对所述任意两个网页对应的分块进行颜色传递，获得颜色传递结果；
对所述颜色传递结果进行校正，并根据校正结果进行网页重构。
优选地，所述对所述网页元素信息进行聚类评估，获得评估结果的步骤包括：
对单个网页的网页元素信息进行聚类评估，获得每个网页的聚类评估结果；
对不同网页的聚类评估结果进行页间匹配评估。
优选地，所述对所述颜色传递结果进行校正的步骤，包括：
检查结果元素中是否含有特殊元素，若含有，检查结果元素对应的参考网页的匹配元素中是否含有同类特殊元素的定义，若有，覆盖结果元素，否则用目标网页中的定义覆盖结果元素；
若不含有特殊元素，则从结果元素中进行多次色彩随机抽样，取抽样结果均值avgRes；
从匹配元素中取得对应元素的CSS色彩定义，记为standard；
对比avgRes与standard的偏差，若偏差大于5％，用standard覆盖传递结果，否则保留原结果。
相应地，本发明还提供一种基于颜色传递的网页重构装置，所述装置包括：
聚类评估模块，用于获取任意两个网页的网页元素信息，对所述网页元素信息进行聚类评估，获得评估结果；
颜色传递模块，用于获取所述任意两个网页的分块，根据所述评估结果对所述任意两个网页对应的分块进行颜色传递，获得颜色传递结果；
网页重构模块，用于对所述颜色传递结果进行校正，并根据校正结果进行网页重构。
优选地，所述聚类评估模块包括：
聚类单元，用于对单个网页的网页元素信息进行聚类评估，获得每个网页的聚类评估结果；
评估单元，用于对不同网页的聚类评估结果进行页间匹配评估。
优选地，所述网页重构模块包括：
校正单元，用于对所述颜色传递结果进行校正；
重构单元，用于根据校正结果进行网页重构。
优选地，所述校正单元还用于检查结果元素中是否含有特殊元素，若含有，检查结果元素对应的参考网页的匹配元素中是否含有同类特殊元素的定义，若有，覆盖结果元素，否则用目标网页中的定义覆盖结果元素；若不含有特殊元素，则从结果元素中进行多次色彩随机抽样，取抽样结果均值avgRes；从匹配元素中取得对应元素的CSS色彩定义，记为standard；对比avgRes与standard的偏差，若偏差大于5％，用standard覆盖传递结果，否则保留原结果。
在本发明实施例中，通过用户指定待重构的网页(目标网页)和用户想要重构成的参考网页，利用本文的重构方法，可以使得重构后的网页具有参考网页的颜色特征，又保证了目标网页元素的对比度和可读性，简化设计人员在配色部分的工作。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。
图1是本发明实施例的基于颜色传递的网页重构方法的流程示意图；
图2是本发明实施例中元素的邻居示意图；
图3是本发明实施例中网页元素聚类的过程示意图；
图4是本发明实施例中元素匹配评估的过程示意图；
图5是本发明实施例中网页元素传递校正的过程示意图；
图6是本发明实施例的基于颜色传递的网页重构装置的结构组成示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
图1是本发明实施例的基于颜色传递的网页重构方法的流程示意图，如图1所示，该方法包括：
S101，获取任意两个网页的网页元素信息，对网页元素信息进行聚类评估，获得评估结果；
S102，获取任意两个网页的分块，根据评估结果对任意两个网页对应的分块进行颜色传递，获得颜色传递结果；
S103，对颜色传递结果进行校正，并根据校正结果进行网页重构。
在本发明实施例中，网页元素信息主要包括元素的位置(x,y坐标)、宽度与高度、类型、父元素ID等等。采用了CSSBox工具用来获取网页元素信息并存入数据库中，方便之后的网页信息处理模块对网页信息处理。
S101进一步包括：
对单个网页的网页元素信息进行聚类评估，获得每个网页的聚类评估结果；
对不同网页的聚类评估结果进行页间匹配评估。
在获取到网页元素信息后，首先对网页内的元素进行聚类评估。这样对于同一类的元素，只需要进行统一的评估即可，通过聚类可以减少后续的匹配评估的计算代价。此外，元素的聚类也可用于后续的校对工作中。
对于元素的聚类，通过比较元素的类型、大小、元素的邻居，HTML 结构来实现聚类(详见表1)。
表1两个元素的聚类条件表
元素的类型对比是通过比较两个元素的HTML定义中所属的HTML类型是否相同实现的，如果两个元素的类型不同，两者不属于同一聚类，如果元素属于特殊类型如img,text,link等，也不参与聚类。将类型相同的元素标记为EtoBeClustered供后续聚类评估。
EtoBeClustered＝{e|e.type≠(text,img,link),e∈E}
元素的邻居：对于两个元素a和b，a.position＝(xa,ya)， b.position＝(xb,yb)，a和b在同一X轴(或者Y轴)上，而且两者间没有其它元素的话，则a和b是X(或Y)上的邻居，记为neighbor(a,b)。
(({e|((yb＜e.position.y＜ya)∨(ya＜e.position.y＜yb))}＝φ)
∧(xa＝xb)∨((ya＝yb)
∧{e|((xb＜e.position.x＜xa)∨(xa＜e.position.x＜xb))}＝φ)
→neighbor(a,b)
相应的，按照A,B的相对位置可以分为上下左右四个方向的邻居，如图2所示。
对于两个待评估的元素而言，若两者具有相似的邻居分布(包括邻居的大小、类型、位置)，这两者的聚类程度更高。
元素的大小指的是两个待聚类评估的元素之间的长与宽的比较，若两个元素长宽均相同，则两个元素在大小条件下的评分是满分。
元素的色彩对比是通过抽取元素所在的CSS文件中background:color 的定义来进行的对比。由于网页设计的特点，同一聚类中的元素的背景色不会相差太大，因此可以对比两个元素的RGB各通道值间的欧氏距离来判断两个元素背景色彩的相似度。规定阈值为10，距离在10内的认为两个元素在色彩上的评分是100分，超过10则为0分。
元素的HTML DOM树中的父节点是否一样，如果一样的话，两个元素属于同一聚类的可能性较大；如果两个元素的父节点不同，则对比两个元素的父节点是否同类，以及对比兄弟节点的相似度。除此之外，考虑到后续重构部分是对元素的CSS文件作修改的，因此如果两个元素属于同一个 CSS类，则无论前述条件下的判断如何，都认为这两个元素属于同一聚类，应采用一致操作。
网页元素的聚类流程如下：
步骤1：定义聚类评估得分score＝0，判断两个网页元素的所在的CSS 类是否相同，如果CSS类相同，score＝100，跳转到STEP 7,否则，执行步骤2；
步骤2：定义类型评估得分tScore＝0，tScore＝100，否则，tScore＝0；
步骤3:定义尺寸评估得分sScore＝0，利用前述的尺寸评估方法得到 sScore；
步骤4:HTML评估得分hScore＝0，对比两个元素的parentID对应元素的类型、大小，根据相似度得出hScore；
步骤5:利用WebpageElemUtil中的邻居评估方法得到邻居评估得分 nScore；
步骤6:利用score＝0.2*tScore+0.4*sScore+0.1*hScore+0.1*nScore计算出聚类评估总分；
步骤7:判断最终得分是否小于60，若小于60，则两个元素不属于同一聚类，若不小于60，则两个元素属于同一聚类。
根据聚类结果进行匹配评估，具体评估流程为：首先比较两个待评估元素的类型是否属于同类。从大小比例、位置、HTML结构以及邻居等四个方面对两个元素的相似度进行匹配评估。
由于匹配算法对于每一个聚类中的元素是看作相同的，因此在聚类时，每个条件都是严格的。理论上说应该保证每个元素严格符合每个条件才能聚类，考虑到HTML设计时设计人员的代码误差，定义数值比较下的误差值不能大于5％，在5％以内则以偏差量来给予其评分，这个值是通过以往实验的经验得出的。
具体评分的计算方法为：
其中，offset的计算方式为：
即表示值x'与值x的偏差。
在通过上述的评估后，根据每个条件下的评分进行综合评估，最后给出两个元素聚类评估结果。整体流程如图3所示。
在对每个网页的元素完成聚类后，对两个网页进行匹配评估，在进行匹配评估时，需要同时考虑每个聚类中的单个元素间的匹配评估，和以聚类为单位进行的整体评估，评估结果取两种情况下较高的得分。
根据元素的特征抽取出的条件提取出匹配评估条件，并对每个条件进行定义，其中元素的邻居判断方法与聚类中的邻居判断方法相同，各个条件的定义如表2所示。
表2两个元素的匹配评估条件表
元素的类型：通过对网页元素的统计发现，一般从主观上认为可以匹配得上的元素在很多情况下均具有相似的类型，将常见且具有重构可能的 HTML设计中的类型提取出来按相似度聚类得到了表3，其中，如果两个元素类型是特殊类则必须相同才能匹配。同一聚类中的类型是相似的，不同聚类中的类型在类型匹配评估时匹配度很低。
表3元素的类型聚类表
| 类型聚类 | 类型 |
| 功能类 | <button>,<link> |
| 容器类 | <div>,<span>,<nav，<section>,<aside> |
| 列表类 | <list>,<ul>,<ol> |
| 表单类 | <form>,<table> |
| 特殊类 | <header>,<footer> |
在考虑两个元素是否可进行颜色传递时，需要考虑两个元素的大小差距。在比较两个元素的大小时，一方面比较两个元素的长宽是否相近；另一方面，在其他条件得分均较高而元素长宽大小差距较大时，比较两个元素的长宽比例是否相近,具体比较公式为：
其中，width',height'指的是目标网页的元素宽度和长度，width0,height0指的是参考网页的元素宽度和长度；元素的大小是决定是否进行颜色传递的主要因素。
聚类算法还需要比较元素的HTML结构，元素的HTML结构一方面指的是元素所在DOM树中节点的位置以及DOM树的结构，在计算两个元素的匹配度时候，如果两个元素的DOM树结构越类似，两者在结构上的得分越高；另一方面，元素的HTML结构也指元素父节点的类型如<div>,<li>等。进行匹配评估时，以两个元素的DOM结构匹配评估为主。
在考虑影响元素分类的条件时，元素的位置关系是不可忽略的因素。元素的位置可以通过其在页面中以左上角为基点以右、下为正方向的坐标轴中的绝对坐标值确定，也可以通过元素与标志性元素如页头，大标题等元素的相对位置来确定。如果两个元素在各自的页面中具有相近的位置，则两者的匹配程度较高，具体的比较方式为：
posComp＝50*(x'/x0+y'/y0)
通过上述的匹配评估步骤后，可以得出从目标网页到源网页的颜色传递匹配元素对，将匹配好的元素信息存入数据库中，供后面的颜色传递算法使用。整个评估步骤为：首先比较两个待评估元素的类型是否属于同类。之后从大小比例，位置，HTML结构以及邻居等四个方面对两个元素的相似度进行匹配评估，具体流程如图4所示。
在对目标网页和源网页的元素进行匹配评估后，将匹配的结果存入数据库中，供后续颜色传递调用。
在将两个网页的元素进行完匹配评估后，即可对网页进行颜色传递。由于本文采用的颜色传递方法是直接针对图片进行操作，故而需要先获取两个网页的截图。之后根据匹配信息对截图的对应区域进行提取，将提取后的图片进行颜色传递。
颜色传递算法的选择主要考虑以下几个因素：
选择颜色传递算法首先考虑的是时间复杂度，由于基于颜色传递的网页重构方法是轻量级的方法，对资源的依赖不宜过大，而且由于在网页重构的过程中还有颜色校正的步骤，因此对于运算速度快而且可以产生较能接受的传递结果的颜色传递算法，相比运算速度慢而结果好的算法而言更适合于网页重构方法。
在颜色传递时，如果两个图片的色彩差距相当大时，可能产生传递结果的色彩与实际欲传递结果的色彩相差很大的情况，虽然可以在校正步骤中解决失真的情况，但是校正步骤耗时长，计算代价大，应尽可能减少校正步骤，因此在选择颜色传递算法时，如果对网页传递产生较大色彩失真的算法不应采纳。
如果待传递的两个图片结构差距很大时，容易产生图片噪声，图片噪声主要表现在结果图出现纹理上的模糊、多出不期望的色彩、结果图结构改变等，因此采用的颜色传递算法应尽量减少噪声的产生。
有的颜色传递算法虽然能够产生较好的传递结果，但是一般这类算法要求较多次的迭代以及输入参数，从用户使用的角度而言，应尽可能地简化颜色传递的步骤。
通过对比图片失真情况和图像噪声的大小，采用基于颜色统计的颜色传递算法，因为它比较适合于网页元素分块截图间的颜色传递，而且匹配好了的网页元素具有结构相似，色彩分布简单的特点，用该算法可以得到较好的传递效果而且操作时间快。
虽然颜色传递可以对整幅网页的截图产生一个传递结果，但是从实际操作来看，直接以整幅图片为单位来进行颜色传递的话产生出的效果并不好。但是从实际的网页设计中发现，除了以背景图片作为图片色彩表现的情况外，一般的单个网页元素以background形式来表现的话其色彩是单一的，因此考虑将网页截图按照单个元素为单位进行颜色传递。通过实际操作发现，这样的传递方式效果较好。
进一步地，对颜色传递结果进行校正的步骤，包括：
检查结果元素中是否含有特殊元素，若含有，检查结果元素对应的参考网页的匹配元素中是否含有同类特殊元素的定义，若有，覆盖结果元素，否则用目标网页中的定义覆盖结果元素；
若不含有特殊元素，则从结果元素中进行多次色彩随机抽样，取抽样结果均值avgRes；
从匹配元素中取得对应元素的CSS色彩定义，记为standard；
对比avgRes与standard的偏差，若偏差大于5％，用standard覆盖传递结果，否则保留原结果。
具体实施中，在通过了两个网页截图间的颜色传递后，将传递结果传输到网页重构模块中，网页重构模块的功能主要包括对颜色传递结果的校正与根据校正结果的网页重构。在重构的时候主要需要注意两个问题：首先，特殊HTML元素不参与颜色传递，直接借鉴参考网页的元素定义；其次，被覆盖的元素变色后应该还原。考虑到颜色传递结果本身的误差以及网页本身包含的特殊元素，需要对颜色传递结果进行校对。校正步骤主要包括传递结果的校正和特殊元素的校正。校正过程如图5所示。
针对传递结果，首先从参考网页获取对应匹配元素的CSS色彩定义作为标准，之后对传递结果中的元素色彩进行多次随机取样，将取样平均值与标准值进行对比，如果误差值在5％以内则认为传递结果正确，否则将标准值作为最终结果值。其次是对于特殊元素的校正，首先查看传递结果中的元素是否含有特殊元素，如果含有特殊元素的话，查看匹配元素中有关该类特殊元素的定义，若匹配元素中没有该类特殊元素的定义，则保留原始的特殊元素定义，既不做颜色传递的修改也不用参考网页的元素定义覆盖；若匹配元素中有该类元素的定义，则采用匹配元素中的定义作为最终结果。
由于网页元素的设计通常具有只会对一个元素定义一种背景色的特性，对于每个传递后的网页元素只需要获取到修改后的色彩结果对原始的色彩定义进行覆盖即可，而不用担心会出现多个色彩同时覆盖到一个元素的情况，因此对于结果图而言，只需要对相应的元素区域进行抽样取色即为待重构成为的色彩。
考虑到网页设计中可能出现元素重叠导致在颜色传递时出现传递错误的问题，对于每个元素的色彩需要通过随机取样的方式抽取五份色彩，找出其中频率较大的色彩，并与同一聚类中的其他元素找出的色彩对比，取频率最高的作为这个聚类中所有元素的重构色彩。这是因为一方面有可能因为元素重叠导致原来的元素出现了多种色彩导致单次取样的结果不准，另一方面原始的元素本身有可能包含其他色彩如字体的颜色等，也需要采用随机抽样来避免。
对于特殊的HTML元素，采用的重构方式是直接调用参考网页中相应的元素的CSS色彩定义。如果参考网页中没有找到相应的元素，则查看重构后的色彩与元素的色彩是否相近，如果相近的话则将元素的色彩改为重构色彩的补色，否则保持原有元素的色彩不变。
相应地，本发明实施例还提供一种基于颜色传递的网页重构装置，如图6所示，该装置包括：
聚类评估模块1，用于获取任意两个网页的网页元素信息，对网页元素信息进行聚类评估，获得评估结果；
颜色传递模块2，用于获取任意两个网页的分块，根据评估结果对任意两个网页对应的分块进行颜色传递，获得颜色传递结果；
网页重构模块3，用于对颜色传递结果进行校正，并根据校正结果进行网页重构。
进一步地，聚类评估模块1包括：
聚类单元，用于对单个网页的网页元素信息进行聚类评估，获得每个网页的聚类评估结果；
评估单元，用于对不同网页的聚类评估结果进行页间匹配评估。
网页重构模块3包括：
校正单元，用于对颜色传递结果进行校正；
重构单元，用于根据校正结果进行网页重构。
校正单元还用于检查结果元素中是否含有特殊元素，若含有，检查结果元素对应的参考网页的匹配元素中是否含有同类特殊元素的定义，若有，覆盖结果元素，否则用目标网页中的定义覆盖结果元素；若不含有特殊元素，则从结果元素中进行多次色彩随机抽样，取抽样结果均值avgRes；从匹配元素中取得对应元素的CSS色彩定义，记为standard；对比avgRes与 standard的偏差，若偏差大于5％，用standard覆盖传递结果，否则保留原结果。
本发明的装置实施例中各功能模块的功能可参见本发明方法实施例中的流程处理，这里不再赘述。
通过输入元素信息、网页截图、网页CSS文件，对输入的元素信息进行页内元素聚类评估和页间元素匹配评估，与处理得到的网页分块截图进行颜色传递，再与输入的网页CSS文件进行颜色校正，校正完成之后进行网页重构；一方面降低了网页设计人员对配色知识的要求，另一方面从直观的角度将目标网页的配色风格应用于目标网页上，产生目标网页的配色风格与目标网页相近的效果。用户可以直观地选择参考网页，使得用户自己的网页具有参考网页的配色特征。整个过程中用户只需选择与自己的网页结构相近的参考网页，对自己的网页和参考网页进行截图，即可进行网页重构，整个过程不需要用户进行其他操作即可获取重构结果，而且操作简单，运算速度快，在两个网页结构相似时，产生的重构结果尤为明显。
另外，对操作者的配色知识并没有较高要求，只需要用户选择自己想要拥有的颜色特征的网页即可进行自动的重构。可以减少大部分元素的配色设计，只需对自身网页中的部分图片进行重新设计即可，极大地缩短了整个设计周期，而且减少了对用户对色彩方面的专业要求。
本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取存储器(RAM，RandomAccess Memory)、磁盘或光盘等。
另外，以上对本发明实施例所提供的基于颜色传递的网页重构方法及其装置进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。
Claims (7)
1.一种基于颜色传递的网页重构方法，其特征在于，所述方法包括：
获取任意两个网页的网页元素信息，首先比较两个网页元素信息中两个元素的类型是否属于同类，如果是，从大小比例、位置、HTML结构以及邻居四个方面对两个元素的相似度进行聚类评估，获得评估结果；
获取所述任意两个网页的分块，根据所述评估结果对所述任意两个网页对应的分块进行颜色传递，获得颜色传递结果；
对所述颜色传递结果进行校正，并根据校正结果进行网页重构。
2.如权利要求1所述的基于颜色传递的网页重构方法，其特征在于，所述获得评估结果的步骤包括：
对单个网页的网页元素信息进行聚类评估，获得每个网页的聚类评估结果；
对不同网页的聚类评估结果进行页间匹配评估。
3.如权利要求1所述的基于颜色传递的网页重构方法，其特征在于，所述对所述颜色传递结果进行校正的步骤，包括：
检查结果元素中是否含有特殊元素，若含有，检查结果元素对应的参考网页的匹配元素中是否含有同类特殊元素的定义，若有，覆盖结果元素，否则用目标网页中的定义覆盖结果元素；
若不含有特殊元素，则从结果元素中进行多次色彩随机抽样，取抽样结果均值avgRes；
从匹配元素中取得对应元素的CSS色彩定义，记为standard；
对比avgRes与standard的偏差，若偏差大于5％，用standard覆盖传递结果，否则保留原结果。
4.一种基于颜色传递的网页重构装置，其特征在于，所述装置包括：
聚类评估模块，用于获取任意两个网页的网页元素信息，首先比较两个网页元素信息中两个元素的类型是否属于同类，如果是，从大小比例、位置、HTML结构以及邻居四个方面对两个元素的相似度进行聚类评估，获得评估结果；
颜色传递模块，用于获取所述任意两个网页的分块，根据所述评估结果对所述任意两个网页对应的分块进行颜色传递，获得颜色传递结果；
网页重构模块，用于对所述颜色传递结果进行校正，并根据校正结果进行网页重构。
5.如权利要求4所述的基于颜色传递的网页重构装置，其特征在于，所述聚类评估模块包括：
聚类单元，用于对单个网页的网页元素信息进行聚类评估，获得每个网页的聚类评估结果；
评估单元，用于对不同网页的聚类评估结果进行页间匹配评估。
6.如权利要求4所述的基于颜色传递的网页重构装置，其特征在于，所述网页重构模块包括：
校正单元，用于对所述颜色传递结果进行校正；
重构单元，用于根据校正结果进行网页重构。
7.如权利要求6所述的基于颜色传递的网页重构装置，其特征在于，所述校正单元还用于检查结果元素中是否含有特殊元素，若含有，检查结果元素对应的参考网页的匹配元素中是否含有同类特殊元素的定义，若有，覆盖结果元素，否则用目标网页中的定义覆盖结果元素；若不含有特殊元素，则从结果元素中进行多次色彩随机抽样，取抽样结果均值avgRes；从匹配元素中取得对应元素的CSS色彩定义，记为standard；对比avgRes与standard的偏差，若偏差大于5％，用standard覆盖传递结果，否则保留原结果。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510579884.5A CN105183478B (zh) | 2015-09-11 | 2015-09-11 | 一种基于颜色传递的网页重构方法及其装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510579884.5A CN105183478B (zh) | 2015-09-11 | 2015-09-11 | 一种基于颜色传递的网页重构方法及其装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN105183478A CN105183478A (zh) | 2015-12-23 |
| CN105183478B true CN105183478B (zh) | 2018-11-23 |
Family
ID=54905577
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510579884.5A Active CN105183478B (zh) | 2015-09-11 | 2015-09-11 | 一种基于颜色传递的网页重构方法及其装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105183478B (zh) |
Families Citing this family (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106325875A (zh) * | 2016-08-29 | 2017-01-11 | 浪潮软件集团有限公司 | 一种网页ui界面与网页设计图的对比方法 |
| CN110633399B (zh) * | 2018-06-01 | 2024-09-13 | 北京搜狗科技发展有限公司 | 一种数据处理方法、装置和用于数据处理的装置 |
| CN110083430B (zh) * | 2019-04-30 | 2022-03-29 | 成都映潮科技股份有限公司 | 一种系统主题色更换方法、装置及介质 |
| CN110598148A (zh) * | 2019-08-14 | 2019-12-20 | 平安普惠企业管理有限公司 | 基于h5的页面操作行为统一方法及相关设备 |
| CN115291917B (zh) * | 2022-09-29 | 2023-01-06 | 天津大学 | 一种针对app中色彩普适性问题的修复方法 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101281642A (zh) * | 2008-05-12 | 2008-10-08 | 西安理工大学 | 基于自适应聚类颜色传递的雾天图像清晰化方法 |
| CN103544255A (zh) * | 2013-10-15 | 2014-01-29 | 常州大学 | 基于文本语义相关的网络舆情信息分析方法 |
| CN103778207A (zh) * | 2014-01-15 | 2014-05-07 | 杭州电子科技大学 | 基于lda的新闻评论的话题挖掘方法 |
| CN103942337A (zh) * | 2014-05-08 | 2014-07-23 | 北京航空航天大学 | 一种基于图像识别与匹配的视频搜索系统 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7340676B2 (en) * | 2000-12-29 | 2008-03-04 | Eastman Kodak Company | System and method for automatic layout of images in digital albums |
-
2015
- 2015-09-11 CN CN201510579884.5A patent/CN105183478B/zh active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101281642A (zh) * | 2008-05-12 | 2008-10-08 | 西安理工大学 | 基于自适应聚类颜色传递的雾天图像清晰化方法 |
| CN103544255A (zh) * | 2013-10-15 | 2014-01-29 | 常州大学 | 基于文本语义相关的网络舆情信息分析方法 |
| CN103778207A (zh) * | 2014-01-15 | 2014-05-07 | 杭州电子科技大学 | 基于lda的新闻评论的话题挖掘方法 |
| CN103942337A (zh) * | 2014-05-08 | 2014-07-23 | 北京航空航天大学 | 一种基于图像识别与匹配的视频搜索系统 |
Non-Patent Citations (1)
| Title |
|---|
| Web信息自动抽取技术研究;赖春波;《中国优秀硕士学位论文全文数据库》;20080731;全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105183478A (zh) | 2015-12-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105183478B (zh) | 一种基于颜色传递的网页重构方法及其装置 | |
| CN108228183B (zh) | 前端界面代码生成方法、装置、电子设备及存储介质 | |
| CN111353506B (zh) | 自适应的视线估计方法和设备 | |
| CN106610829B (zh) | 网页截图方法和装置 | |
| CN107644391B (zh) | 一种用于打印文档溯源的数字水印处理方法及装置 | |
| CN111881662A (zh) | 表单生成方法、装置、处理设备及存储介质 | |
| US8699819B1 (en) | Mosaicing documents for translation using video streams | |
| CN107784111A (zh) | 数据挖掘方法、装置、设备及存储介质 | |
| CN107085505A (zh) | 一种cdr文件自动处理和自动比对方法及系统 | |
| CN105550989B (zh) | 基于非局部高斯过程回归的图像超分辨方法 | |
| WO2021110066A1 (zh) | 食物成熟度识别方法、装置以及计算机存储介质 | |
| CN108763394A (zh) | 面向协同交互的多用户眼动跟踪数据可视化方法和系统 | |
| CN113469929A (zh) | 训练数据生成方法、装置、电子设备及计算机可读存储介质 | |
| CN107391656A (zh) | 基于蒙版的web表单设计方法 | |
| US11875468B2 (en) | Three-dimensional (3D) image modeling systems and methods for determining respective mid-section dimensions of individuals | |
| Xu et al. | Identifying semantic blocks in Web pages using Gestalt laws of grouping | |
| Li et al. | Aesthetic assessment of paintings based on visual balance | |
| CN103529939B (zh) | 一种基于颜色、计算机视觉和网格划分的人机交互方法 | |
| US20180365878A1 (en) | Facial model editing method and apparatus | |
| CN115705678A (zh) | 一种图像数据处理方法、计算机设备以及介质 | |
| Sobhiyeh et al. | Hole filling in 3D scans for digital anthropometric applications | |
| WO2018233318A1 (zh) | 一种基于线面空间关系的迷宫求解方法 | |
| CN102971766B (zh) | 头部检测方法、头部检测装置、属性判定方法、属性判定装置和属性判定系统 | |
| CN110442242A (zh) | 一种基于双目空间手势交互的智能镜系统及控制方法 | |
| CN105975259A (zh) | 一种3d空间用户界面的实现方法及其装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |