CN106296622B - 一种自动布局的拼图方法及装置 - Google Patents

Abstract

本申请提供一种自动布局的拼图方法和装置。所述方法可以包括获取待拼接图片的属性信息；按照预定算法计算所述待拼接图片的属性信息，根据计算结果确定所述待拼接图片所属的布局分组；将所述待拼接图片按照所属布局分组的布局方式进行拼接形成拼接图片。利用本申请中各个实施例，可以提高图片布局空间的利用效率，使自动拼接成的图片更加符合预期布局要求，提升拼接图片的拼接效果。

Description

一种自动布局的拼图方法及装置

技术领域

本申请属于图片信息处理领域，尤其涉及一种自动布局的拼图方法及装置。

背景技术

为了提升终端设备页面的展示效果，例如减少浏览器网页页面http请求、优化终端应用交互界面等的设计开发中，开发人员可以采用将多个提前设定的碎片图片在终端中拼接后，形成一个完整的例如网页背景、交互界面等图片展示给用户。

例如目前主流的基于CSS开源框架的拼图技术已经在网页背景拼图应用中得到广泛应用。在实际的设计开发中，前端开发人员可以通过手动的方式根据主观判断将多个待拼图的图片组合到成一个图片，然后通过测量得到每个图片在实际拼图后的位置，根据测量的结果设置拼接图片的位置信息等。显然，这种人工观察、手动测量拼图的方式虽然可以基于图片大小、形状等较为合理的拼接成图片，但该方式同样会消耗大量的人力和时间成本。并且拼图后的图片需要修改或者增加新的图片时，操作过程较为复杂，不利于后期图片维护。

现有技术中解决该问题的方法主要是采取自动拼图的方式代替人工拼图。一般的，所述的自动拼图在网页页面设计开发中可以指通过分析CSS文件中需要拼接的图片，通过计算获取图片大小、重复规则等信息。然后将需要拼接的图片按照全部水平布局或者垂直布局等方式摆放后形成拼接后的背景图片。目前，包括上述CSS自动拼图以及类似的如移动终端开发系统Android或者其他html描述语言等中，所述的自动拼图方式的图片位置布局主要采取包括：全部水平摆放、全部垂直摆放、紧凑摆放的处理方式。在所述的全部水平摆放或者全部垂直摆放中，常常会因为待拼图的图片大小不一致而导致浪费很多的图片布局空间，布局拼图的效果不理想。而紧凑摆放的平台算法相对而言较为复杂，例如在CSS拼图中可以采取将待拼接图片放入一个文件夹中，按照文件名生成样式规则，然后按照样式规则依次读取图片按序拼接。该方法不能结合图片自身属性信息特点进行合理有效的图片拼接，往往不能满足开发人员的设计需求。

现有技术中亟需一种接近于人工拼图的更加合理的图片自动布局的拼图方法，以提高自动布局的拼图效果，满足用户的设计需求。

发明内容

本申请目的在于提供一种自动布局的拼图方法和装置，可以通过计算的待拼接图片的信息预先设置所述待拼接图片的布局方式，完成图片的拼接，可以提高图片布局空间的利用效率，使自动拼接成的图片更加符合用户的预期布局要求。

本申请提供的一种自动布局的拼图方法及装置是这样实现的：

一种自动布局的拼图方法，所述方法包括：

获取待拼接图片的属性信息；

按照预定算法计算所述待拼接图片的属性信息，根据计算结果确定所述待拼接图片所属的布局分组；

将所述待拼接图片按照所属布局分组的布局方式进行拼接形成拼接图片。

一种自动布局的拼图装置，所述装置包括：

信息获取模块，用于获取待拼接图片的属性信息；

布局分组模块，用于按照存储的预定算法计算所述待拼接图片的属性信息，并根据计算结果确定所述待拼接图片所属的布局分组；

图片拼接模块，用于将所述待拼接图片按照所属布局分组的布局方式进行拼接形成拼接图片。

本申请提供的一种自动布局的拼图方法和装置，可以获取待拼接图片的属性信息，根据所述属性信息提前将待拼接图片自动、合理的分配到相应的布局分组中。然后可以再将每一组布局分组组合拼接成需要的拼接图片。这样通过预先分配的拼图方式可以使自动拼图的效果更加合理化，更加符合设计人员预期的布局要求，提高整个自动布局的拼图效果。同时，由于采用了预先布局分组的设置，在自动拼图时还可以实现尽可能的将待拼接图片合理的布满最终拼接图片的边界范围内，可以提高图片布局空间的利用效率。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本申请一种自动布局的拼图方法一种实施例的流程示意图；

图2是利用本申请所述自动布局的拼图方法在CSS页面自动拼图的应用场景示意图；

图3是利用本申请所述自动布局的拼图方法在CSS页面自动拼图的另一种应用场景示意图；

图4是本申请所述一种自动图片的拼图方法另一种实施例的方法流程示意图；

图5是本申请所述自动布局的拼图装置一种实施例的模块结构示意图；

图6是本申请所述自动布局的拼图装置中布局分组模块一种实施例的模块结构示意图；

图7是本申请所述自动布局的拼图装置中图片拼接模块一种实施例的模块结构示意图；

图8是本申请所述自动布局的拼图装置另一种实施例的模块结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

下面结合附图对本申请所述的图主体识别方法进行详细的说明。图1是本申请所述一种自动布局的拼图方法一种实施例的方法流程图。虽然本申请提供了如下述实施例或流程图所述的方法操作步骤，但基于常规或者无需创造性的劳动在所述方法中可以包括更多或者更少的操作步骤。在逻辑性上不存在必要因果关系的步骤中，这些步骤的执行顺序不限于本申请实施例提供的执行顺序。所述的方法的在实际中的装置或终端产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境)。

具体的本申请提供的一种自动布局的拼图方法的一种实施例如图1所示，所述方法可以包括：

S1：获取待拼接图片的属性信息。

本申请中所述的待拼接图片通常可以为采集获取的多个图片元素，这些图片元素可以通过一定方式的拼接组合可以形成网页页面背景、应用交互界面等新的图片。一般的，需要拼接组合成同一个图片的待拼接图片通常可以为一组与拼接后整体图片所展示的信息相关的多个图片。例如组成服装网店背景图片的待拼接图片可以包括新上架的服装展示图片、模特图片、本店同价位的其他服装产品等相关信息图片。所述的待拼接图片可以包括与自身图片信息相关的例如本地或者网络存储位置信息(或路径信息)、图片大小信息、图片色彩信息、是否重复排列等的属性信息，也以包括设置的例如图片右对齐或者与同行排列的下一张待拼接图片30％重叠等特定设置信息的属性信息。

所述待拼接图片的本地或者网络存储的位置信息在不同的应用场景中可以通过不同的方式获取得到，如图片信息中本身带有存储地址的属性信息，或者通过一定算法计算得到的位置信息。具体的应用场景中如CSS拼图中，例如可以将多个表情(如200个)的待拼接图片放到本地的一个文件夹A中，访问所述文件夹A的网络地址可以设置为192.168.10.1/A。然后可以对每个表情图片按照随机或者按照放入文件夹A的顺序的方式分别命名为EXP_000、EXP_001、…、EXP_199。相应的所述文件夹中待拼接图片的表情图片EXP_000、EXP_001、…、EXP_199的网络访问地址可以分别为192.168.10.1/A/EXP_000、192.168.10.1/A/EXP_001、…、192.168.10.1/A/EXP_199。当然，所述的待拼接图片的网络访问地址可以表示为服务网络中的其他访问终端提供的图片访问的网络地址，本地终端也可以通过所述网络访问地址访问得本地存储的文件夹中的待拼接图片。所述的待拼接图片的命名例如为EXP_000等一般的可以包括图片的.JPG、.GIF等的后缀名。

所述的属性信息中的图片大小信息通常可以包括以图片像素大小表示的图片长和宽的信息。当然，基于采取表示图片大小的方式不同，所述的图片大小信息也可以有不同的表示方式。如图片的长、宽也可以采取以厘米单位表示，或者特定值的百分比表示等。所述图片大小信息可以通过直接获取图片相关信息得到，也可以通过拼接后的图片中对待拼接图片的设置要求进行计算后得到。在具体的应用场景中例如设置要求将待拼接图片EXP_003纵横等比例设置在拼接后的背景图片中间行的10％至20％位置处，其中所述待拼接图片EXP_003的原始大小为64像素*80像素，所述拼接后的背景图片为1280像素*900像素。通过计算可以得到拼接后背景图片10％至20％的图片宽度为128像素，而待拼接图片EXP_003的原始大小为64像素，因此可以获取实际在拼接后图片中所述待拼接图片EXP_003的大小信息为128像素*160像素。本申请中，所述获取属性信息中的图片大小信息可以包括所述待拼接图片原始大小的信息，也可以包括所述待拼接图片在拼接完成后的图片中的大小信息。

当然，也可以获取待拼接图片的其他例如图片色彩信息、是否重复、对齐方式等属性信息。在不同的实施方式中，可以根据拼图设计需求或者具体的设计语言、应用环境等设置所述拼接图片的属性信息的具体所包括的内容。本实施例在利用CSS拼图完成例如网页背景图片的自动布局拼图时，可以基于图片大小信息进行待拼接图片的自动布局。因此，本实施例中，所述获取的待拼接图片的属性信息中可以包括所述待拼接图片的图片大小信息。

一般的，所述CSS拼图通常采取根据CSS文件中的CSS语法规则计算待拼接图片的盒模型，基于所述盒模型完成图片的拼接组合。本申请的其他实施方式中可以采取上述利用CSS拼图完成本申请所述的自动布局的拼图，具体的实现获取所述待拼接图片的属性信息的过程可以包括：

S101：对CSS文件进行分析，通过CSS语法规则得到每一组待拼接图片的语法规则。然后检查是否有“background”或者“background-image”描述的背景规则，如果有则可以通过正则检查是否有背景图。

S102：当存在背景图时，可以通过CSS中描述的背景图路径找到对应的拼接所述背景图的待拼接图片，并可以计算所述待拼接图片的大小。所述的背景图路径相当于本申请所述的待拼接图片属性信息中位置信息的一种具体实施方式。

S103：基于所述CSS规则计算所述待拼接图片的盒模型的相关属性信息。在页面设计中，每个元素可以被描绘为矩形盒子。在CSS下这些矩形盒子可以由标准盒模型描述。采用盒模型描述的元素内容具有一定的大小，占用一定的空间，具有相应的属性——比如颜色、背景、边框。所述的盒模型中计算每个待拼接图片的盒子通常具有四个边界属性信息：外边距边界margin edge，边框边界border edge，内边距边界padding edge与内容边界content edge。当然，在边界之内或之间有设置有相应的区域属性信息，以表示待拼接图片的大小、位置等属性信息，例如内容区域content area、内边界区域padding area、边框区域border area、外边界区域margin area。

本实施例中可以采用通过CSS下盒模型获取所述待拼接图片的属性信息。当然，在其他的应用场景中，如前所述也可以直接获取通过一定的计算方式获取所述待拼接图片的属性信息。

S2：按照预定算法计算所述待拼接图片的属性信息，根据计算结果确定所述待拼接图片所属的布局分组。

获取得到所述待拼接图片的属性信息后，可以根据预定算法对所述属性信息进行计算，然后可以根据计算结果对所述待拼接图片进行分类，划分到相应的布局分组中。所述的预定算法可以为预先自定义设置的对获取的待拼接图片的属性信息进行计算划分的方法，也可以为包括页面或者图形交互等设计语言规则的算法。例如可以设置若所述属性信息中待拼接图片的长度和/或宽度在某一设计范围内时，可以将该拼接图片归属于与所述设计范围相对应的布局分组。相应的，也可以设置多个布局分组，每个所述布局分组可以包括所述待拼接图片的属性信息值的不同取值范围。因此，本申请的另一种具体的实施例中，所述按照预定算法计算所述待拼接图片的属性信息，根据计算结果确定所述待拼接图片所属的布局分组可以包括。

S201：预先设置至少两种布局分组，每一组布局分组包括与所述布局分组相对应的属性取值区间；

S202：根据获取的所述待拼接图片的属性信息所对应的所述属性取值区间确定所述待拼接图片所属的布局分组。

一种实施方式中，所述的预先设置的至少两种布局分组可以包括所述属性信息落入所述两组布局分组中的其中一个属性取值区间为对立事件。具体来说，例如可以预先设置将符合特定形状大小的待拼接图片划分为布局分组A，所述布局分组A可以为某一种特定排列的例如水平平铺的拼图排列方式。同时可以设置将不符合特定形状大小的待拼接图片划分为布局分组B，所述布局分组B可以设置的待拼接图片的形状大小不符合特定排列要求的默认拼图方式，如紧凑拼图。当然，所述的至少两种布局分组可以包括多个布局分组，在将待拼接图片划分到布局分组时可以根据所述属性信息的值直接划分到相应的布局分组，也可以采取分级判断的方式进行划分。一般的，本申请中无论采取哪种方式通常需要保障每一个待拼接图片有对应的布局分组。

如采取分级判断的结构方式进行布局分组在具体的实施过程中，可以采取先将待拼接图片P划分到默认的分组A。所述默认的分组A可以设置有对所述待拼接图片P进行进一步划分的判断条件，如图片大小的判断条件。若所述待拼接图片P满足所述分组A的相应的判断条件，可以将所述待拼接图片P进一步的划分到与所述判断条件相对应的分组中。例如判断的结果为所述待拼接图片P的长度和宽度满足分组B的要求，进一步的可以将所述待拼接图片P由默认分组A划分到分组B中。当然，还可以在所述分组B中设置进一步划分分组的第一判断条件，然后可以判断所述待拼接图片P是否满足分组B中进一步划分的第一判断条件。若满足，则可以所述待拼接图片P划分到与所述第一判断条件相对应的分组。例如判断的结果为所述待拼接图片P的RGB通道值满足分组C的要求，进一步的可以将所述待拼接图片P由所述分组B划分到分组C中。以此类推，最终可以将待拼接图片P划分到设置的某个布局分组中。

在设计人员人工进行拼图时，为了快速达到良好拼图效果，设计人员通常可以根据待拼接图片的大小或者颜色，或者两者结合进行拼图。本申请中为了使自动布局的拼图结果更接近于设计人员主观预期，提高自动布局拼图的效果和效率，本申请另外的一种优选实施例中，

所述待拼接图片的属性信息可以包括所述待拼接图片的大小、颜色中的至少一种图片信息。

当然，如前所述，所述的属性信息也可以包括其他图片属性的信息，相应的根据属性信息计算或确定待拼接图片所属的布局分组可以包括：根据所述属性信息中待拼接图片的大小或者颜色或者两者结合，或者包括的其他图片信息确定所述待拼接图片所属的布局分组。

S3：将所述待拼接图片按照所属布局分组的布局方式进行拼接形成拼接图片。

根据待拼接图片属性信息对所述待拼接图片进行分组后，可以将所述待拼接图片按照所属的布局分组中设置的布局方式进行拼图。然后可以将一组待拼接图片按照布局分组拼接完成的图片组合成新的图片。需要说明的是，所述布局分组可以表示为所述待拼接图片在拼接成用户需要的图片时的采取的何种排列方式。在具体的应用场景中一般的还可以结合设计需求、应用编程或设计语言、图片属性信息等其他信息完成自动布局拼图。在本实施例中可以采取在需要拼接合成的图片的边界范围内每一布局分组先按照自身的布局方式完成拼图，然后将每一组的拼接图片首尾连接或者左对齐的方式组合到一起形成拼接图片。

图2是利用本申请所述自动布局的拼图方法在CSS页面自动拼图的应用场景示意图。在图2的CSS网页背景图片的应用实施例中页面自动布局拼图中，对于一组待拼接图片P1～P8，可以先通过分析CSS规则获得每个待拼接图片的类型、盒模型相关的属性信息等。然后可以根据预定的算法对所述待拼接图片的属性信息进行计算分析，将这一组中的每个待拼接图片划分到相应的布局分组进行分类。本实施例应用场景中为了达到拼图的图片展示紧凑、工整的效果，在自动拼图具体设计时可以采取将正方形或者接近于正方形的图片紧凑排列，将图片高度和宽度差值较大(如相对较长的图片P3)并且高度范围在预期范围内图片进行水平排列。因此，上述应用场景中所述的预定算法可以采取计算待拼接图片的纵横比，然后设置将纵横比在0.8与1.2之间的待拼接图片P1、P2、P5、P6放入紧凑分组的布局分组，将纵横比大于1.5并且图片高度在预置像素范围内的待拼接图片P4、P7放入水平排列的布局分组，其他的待拼接图片P3、P8采取水平平铺的方式放入水平平铺的布局分组。

然后可以将每一布局分组内的待拼接图片按照相应的布局方式进行拼图组合。每一组的待拼接图片拼接组合完成后可以采取尾连接或者每个布局分组左对齐的方式拼接成拼接图片。所述的拼接图片可以用作网页页面的背景图片中。上述中所述的紧凑拼图的算法并不限于实施例所述的基于纵横比的判断，在例如CSS页面布局设计中可以视为经典的装箱问题，可以包括其他多种解决方式。当然，本申请所述的自动布局的拼图方法并不限于本申请实施例所述的CSS页面布局的应用场景，其他例如产品图片组合、应用界面、照片排版等实现图片信息自动布局拼图的应用场景同样实施本申请的实施例。

本申请所述方法的另一种实施例中，可以为不同的所述布局分组设置对应的拼图顺序，可以将所述布局分组拼图后的图片根据所述拼图顺序拼接组合成需要的拼接图片。具体的，本申请所述的一种自动布局的拼图方法中所述将所述待拼接图片按照所属布局分组的布局方式进行拼接形成拼接图可以包括：

S301：将所述布局分组中的待拼接图片按照所属的布局方式拼接成分组图片；

S302：设置所述分组图片的拼图顺序；

S303：根据所述拼图顺序将所述分组图片拼接成拼接图片。

所述的拼图顺序可以预先设置一种或者多种执行方式，也可以设置为实时的根据待拼接图片或者布局分组的信息进行设置调整。对不同布局分组的图片进行设置对应的拼图顺序，可以根据拼图设计需求和实际的场景应用需求调整拼接图片，使本申请所述的自动布局的拼图方法更加灵活，拼图结果更加合理、趋向于设计人员的期望效果。具体的实现方式中，如图3所示，可以将紧凑分组形成的分组图片的拼图顺序设置为2，将水平排列形成的分组图片的图片顺序设置为3，将水平平铺的分组图拼图顺序设置为1。可以采取左对齐的方式将三组布局的分组图片自上而下的组合排列形成拼接图片，如图3所示。图3是利用本申请所述自动布局的拼图方法在CSS页面自动拼图的另一种应用场景示意图。

本申请的另一种应用场景中，在自动布局进行图片拼接时可以对待拼接图片进行调整。例如在一组待拼接图片中有的待拼接图片预先设置了该图片进行水平平铺，则可以在拼图时对该图片进行调整使其符合预置的布局要求。如检查到所述待拼接图片设置有URL参数，在默认紧凑拼图的情况下可以通过在图片URL参数中加入参数a.png？line的方式来声明这个图片拼图时强制采用平铺的方式。因此，本申请所述的一种自动布局的拼图方法的另一种实施例中，所述方法还可以包括：

S4：检测所述待拼接图片是否包括指定布局方式的配置信息，并在检测到时根据所述检测到的配置信息对所述待拼接图片进行相应的调整。

图4是本申请所述一种自动图片的拼图方法另一种实施例的方法流程示意图。如图4所示，本实施例中可以通过所述待拼接图片的指定布局的配置信息进行拼接图片的调整。在实际开发应用中，开发人员可以在正常CSS拼图的方式下通过URL参数进行手动的分配、设置，可以进一步提高本申请自动布局拼图方式的灵活性、扩展性、方便性。当然，所述的配置信息在CSS拼图的方式下可以为URL参数，在其他不同的设计语言或处理对象的应用场景中可以根据具体的应用场景进行配置。

本申请所述的一种自动布局的拼图方法，可以获取待拼接图片的属性信息，根据所述属性信息提前将待拼接图片自动、合理的分配到相应的布局分组中。然后可以再将每一组布局分组组合拼接成需要的拼接图片。这样通过预先分配的拼图方式可以使自动拼图的效果更加合理化，更加符合设计人员预期的布局要求，提高整个自动布局的拼图效果。同时，由于采用了预先布局分组的设置，在自动拼图时还可以实现尽可能的将待拼接图片合理的布满最终拼接图片的边界范围内，可以提高图片布局空间的利用效率。

基于本申请所述的自动布局的拼图方法，本申请提供一种自动布局的拼图装置。图5是本申请所述自动布局的拼图装置一种实施例的模块结构示意图。如图5所示，所述装置可以包括：

信息获取模块101，可以用于获取待拼接图片的属性信息；

布局分组模块102，可以用于按照存储的预定算法计算所述待拼接图片的属性信息，并根据计算结果确定所述待拼接图片所属的布局分组；

图片拼接模块103，可以用于将所述待拼接图片按照所属布局分组的布局方式进行拼接形成拼接图片。

本申请所述的一种自动布局的拼图装置，可以获取包括待拼接图片的大小、格式、位置、盒模型相关等属性信息，根据所述属性信息提前将待拼接图片自动、合理的分配到相应的布局分组中。然后可以再将每一组布局分组组合拼接成需要的拼接图片。这样通过预先分配的拼图方式可以使自动拼图的效果更加合理化，更加符合设计人员预期的布局要求，提高整个自动布局的拼图效果。

本申请所述自动布局的拼图装置的一种优选实施方式中，所述信息获取模块101获取的待拼接图片的属性信息可以包括所述待拼接图片的大小、颜色中的至少一种图片信息。

图6是本申请所述自动布局的拼图装置布局分组模块一种实施例的模块结构示意图。如图6所示，所述布局分组模块102可以包括：

分组设置模块1021，可以用于设置待拼接图片的布局分组，所述布局分组包括相应的属性取值区间；

分组判断模块1022，可以用于判断所述待拼接图片的属性信息符合的所述布局分组的属性取值区间，并根据判断结果将所述待拼接图片设置为相应的布局分组。

本实施例的装置中，获取得到所述待拼接图片的属性信息后，可以根据预定算法对所述属性信息进行计算，然后可以根据计算结果对所述待拼接图片进行分类，划分到相应的布局分组中。

图7是本申请所述自动布局的拼图装置中图片拼接模块一种实施例的模块结构示意图。如图7所示，所述图片拼接模块103可以包括：

分组拼接模块1031，可以用于将所述布局分组中的待拼接图片按照所属的布局方式拼接成分组图片；

拼图顺序设置模块1032，可以用于设置所述分组图片的拼图顺序；

拼图模块1032，可以用于根据所述拼图顺序将所述分组图片拼接成拼接图片。

对不同布局分组的图片进行设置对应的拼图顺序，可以根据拼图设计需求和实际的场景应用需求调整拼接图片，使本申请所述的自动布局的拼图方法更加灵活，拼图结果更加合理、根据符合于设计人员的期望效果。

图8是本申请所述自动布局的拼图装置另一种实施例的模块结构示意图。如图8所示，所述装置还可以包括：

图片调整模块104，可以用于检测所述待拼接图片是否包括指定布局方式的配置信息，并在检测到时根据所述检测到的配置信息对所述待拼接图片进行相应的调整。

本实施装置在实际CSS页面拼图应用中，开发人员可以在正常CSS拼图的方式下通过URL参数进行手动的分配、设置，可以进一步提高本申请自动布局拼图方式的灵活性、扩展性、方便性。当然，所述的配置信息在CSS拼图的方式下可以为URL参数，在其他不同的设计语言或处理对象的应用场景中可以根据具体的应用场景进行配置。

本申请所述的方法和装置实现的方式不限于本申请实施例中所述CSS页面拼图的应用场景。即使在页面拼图中对应方法或装置的实现没有具体的实现语言要求，一般的可以包括具有图片信息数据处理。例如其他的实现方式中也可以通过node.js加上结果出来处理图片的命令行二进制程序的组合实现。

尽管本申请内容中提到CSS设计语言、网络访问地址、盒模型计算等之类的图片数据处理和信息交互的描述，但是，本申请并不局限于必须是完全标准或者所提及的数据处理或信息交互方式的情况。本申请中各个实施例所涉及的上述描述仅是本申请中的一些实施例中的应用，在某些标准、方法的基础上略加修改后的处理方法也可以实行上述本申请各实施例的方案。当然，在符合本申请上述各实施例的中所述的处理方法步骤的其他无创造性的变形，仍然可以实现相同的申请，在此不再赘述。

虽然本申请提供了如实施例或流程图所述的方法操作步骤，但基于常规或者无创造性的手段可以包括更多或者更少的操作步骤。实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的装置或客户端产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境)。

上述实施例阐明装置或模块，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。为了描述的方便，描述以上装置时以功能分为各种模块分别描述。当然，在实施本申请时可以把各模块的功能在同一个或多个软件和/或硬件中实现，也可以将实现同一功能的模块由多个子模块或子单元的组合实现。

本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内部包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构、类等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，移动终端，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例采用递进的方式描述，各个实施例之间相同或相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、移动通信终端、多处理器系统、基于微处理器的系统、可编程的电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。

虽然通过实施例描绘了本申请，本领域普通技术人员知道，本申请有许多变形和变化而不脱离本申请的精神，希望所附的权利要求包括这些变形和变化而不脱离本申请的精神。

Claims (8)

1.一种自动布局的CSS拼图方法，其特征在于，所述方法包括：

获取待拼接图片的属性信息，所述属性信息包括通过CSS下的盒模型获取所述待拼接图片的属性信息；

按照预定算法计算所述待拼接图片的属性信息，根据计算结果确定所述待拼接图片所属的布局分组；

将所述待拼接图片按照所属布局分组的布局方式进行拼接，将每一布局分组拼接完成的图片组合成新的图片；

所述将所述待拼接图片按照所属布局分组的布局方式进行拼接，将每一布局分组拼接完成的图片组合成新的图片包括：

将所述布局分组中的待拼接图片按照布局分组自身所属的布局方式拼接成分组图片；

设置所述分组图片的拼图顺序；

根据所述拼图顺序将所述分组图片拼接成拼接图片。

2.如权利要求1所述的一种自动布局的CSS拼图方法，其特征在于，所述按照预定算法计算所述待拼接图片的属性信息根据计算结果确定所述待拼接图片所属的布局分组包括：

预先设置至少两种布局分组，每一组布局分组包括与所述布局分组相对应的属性取值区间；

根据获取的所述待拼接图片的属性信息所对应的所述属性取值区间确定所述待拼接图片所属的布局分组。

3.如权利要求1所述的一种自动布局的CSS拼图方法，其特征在于，所述待拼接图片的属性信息包括所述待拼接图片的大小、颜色中的至少一种图片信息。

4.如权利要求1-3中任意一项所述的一种自动布局的CSS拼图方法，其特征在于，所述方法还包括：

检测所述待拼接图片是否包括指定布局方式的配置信息，并在检测到时根据所述检测到的配置信息对所述待拼接图片进行相应的调整。

5.一种自动布局的CSS拼图装置，其特征在于，所述装置包括：

信息获取模块，用于获取待拼接图片的属性信息；

布局分组模块，用于按照存储的预定算法计算所述待拼接图片的属性信息，并根据计算结果确定所述待拼接图片所属的布局分组；

图片拼接模块，用于将所述待拼接图片按照所属布局分组的布局方式进行拼接，将每一布局分组拼接完成的图片组合成新的图片；

其中，所述图片拼接模块包括：

分组拼接模块，用于将所述布局分组中的待拼接图片按照布局分组自身所属的布局方式拼接成分组图片；

拼图顺序设置模块，用于设置所述分组图片的拼图顺序；

拼图模块，用于根据所述拼图顺序将所述分组图片拼接成拼接图片。

6.如权利要求5所述的一种自动布局的CSS拼图装置，其特征在于，信息获取模块获取的待拼接图片的属性信息包括所述待拼接图片的大小、颜色中的至少一种图片信息。

7.如权利要求5所述的一种自动布局的CSS拼图装置，其特征在于，所述布局分组模块包括：

分组设置模块，用于设置待拼接图片的布局分组，所述布局分组包括相应的属性取值区间；

分组判断模块，用于判断所述待拼接图片的属性信息符合的所述布局分组的属性取值区间，并根据判断结果将所述待拼接图片设置为相应的布局分组。

8.如权利要求5-7中任意一项所述的一种自动布局的CSS拼图装置，其特征在于，所述装置还包括：

图片调整模块，用于检测所述待拼接图片是否包括指定布局方式的配置信息，并在检测到时根据所述检测到的配置信息对所述待拼接图片进行相应的调整。

Images