网页图片处理方法及装置制造方法
【专利摘要】本发明公开了一种网页图片处理方法及装置，属于网页设计领域。所述方法包括：将预定子目录下的多张小图片合并成一张大图片；获取每个小图片在大图片中的位置；将所述样式表文件中对每个小图片的引用修改为对大图片的引用，并在所述样式表文件中添加小图片在大图片中的位置信息。根据本发明，能够提高网页开发的效率。
【专利说明】网页图片处理方法及装置
【技术领域】
[0001]本发明涉及网页设计领域，具体涉及一种网页图片处理方法及装置。
【背景技术】
[0002]在web (网页)前端开发中，经常需要使用一些小图片，一般可以通过css (层叠样式表)中的background-1mage (背景图片)属性来引用这些小图片。由于每个小图片都是一个独立的网络资源，为了提高页面访问速度，出现了 css sprites(图片合并)技术，其将一个页面涉及到的多个零星的小图片合并到一张大图片中去，这样，客户端就不需要对每个小图片进行单独的请求，只需要请求合并后的大图片，从而减少了网络请求数。当整幅大图片载入完成后，可以使用CSS方法通过设置background-position (背景位置)的方式来定位到小图片在大图片中的位置，完成所需图片的准确调用。
[0003]现有的实现图片合并的一种方案是完全人工通过photoshop软件进行拼图，css里的background-1mage (背景图片)直接引用大图片的地址，然后在photoshop里测量每张小图片的位置，人工在对应的css里增加background-position的代码。例如,测量一张小图片在大图片的位置为OlOpx,那么需要在css里手工加上代码:background_position:
O-1Opx ；。这种方式非常耗时耗力，并且如果有图片增加、修改、删除时都要重新打开photoshop软件进行操作。
【发明内容】
[0004]鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的网页图片处理方法及装置。
[0005]依据本发明的一个方面，提供了一种网页图片处理方法，其中，网页的样式表文件中包括对预定子目录下的多张小图片的引用，所述方法包括:
[0006]将预定子目录下的多张小图片合并成一张大图片；
[0007]获取每个小图片在大图片中的位置；
[0008]将所述样式表文件中对每个小图片的引用修改为对大图片的引用，并在所述样式表文件中添加小图片在大图片中的位置信息。
[0009]可选地，所述方法还包括:获取所述样式表文件的配置信息，并从所述配置信息中获取待合并的多个小图片所在的预定子目录。
[0010]可选地，所述将所述样式表文件中对每个小图片的引用修改为对大图片的引用，并在所述样式表文件中添加小图片在大图片中的位置信息，包括:
[0011]将所述样式表文件中引用小图片的“背景图片”属性值修改为大图片的url地址，并添加引用小图片的“背景位置”属性，将“背景位置”属性值设置为小图片在大图片中的位置。
[0012]可选地，所述样式表文件为css文件。
[0013]根据本发明的另一方面，提供了一种网页图片处理装置，其中，网页的样式表文件中包括对预定子目录下的多张小图片的引用，所述装置包括:
[0014]图片合并单元，适于将预定子目录下的多张小图片合并成一张大图片；
[0015]位置获取单元，适于获取每个小图片在大图片中的位置；
[0016]样式表修改单元，适于将所述样式表文件中对每个小图片的引用修改为对大图片的引用，并在所述样式表文件中添加小图片在大图片中的位置信息。
[0017]可选地，所述装置还包括配置信息获取单元，适于获取所述样式表文件的配置信息，并从所述配置信息中获取待合并的多个小图片所在的预定子目录。
[0018]可选地，所述样式表修改单元进一步适于:将所述样式表文件中弓丨用小图片的“背景图片”属性值修改为大图片的u rl地址，并添加引用小图片的“背景位置”属性，将“背景位置”属性值设置为小图片在大图片中的位置。
[0019]可选地，所述样式表文件为css文件。
[0020]根据本发明的上述技术方案，只要将待合并的多张小图片放在同一个子目录下，合并小图片和替换样式表文件代码都可以自动化进行，从而大大提高了网页开发的效率。由于每次样式表文件代码上线时都会基于子目录下的图片重新生成，所以有图片增加、修改、删除等操作时，只要修改子目录下对应的图片即可，基本上不用人工干预。
[0021]上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的【具体实施方式】。
【专利附图】
【附图说明】
[0022]通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中:
[0023]图1示出了根据本发明一个实施例的网页图片处理方法的流程图；
[0024]图2示出了根据本发明一个实施例的网页图片处理装置的结构图；
[0025]图3示出了本发明实施例中合并前的小图片示意图；
[0026]图4示出了本发明实施例中合并后的大图片示意图。
【具体实施方式】
[0027]下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
[0028]针对现有技术中实现css sprites 一直没有很好的自动化方案，导致网页的开发效率低下的问题，本发明实施例提供一种网页图片处理方法及装置，通过一种子目录的结构方式，将需要合并成一张大图片的多张小图片放在一个子目录里，开发时样式表文件里直接引用子目录里的小图片，样式表文件代码上线时基于子目录进行编译，将子目录里的小图片合并为一张大图片，根据子目录查找到样式表文件里哪些地方引用这些小图片，将样式表文件对每个小图片的引用修改为对大图片的引用，并添加小图片在大图片中的位置信息，实现了合并小图片和替换样式表文件代码的自动化，从而大大提高了网页开发的效率。由于每次样式表文件上线时都会基于子目录下的图片重新生成，所以有图片增加、修改、删除等操作时，只要修改子目录下对应的图片即可，基本不用人工干预。
[0029]图1示出了根据本发明一个实施例的网页图片处理方法的流程图。参照图1，所述方法可以包括:
[0030]步骤102，将预定子目录下的多张小图片合并成一张大图片；
[0031]根据本发明的实施例，在进行网页开发时，将需要在网页中显示的多张小图片放在一个预定子目录下，网页的样式表文件中包括对预定子目录下的多张小图片的引用。在本步骤中，为减少客户端的请求次数，需要对这些小图片进行合并。将多张图片合并成一张图片的算法有许多种，本发明实施例对具体的合并图片的算法不做限制。
[0032]步骤104，获取每个小图片在大图片中的位置；
[0033]图片合成后，客户端不需要对每个小图片单独发出请求，只需要请求并下载合并得到的大图片。为了在网页中显示小图片，需要对小图片进行定位，于是，通过本步骤来获取每个小图片在大图片中的位置。定位小图片在大图片中的位置的算法也有许多种，本发明实施例对具体的定位小图片的算法也不做限制。
[0034]步骤106，将所述样式表文件中对每个小图片的引用修改为对大图片的引用，并在所述样式表文件中添加小图片在大图片中的位置信息。
[0035]在合并得到大图片以及定位到小图片在大图片中的位置后，就可以根据这些信息对样式表文件进行修改，即将样式表文件对每个小图片的引用修改为对大图片的引用，并添加小图片在大图片中的位置信息，由于每次样式表文件上线时都会基于子目录下的图片重新生成，所以有图片增加、修改、删除等操作时，只要修改子目录下对应的图片即可，基本不用人工干预，大大提高了网页开发的效率。
[0036]所述样式表文件可以为css (层叠样式表)文件，所述步骤106可以包括:将所述样式表文件中引用小图片的“背景图片” background-1mage属性值修改为大图片的url地址，并添加引用小图片的“背景位置” background-position属性，将background-position “背景位置”属性值设置为小图片在大图片中的位置。
[0037]可选地，所述方法还可以包括:获取所述样式表文件的配置信息，并从所述配置信息中获取待合并的多张小图片所在的预定子目录。在网页开发时，开发人员完成样式表文件时，可以为样式表文件添加配置信息，将需要合并的多个小图片所在的子目录添加到所述配置信息中，所述配置信息中还可以包括合并得到的大图片的存放位置信息(url地址)以及图片的合并方向，图片的合并方向例如为水平方向或垂直方向。在获取到所述配置信息后，就可以根据获取到的配置信息执行步骤102?步骤106，具体地，根据配置信息可以确定需要对哪些图片进行合并，以及，需要对哪些图片的引用进行修改并添加位置信息。
[0038]在本发明实施例中，小文件和大文件中的“小”和“大”是相对概念，合并前的各文件称为小文件，合并后得到的文件称为大文件。
[0039]以下给出本发明的一个应用实例，在该应用实例中，所述样式表文件为css文件。
[0040]在开发中，在img目录下添加了 icons子目录,在icons子目录下添加了如图3所示的6张小图片。
[0041]在css里通过下面的方式来引用这些小图片:
【权利要求】
1.一种网页图片处理方法，其中，网页的样式表文件中包括对预定子目录下的多张小图片的引用，所述方法包括: 将预定子目录下的多张小图片合并成一张大图片； 获取每个小图片在大图片中的位置； 将所述样式表文件中对每个小图片的引用修改为对大图片的引用，并在所述样式表文件中添加小图片在大图片中的位置信息。
2.如权利要求1所述的网页图片处理方法，其中，还包括:获取所述样式表文件的配置信息，并从所述配置信息中获取待合并的多个小图片所在的预定子目录。
3.如权利要求1或2所述的网页图片处理方法，其中，所述将所述样式表文件中对每个小图片的引用修改为对大图片的引用，并在所述样式表文件中添加小图片在大图片中的位置信息，包括: 将所述样式表文件中引用小图片的“背景图片”属性值修改为大图片的url地址，并添加引用小图片的“背景位置”属性，将“背景位置”属性值设置为小图片在大图片中的位置。
4.如权利要求3所述的网页图片处理方法，其中，所述样式表文件为css文件。
5.一种网页图片处理装置，其中，网页的样式表文件中包括对预定子目录下的多张小图片的引用，所述装置包括: 图片合并单元，适于将预定子目录下的多张小图片合并成一张大图片； 位置获取单元，适于获取每个小图片在大图片中的位置； 样式表修改单元，适于将所述样式表文件中对每个小图片的引用修改为对大图片的引用，并在所述样式表文件中添加小图片在大图片中的位置信息。
6.如权利要求5所述的网页图片处理装置，其中，还包括配置信息获取单元，适于获取所述样式表文件的配置信息，并从所述配置信息中获取待合并的多个小图片所在的预定子目录。
7.如权利要求5或6所述的网页图片处理装置，其中，所述样式表修改单元进一步适于: 将所述样式表文件中引用小图片的“背景图片”属性值修改为大图片的url地址，并添加引用小图片的“背景位置”属性，将“背景位置”属性值设置为小图片在大图片中的位置。
8.如权利要求7所述的网页图片处理装置，其中，所述样式表文件为css文件。
【文档编号】G06F17/30GK103577552SQ201310487664
【公开日】2014年2月12日 申请日期:2013年10月17日 优先权日:2013年10月17日
【发明者】李成银 申请人:北京奇虎科技有限公司, 奇智软件（北京）有限公司