CN103164443B - 图片合并方法和装置 - Google Patents

Abstract

本发明提供了一种图片合并方法和系统，所述方法包括：获取网页样式表；根据所述网页样式表提取网页中的网页图片；获取设置的图片合并参数；按照所述图片合并参数合并所述网页图片。采用本发明，能提高图片合并效率。

Description

图片合并方法和装置

【技术领域】

本发明涉及网页制作，尤其涉及一种图片合并方法和装置。

【背景技术】

随着网络技术的发展，网页元素也变得越来越丰富。浏览器在加载某个页面时，往往需要从服务器请求加载页面上的图片。而网页或者网页上的某一个模块所使用的图片往往不只一张，有可能有几张甚至几十张。浏览器在向服务器请求加载这些图片时，对每张图片都需要向服务器发送请求，从而会产生网络流量。为减少请求，加快网页的加载速度，在制作网页时通常会将网页或网页上的某个模块所使用的图片合并成一张图片，这样，浏览器只需向服务器发送一次请求，就可获取合并后的图片，然后可直接从合并后的图片中获取其中的小图片。

传统的图片合并方法通常是通过图像处理工具实现，例如使用Photoshop、Fireworks等工具，把需要合并的小图片放到一张大的图片中，手动排列图片位置，并保存生成需要的大图。然而，传统的这种图片合并方法，需要借助第三方工具，且需要用户手动操作，因此合并图片的效率很低。

【发明内容】

基于此，有必要提供一种能提高图片合并效率的图片合并方法。

一种图片合并方法，包括以下步骤：

获取网页样式表；

根据所述网页样式表提取网页中的网页图片；

获取设置的图片合并参数；

按照所述图片合并参数合并所述网页图片。

优选的，所述根据所述网页样式表提取网页中的网页图片的步骤为：

查找所述网页样式表中的背景标签；

提取网页模块中带所述背景标签的网页图片。

优选的，所述按照所述图片合并参数合并所述网页图片的步骤为：

根据所述网页样式表获取所述网页图片中的非重复图片；

按照所述图片合并参数合并所述非重复图片。

优选的，在所述按照所述图片合并参数合并所述网页图片的步骤之后，还包括：

获取所述网页图片在合并后的图片中的位置信息；

将所述位置信息加入所述网页样式表中。

优选的，所述图片合并参数包括水平偏移量、垂直偏移量、背景颜色值、是否合并重复图片的标记中的一种或多种的组合。

此外，还有必要提供一种能提高图片合并效率的图片合并装置。

一种图片合并装置，包括：

图片获取模块，用于获取网页样式表，根据所述网页样式表提取网页中的网页图片；

参数设置模块，用于获取设置的图片合并参数；

图片合并模块，用于按照所述图片合并参数合并所述网页图片。

优选的，所述图片获取模块用于查找所述网页样式表中的背景标签，提取网页中带所述背景标签的网页图片。

优选的，所述图片合并模块用于根据所述网页样式表获取所述网页图片中的非重复图片，按照所述图片合并参数合并所述非重复图片。

优选的，还包括：

网页样式表更新模块，用于获取所述网页图片在合并后的图片中的位置信息，将所述位置信息加入所述网页样式表中。

优选的，所述图片合并参数包括水平偏移量、垂直偏移量、背景颜色值、是否合并重复图片的标记中的一种或多种的组合。

上述图片合并方法和装置，在保存页面时根据网页样式表能够自动获取网页图片，并根据设置图片合并参数能够自动将网页图片合并成一张图片。由于不需要借助第三方工具，在保存页面的时候可以自动合并图片，因此能够提高图片合并效率。

【附图说明】

图1为一个实施例中图片合并方法的流程示意图；

图2为一个实施例中合并图片的操作界面示意图；

图3为图2的另一个操作界面示意图；

图4为一个实施例中图片合并装置的结构示意图；

图5为另一个实施例中图片合并装置的结构示意图。

【具体实施方式】

本发明提供的图片合并方法，通过获取网页样式表，根据网页样式表提取网页中的网页图片，并获取设置的图片合并参数，按照图片合并参数合并网页图片。本发明无需借助第三方工具，在保存页面时通过本发明提供的图片合并方法即可自动生成合并后的图片，因此能够提高图片合并效率，减少了用户操作，使用户操作更方便。

如图1所示，在一个实施例中，图片合并方法包括以下步骤：

步骤S10，获取网页样式表。

在制作网页时，可设置网页样式表。例如采用CSS样式表(Cascading StyleSheet，层叠样式表单)。网页样式表用于记录网页的样式信息，包括网页图片的属性信息、图片在网页中的摆放位置等。其中，网页图片的属性信息包括图片大小、图片格式、是否为网页背景图、是否为重复图片等。

步骤S20，根据网页样式表提取网页中的网页图片。

具体的，在一个实施例中，步骤S20的具体过程为：查找网页样式表中的背景标签，提取网页模块中带背景标签的网页图片。

带背景标签的网页图片即网页背景图，是指在网页页面中显示的不能另存为本地的图片，例如菜单功能项的图片、网页链接对应的图片等。在制作网页时，对于网页背景图，事先在网页样式表中设置背景标签。在网页样式表中查找背景标签，对应的图片即网页背景图。

网页通常由多个网页模块构成，如图2所示，在一个实施例中，通过网页制作工具制作网页时，需将右栏中的多个网页模块添加到左栏中的网页中。在图2的右栏中显示了网页模块的缩略图，用户可将网页模块拖动到左栏的网页中，则网页模块中所使用到的网页图片摆放在网页中。在保存页面时，根据网页样式表提取网页中的网页图片。具体的，提取每个网页模块中的网页图片。

步骤S30，获取设置的图片合并参数。

具体的，图片合成参数可包括水平偏移量、垂直偏移量、背景颜色值、是否合并重复图片的标记中的一种或多种的组合。

如图3所示，在一个实施例中，在合并图片前，可提供选项供用户进行参数设置。用户在操作界面中可输入水平偏移量、垂直偏移量、背景颜色值以及设置是否选择合并重复图片等。其中，水平偏移量是指水平相邻的两张图片之间的距离；垂直偏移量是指垂直相邻的两张图片之间的距离；背景颜色值是指合并生成的大图的背景的颜色值，例如，可以设置为白色、黑色或透明色等。

进一步的，用户还可以通过网页制作工具拖动网页图片，使得网页图片摆放在合适的位置。例如，可手动拖动或通过键盘微调网页图片的位置。

步骤S40，按照图片合并参数合并网页图片。

优选的，可将同一网页模块中的图片合并成一张图片。具体实现时，可采用HTML5技术新建两个画布，其中第一画布负责将网页图片按照设置的图片合并参数进行排列，第二画布负责实时将第一画布上的图片绘制成合并后的图片。优选的，可合并成png格式的图片。

在一个实施例中，如图3所示，根据网页样式表提取网页中的网页图片可以缩略图的形式显示在右栏中。进一步的，在网页样式表中标记了网页图片是否重复，因此还可根据网页样式表获取网页图片中的重复图片和非重复图片，并可将重复图片以缩略图的形式显示在右栏中。当用户设置不合并重复图片时，则步骤S40的具体过程为：按照网页样式表获取网页图片中的非重复图片，按照图片合并参数合并非重复图片。

例如，设置的图片合并参数为水平偏移量是4mm，垂直偏移量是5mm，不合并重复图片且设置输出为Png格式的图片，根据网页样式表获取网页图片中的非重复图片，由第一画布按照该图片合并参数排列各个需合并的网页图片，使得水平方向的相邻的两个图片之间的距离是4mm，垂直方向的相邻的两个图片之间的距离是5mm，然后由第二画布负责将第一画布上排列好的图片绘制成合并后的Png格式的图片。

如图3所示，用户在网页制作工具中点击合并上传按钮，则输出网页的同时按照图片合并参数合并网页图片，然后将输出的网页和合并后的图片一起上传到服务器。在一个实施例中，在步骤S40之后还包括：获取网页图片在合并后的图片中的位置信息，将位置信息加入到网页样式表中。进一步的，网页样式表与网页一起上传到服务器。

当浏览器向服务器请求加载网页时，获取网页样式表及合并后的图片，并根据网页样式表中的上述位置信息获取网页图片，然后再根据网页样式表将网页图片显示页面上的对应位置上。由于浏览器仅需要请求一次即可获取合并后的图片，然后可进一步获取合并后的图片中的网页图片，因此能够减少请求次数，加快了网页的加载速度。

通常的，在网页页面上显示重复图片时，浏览器仅需请求一次重复图片，因此重复图片通常可不进行合并。在一个实施例中，当用户设置不合并重复图片时，可设置重复图片的属性，包括是否横向重复或纵向重复或同时横向纵向重复等，并将设置的属性记录在网页样式表中。在浏览器加载网页时，按照网页样式表中重复图片的属性则可将重复图片显示在页面的对应位置上。

如图4所示，在一个实施例中，一种图片合并装置，包括图片获取模块10、参数设置模块20和图片合并模块30，其中：图片获取模块10用于获取网页样式表，根据网页样式表提取网页中的网页图片。

网页样式表用于记录网页的样式信息，包括网页图片的属性信息、图片在网页中的摆放位置等。其中，网页图片的属性信息包括图片大小、图片格式、是否为网页背景图、是否为重复图片等。在一个实施例中，采用CSS样式表。

在一个实施例中，图片获取模块10用于查找网页样式表中的背景标签，提取网页中带背景标签的网页图片。带标签的网页图片即网页背景图，由于事先在网页样式表中设置了背景标签，在网页样式表中查找背景标签，对应的图片即网页背景图。

参数设置模块20用于获取设置的图片合并参数。具体的，图片合成参数可包括水平偏移量、垂直偏移量、背景颜色值、是否合并重复图片的标记中的一种或多种的组合。用户还可以通过网页制作工具拖动网页图片，使得网页图片摆放在合适的位置。例如，可手动拖动或通过键盘微调网页图片的位置。

图片合并模块30用于按照图片合并参数合并网页图片。优选的，图片合并模块30可用于将同一网页模块中的图片合并成一张图片。

在一个实施例中，图片合并模块30用于根据网页样式表获取网页图片中的非重复图片，按照图片合并参数合并非重复图片。

在另一个实施例中，如图5所示，图片合并装置还包括网页样式表更新模块40，用于获取网页图片在合并后的图片中的位置信息，将该位置信息加入到网页样式表中。

在一个实施例中，生成的网页、合并后的图片及更新后的网页样式表一起上传到服务器。当浏览器向服务器请求加载网页时，获取网页样式表及合并后的图片，并根据网页样式表中的上述位置信息获取网页图片，然后再根据网页样式表将网页图片显示页面上的对应位置上。由于浏览器仅需要请求一次即可获取合并后的图片，然后可进一步获取合并后的图片中的网页图片，因此能够减少请求次数，加快了网页的加载速度。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (8)

1.一种图片合并方法，包括以下步骤：

在制作网页时获取网页样式表；

根据所述网页样式表提取网页中的网页图片，具体是查找所述网页样式表中的背景标签；提取网页模块中带所述背景标签的网页图片，带背景标签的网页图片是指在网页页面中显示的不能另存为本地的图片；

在合并图片前，提供选项供用户进行参数设置并获取设置的图片合并参数；

在输出网页时按照所述图片合并参数合并所述网页图片，其中，将同一网页模块中的图片合并成一张图片，采用HTML5技术新建两个画布，其中第一画布负责将网页图片按照设置的图片合并参数进行排列，第二画布负责实时将第一画布上的图片绘制成合并后的图片。

2.根据权利要求1所述的图片合并方法，其特征在于，所述按照所述图片合并参数合并所述网页图片的步骤为：

根据所述网页样式表获取所述网页图片中的非重复图片；

按照所述图片合并参数合并所述非重复图片。

3.根据权利要求1所述的图片合并方法，其特征在于，在所述按照所述图片合并参数合并所述网页图片的步骤之后，还包括：

获取所述网页图片在合并后的图片中的位置信息；

将所述位置信息加入所述网页样式表中。

4.根据权利要求1至3中任意一项所述的图片合并方法，其特征在于，所述图片合并参数包括水平偏移量、垂直偏移量、背景颜色值、是否合并重复图片的标记中的一种或多种的组合。

5.一种图片合并装置，其特征在于，包括：

图片获取模块，用于在制作网页时获取网页样式表，根据所述网页样式表提取网页中的网页图片，具体是查找所述网页样式表中的背景标签；提取网页模块中带所述背景标签的网页图片，带背景标签的网页图片是指在网页页面中显示的不能另存为本地的图片；

参数设置模块，用于在合并图片前，提供选项供用户进行参数设置并获取设置的图片合并参数；

图片合并模块，用于在输出网页时按照所述图片合并参数合并所述网页图片，其中，将同一网页模块中的图片合并成一张图片，采用HTML5技术新建两个画布，其中第一画布负责将网页图片按照设置的图片合并参数进行排列，第二画布负责实时将第一画布上的图片绘制成合并后的图片。

6.根据权利要求5所述的图片合并装置，其特征在于，所述图片合并模块用于根据所述网页样式表获取所述网页图片中的非重复图片，按照所述图片合并参数合并所述非重复图片。

7.根据权利要求5所述的图片合并装置，其特征在于，还包括：

网页样式表更新模块，用于获取所述网页图片在合并后的图片中的位置信息，将所述位置信息加入所述网页样式表中。

8.根据权利要求5至7中任意一项所述的图片合并装置，其特征在于，所述图片合并参数包括水平偏移量、垂直偏移量、背景颜色值、是否合并重复图片的标记中的一种或多种的组合。