[发明专利]网页图片处理方法及装置

说明书

技术领域

本发明涉及网页设计领域，具体涉及一种网页图片处理方法及装置。

背景技术

在web(网页)前端开发中，经常需要使用一些小图片，一般可以通过css(层叠样式表)中的background-image(背景图片)属性来引用这些小图片。由于每个小图片都是一个独立的网络资源，为了提高页面访问速度，出现了css sprites(图片合并)技术，其将一个页面涉及到的多个零星的小图片合并到一张大图片中去，这样，客户端就不需要对每个小图片进行单独的请求，只需要请求合并后的大图片，从而减少了网络请求数。当整幅大图片载入完成后，可以使用css方法通过设置background-position(背景位置)的方式来定位到小图片在大图片中的位置，完成所需图片的准确调用。

现有的实现图片合并的一种方案是完全人工通过photoshop软件进行拼图，css里的background-image(背景图片)直接引用大图片的地址，然后在photoshop里测量每张小图片的位置，人工在对应的css里增加background-position的代码。例如，测量一张小图片在大图片的位置为010px，那么需要在css里手工加上代码：background-position：0-10px；。这种方式非常耗时耗力，并且如果有图片增加、修改、删除时都要重新打开photoshop软件进行操作。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的网页图片处理方法及装置。

依据本发明的一个方面，提供了一种网页图片处理方法，其中，网页的样式表文件中包括对预定子目录下的多张小图片的引用，所述方法包括：

将预定子目录下的多张小图片合并成一张大图片；

获取每个小图片在大图片中的位置；

将所述样式表文件中对每个小图片的引用修改为对大图片的引用，并在所述样式表文件中添加小图片在大图片中的位置信息。

可选地，所述方法还包括：获取所述样式表文件的配置信息，并从所述配置信息中获取待合并的多个小图片所在的预定子目录。

可选地，所述将所述样式表文件中对每个小图片的引用修改为对大图片的引用，并在所述样式表文件中添加小图片在大图片中的位置信息，包括：

将所述样式表文件中引用小图片的“背景图片”属性值修改为大图片的url地址，并添加引用小图片的“背景位置”属性，将“背景位置”属性值设置为小图片在大图片中的位置。

可选地，所述样式表文件为css文件。

根据本发明的另一方面，提供了一种网页图片处理装置，其中，网页的样式表文件中包括对预定子目录下的多张小图片的引用，所述装置包括：

图片合并单元，适于将预定子目录下的多张小图片合并成一张大图片；

位置获取单元，适于获取每个小图片在大图片中的位置；

样式表修改单元，适于将所述样式表文件中对每个小图片的引用修改为对大图片的引用，并在所述样式表文件中添加小图片在大图片中的位置信息。

可选地，所述装置还包括配置信息获取单元，适于获取所述样式表文件的配置信息，并从所述配置信息中获取待合并的多个小图片所在的预定子目录。

可选地，所述样式表修改单元进一步适于：将所述样式表文件中引用小图片的“背景图片”属性值修改为大图片的u rl地址，并添加引用小图片的“背景位置”属性，将“背景位置”属性值设置为小图片在大图片中的位置。

可选地，所述样式表文件为css文件。

根据本发明的上述技术方案，只要将待合并的多张小图片放在同一个子目录下，合并小图片和替换样式表文件代码都可以自动化进行，从而大大提高了网页开发的效率。由于每次样式表文件代码上线时都会基于子目录下的图片重新生成，所以有图片增加、修改、删除等操作时，只要修改子目录下对应的图片即可，基本上不用人工干预。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：