CN104063492A - 图片合并方法和图片合并系统 - Google Patents
图片合并方法和图片合并系统 Download PDFInfo
- Publication number
- CN104063492A CN104063492A CN201410318927.XA CN201410318927A CN104063492A CN 104063492 A CN104063492 A CN 104063492A CN 201410318927 A CN201410318927 A CN 201410318927A CN 104063492 A CN104063492 A CN 104063492A
- Authority
- CN
- China
- Prior art keywords
- picture
- synthesis
- equations
- information
- coordinates
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 76
- 230000002194 synthesizing effect Effects 0.000 title abstract 4
- 238000012545 processing Methods 0.000 claims abstract description 12
- 230000015572 biosynthetic process Effects 0.000 claims description 117
- 238000003786 synthesis reaction Methods 0.000 claims description 117
- 238000010276 construction Methods 0.000 claims description 5
- 230000008569 process Effects 0.000 abstract description 38
- 239000000047 product Substances 0.000 description 38
- 238000010586 diagram Methods 0.000 description 9
- 238000013461 design Methods 0.000 description 7
- 230000007246 mechanism Effects 0.000 description 5
- 230000004048 modification Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 4
- 230000008859 change Effects 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 239000006227 byproduct Substances 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 230000007812 deficiency Effects 0.000 description 1
- 238000000151 deposition Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000012634 fragment Substances 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/10—File systems; File servers
- G06F16/16—File or folder operations, e.g. details of user interfaces specifically adapted to file systems
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T3/00—Geometric image transformations in the plane of the image
- G06T3/40—Scaling of whole images or parts thereof, e.g. expanding or contracting
- G06T3/4038—Image mosaicing, e.g. composing plane images from plane sub-images
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- General Engineering & Computer Science (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明提供了一种图片合并系统和图片合并方法，图片合并方法包括：复制步骤，扫描开发态目录下的级联样式表文件，并将所述级联样式表文件复制到产品态目录下；查找步骤，读取所述开发态目录下的级联样式表文件，查找出所述级联样式表文件中引用的图片；处理步骤，计算所述图片在预合成图片中的目标坐标信息，并将所述产品态目录下对应的引用的图片的路径修改为所述预合成图片的路径，以及在所述产品态目录下的所述图片中添加所述目标坐标信息；图片生成步骤，根据所述图片中的所述目标坐标信息和所述预合成图片的路径生成所述预合成图片。通过本发明的技术方案，可以满足不同项目组对于图片的个性化需求，从而提供一种简单、易用、自动的图片合并工具。
Description
技术领域
本发明涉及图片处理技术领域，具体而言，涉及一种图片合并方法和图片合并系统。
背景技术
在大型的网站中，会存在大量的图片，客户端每加载一张图片就会向服务器发送一次http请求，这样就会给服务器一定的压力，影响网页的加载性能。
针对上面的问题，很多的互联网公司都用了图片合并的解决方案。首先将这些大量琐碎的图片合成一张大图，之后综合运用CSS(CascadingStyle Sheets，级联样式表)的background-position、width、height在合并大图中对小图进行准确定位，其中background-position代表小图在大图中的坐标值，width和height代表页面元素的宽和高。
这个解决方案能带来以下的好处。
1)大幅度减少图片的http请求次数，从而提高网页的加载速度。
2)有效的减小图片的大小，实践证明合并大图的大小小于小图大小的总和。
3)网页图片显示过程的整体性增强，当合并的大图加载完成后，网页中的图片会同时显示出来，而不是每个图片单独显示出来。
4)方便网站风格变换，当需要改变网站的主题色时，只需更改一张图片的色彩即可。
图1是百度首页的合成图片的片段。这种方案提高了网站的性能，增强了用户体验。但是，也有很多的不足。
如图2的流程所示，首先是在构建阶段，先要把所有的小图利用画图工具手工合并成一张大图，然后再利用工具精确定位小图在大图中的坐标值，并将其整理成一个Excel表格，之后再在CSS中加入每一个图片的坐标值。可见这个过程是极其繁琐和麻烦的，当图片数量非常大时，需要付出很大的精力和耐心。而且，这个过程可能需要开发和UE的共同参与下完成。
然后是维护阶段，如果需要变更图片，重新构建合并大图已经是不可能的事情了，这样只能通过增加图片和修改CSS完成。如果网站有频繁的变更网页图片的需求，合并大图的体积可能就会迅速增长，直到无法维护而重新手工构建。这些工作也需要开发和UE协调下完成。
综上，很多互联网公司采用的大量图片合并方案虽然带来了很多性能和体验上的提升，但是其构建维护过程过于繁琐，且不能满足图片重复渲染的需求。
因此，需要一种新的技术方案，可以满足不同项目组对于图片的个性化需求，从而提供一种简单、易用、自动的图片合并工具。
发明内容
本发明正是基于上述问题，提出了一种新的技术方案，可以满足不同项目组对于图片的个性化需求，从而提供一种简单、易用、自动的图片合并工具。
有鉴于此，本发明提出了一种图片合并方法，包括：复制步骤，扫描开发态目录下的级联样式表文件，并将所述级联样式表文件复制到产品态目录下；查找步骤，读取所述开发态目录下的级联样式表文件，查找出所述级联样式表文件中引用的图片；处理步骤，计算所述图片在预合成图片中的目标坐标信息，并将所述产品态目录下对应的引用的图片的路径修改为所述预合成图片的路径，以及在所述产品态目录下的所述图片中添加所述目标坐标信息；图片生成步骤，根据所述图片中的所述目标坐标信息和所述预合成图片的路径生成所述预合成图片。
在该技术方案中，将产品态目录和开发态目录分离，这样，使得合并文件不影响正常的开发态的文件。并且整个图片合并过程完全自动化，使得开发人员专注开发，设计人员专注设计，而不必关注合并过程。其中，产品态的目录是开发态目录的一份经过CSS修改和只存合并图片的拷贝，开发人员只需关注开发态目录，产品态的目录由工具自动构建完成。同时将图片合并，可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度。
在上述技术方案中，优选地，所述处理步骤还包括：根据所述图片的背景重绘属性信息，将所述图片分成第一类图片和第二类图片，计算所述第一类图片在所述预合成图片中的纵向坐标，以得到所述第一类图片的第一目标坐标信息，其中，所述第一类图片的横向坐标为零；计算所述第二类图片在所述预合成图片中的横向坐标，以得到所述第二类图片的第二目标坐标信息，其中，所述第二类图片的纵向坐标为零；将所述第一类图片的路径和所述第一目标坐标信息添加到水平重绘图片队列，将所述第二类图片的路径和所述第二目标坐标信息添加到垂直重绘图片队列；将所述第一类图片和所述第二类图片的路径修改为所述预合成图片的路径，并在所述第一类图片中添加所述第一目标坐标信息，在所述第二类图片中添加所述第二目标坐标信息。
在该技术方案中，通过构建水平方向和垂直方向上的两个大图，可以实现图片的水平和垂直方向的重复渲染，从而使图片可以适应不同的屏幕分辨率。
在上述技术方案中，优选地，所述处理步骤还包括：获取所述第一类图片和所述第二类图片的高度信息和宽度信息；根据所述第一类图片的高度信息计算所述第一类图片在所述预合成图片中的纵向坐标，其中，所述纵向坐标为读取过的水平重绘图片的高度之和；根据所述第二类图片的宽度信息计算所述第二类图片在所述预合成图片中的横向坐标，其中，所述横向坐标为读取过的垂直重绘图片的宽度之和。
在上述技术方案中，优选地，所述图片生成步骤具体包括：计算所述水平重绘图片队列中第一类图片的最大宽度之和和最大高度之和，根据所述最大宽度之和和所述最大高度之和生成空白的所述预合成图片生成空白的第一预合成图片；计算所述垂直重绘图片队列中第二类图片的最大宽度之和和最大高度之和，根据所述最大宽度之和和所述最大高度之和生成空白的第二预合成图片；根据所述第一类图片的第一目标坐标信息确定所述第一类图片在所述第一预合成图片中的第一位置；根据所述第二类图片的第二目标坐标信息确定所述第二类图片在所述第二预合成图片中的第二位置；将所述第一类图片从所述第一位置沿水平方向绘制，直到绘制的图片的宽度等于所述第一类图片的最大宽度，以得到绘制后的第一预合成图片；将所述第二类图片从所述第二位置沿垂直方向绘制，直到绘制的图片的高度等于所述第二类图片的最大高度，以得到绘制后的第二预合成图片。
在该技术方案中，通过上述过程，就可以实现将需要水平重绘或垂直重绘的图片合成到一张大图中，从而可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度。
在上述技术方案中，优选地，所述图片生成步骤还包括：将所述绘制后的第一预合成图片和所述绘制后的第二预合成图片进行合并，以得到绘制后的预合成图片。
在该技术方案中，可以将水平重绘和竖直重绘以及其他默认不需要重复绘制的图片都合成到一张图片中，这样，不但可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度，同时还可以使合并图能够满足浏览器的图片重复渲染机制，以适应不同屏幕的分辨率。
根据本发明的另一方面，还提供了一种图片合并系统，包括：复制单元，扫描开发态目录下的级联样式表文件，并将所述级联样式表文件复制到产品态目录下；查找单元，读取所述开发态目录下的级联样式表文件，查找出所述级联样式表文件中引用的图片；处理单元，计算所述图片在预合成图片中的目标坐标信息，并将所述产品态目录下对应的引用的图片的路径修改为所述预合成图片的路径，以及在所述产品态目录下的所述图片中添加所述目标坐标信息；图片生成单元，根据所述图片中的所述目标坐标信息和所述预合成图片的路径生成所述预合成图片。
在该技术方案中，将产品态目录和开发态目录分离，这样，使得合并文件不影响正常的开发态的文件。并且整个图片合并过程完全自动化，使得开发人员专注开发，设计人员专注设计，而不必关注合并过程。其中，产品态的目录是开发态目录的一份经过CSS修改和只存合并图片的拷贝，开发人员只需关注开发态目录，产品态的目录由工具自动构建完成。同时将图片合并，可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度。
在上述技术方案中，优选地，所述处理单元还包括：分类单元，根据所述图片的背景重绘属性信息，将所述图片分成第一类图片和第二类图片，第一计算单元，计算所述第一类图片在所述预合成图片中的纵向坐标，以得到所述第一类图片的第一目标坐标信息，其中，所述第一类图片的横向坐标为零；第二计算单元，计算所述第二类图片在所述预合成图片中的横向坐标，以得到所述第二类图片的第二目标坐标信息，其中，所述第二类图片的纵向坐标为零；队列构建单元，将所述第一类图片的路径和所述第一目标坐标信息添加到水平重绘图片队列，将所述第二类图片的路径和所述第二目标坐标信息添加到垂直重绘图片队列；坐标添加单元，将所述第一类图片和所述第二类图片的路径修改为所述预合成图片的路径，并在所述第一类图片中添加所述第一目标坐标信息，在所述第二类图片中添加所述第二目标坐标信息。
在该技术方案中，通过构建水平方向和垂直方向上的两个大图，可以实现图片的水平和垂直方向的重复渲染，从而使图片可以适应不同的屏幕分辨率。
在上述技术方案中，优选地，所述处理单元还包括：信息获取单元，获取所述第一类图片和所述第二类图片的高度信息和宽度信息；第三计算单元，根据所述第一类图片的高度信息计算所述第一类图片在所述预合成图片中的纵向坐标，其中，所述纵向坐标为读取过的水平重绘图片的高度之和；第四计算单元，根据所述第二类图片的宽度信息计算所述第二类图片在所述预合成图片中的横向坐标，其中，所述横向坐标为读取过的垂直重绘图片的宽度之和。
在上述技术方案中，优选地，所述图片生成单元具体包括：第一空白图片生成单元，计算所述水平重绘图片队列中第一类图片的最大宽度之和和最大高度之和，根据所述最大宽度之和和所述最大高度之和生成空白的所述预合成图片生成空白的第一预合成图片；第二空白图片生成单元，计算所述垂直重绘图片队列中第二类图片的最大宽度之和和最大高度之和，根据所述最大宽度之和和所述最大高度之和生成空白的第二预合成图片；第一位置确定单元，根据所述第一类图片的第一目标坐标信息确定所述第一类图片在所述第一预合成图片中的第一位置；第二位置确定单元，根据所述第二类图片的第二目标坐标信息确定所述第二类图片在所述第二预合成图片中的第二位置；第一绘制单元，将所述第一类图片从所述第一位置沿水平方向绘制，直到绘制的图片的宽度等于所述第一类图片的最大宽度，以得到绘制后的第一预合成图片；第二绘制单元，将所述第二类图片从所述第二位置沿垂直方向绘制，直到绘制的图片的高度等于所述第二类图片的最大高度，以得到绘制后的第二预合成图片。
在该技术方案中，通过上述过程，就可以实现将需要水平重绘或垂直重绘的图片合成到一张大图中，从而可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度。
在上述技术方案中，优选地，所述图片生成单元还包括：合成单元，将所述绘制后的第一预合成图片和所述绘制后的第二预合成图片进行合并，以得到绘制后的预合成图片。
在该技术方案中，可以将水平重绘和竖直重绘以及其他默认不需要重复绘制的图片都合成到一张图片中，这样，不但可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度，同时还可以使合并图能够满足浏览器的图片重复渲染机制，以适应不同屏幕的分辨率。
通过以上技术方案，将产品态目录和开发态目录分离，这样，使得合并文件不影响正常的开发态的文件。并且整个图片合并过程完全自动化，使得开发人员专注开发，设计人员专注设计，而不必关注合并过程。其中，产品态的目录是开发态目录的一份经过CSS修改和只存合并图片的拷贝，开发人员只需关注开发态目录，产品态的目录由工具自动构建完成。同时将图片合并，可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度。
附图说明
图1示出了相关技术中合并图片段的效果示意图；
图2示出了相关技术中图片合并方法的流程图；
图3示出了根据本发明的实施例的图片合并方法的流程图；
图4示出了根据本发明的实施例的图片合并系统的框图；
图5示出了根据本发明的实施例的图片合并方法的具体流程图；
图6示出了根据本发明的实施例的修改CSS文件的流程图；
图7示出了根据本发明的实施例的图片合并的流程图；
图8示出了根据本发明的实施例的合并后图片的效果示意图。
具体实施方式
为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。
在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用其他不同于在此描述的其他方式来实施，因此，本发明的保护范围并不受下面公开的具体实施例的限制。
图3示出了根据本发明的实施例的图片合并方法的流程图。
如图3所示，根据本发明的实施例的图片合并方法，包括：复制步骤302，扫描开发态目录下的CSS文件，并将所述CSS文件复制到产品态目录下；查找步骤304，读取所述开发态目录下的CSS文件，查找出所述CSS文件中引用的图片；处理步骤306，计算所述图片在预合成图片中的目标坐标信息，并将所述产品态目录下对应的引用的图片的路径修改为所述预合成图片的路径，以及在所述产品态目录下的所述图片中添加所述目标坐标信息；图片生成步骤308，根据所述图片中的所述目标坐标信息和所述预合成图片的路径生成所述预合成图片。
在该技术方案中，将产品态目录和开发态目录分离，这样，使得合并文件不影响正常的开发态的文件。并且整个图片合并过程完全自动化，使得开发人员专注开发，设计人员专注设计，而不必关注合并过程。其中，产品态的目录是开发态目录的一份经过CSS修改和只存合并图片的拷贝，开发人员只需关注开发态目录，产品态的目录由工具自动构建完成。同时将图片合并，可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度。
在上述技术方案中，优选地，所述处理步骤306还包括：根据所述图片的背景重绘属性信息，将所述图片分成第一类图片和第二类图片，计算所述第一类图片在所述预合成图片中的纵向坐标，以得到所述第一类图片的第一目标坐标信息，其中，所述第一类图片的横向坐标为零；计算所述第二类图片在所述预合成图片中的横向坐标，以得到所述第二类图片的第二目标坐标信息，其中，所述第二类图片的纵向坐标为零；将所述第一类图片的路径和所述第一目标坐标信息添加到水平重绘图片队列，将所述第二类图片的路径和所述第二目标坐标信息添加到垂直重绘图片队列；将所述第一类图片和所述第二类图片的路径修改为所述预合成图片的路径，并在所述第一类图片中添加所述第一目标坐标信息，在所述第二类图片中添加所述第二目标坐标信息。
在该技术方案中，通过构建水平方向和垂直方向上的两个大图，可以实现图片的水平和垂直方向的重复渲染，从而使图片可以适应不同的屏幕分辨率。
在上述技术方案中，优选地，所述处理步骤306还包括：获取所述第一类图片和所述第二类图片的高度信息和宽度信息；根据所述第一类图片的高度信息计算所述第一类图片在所述预合成图片中的纵向坐标，其中，所述纵向坐标为读取过的水平重绘图片的高度之和；根据所述第二类图片的宽度信息计算所述第二类图片在所述预合成图片中的横向坐标，其中，所述横向坐标为读取过的垂直重绘图片的宽度之和。
在上述技术方案中，优选地，所述图片生成步骤308具体包括：计算所述水平重绘图片队列中第一类图片的最大宽度之和和最大高度之和，根据所述最大宽度之和和所述最大高度之和生成空白的所述预合成图片生成空白的第一预合成图片；计算所述垂直重绘图片队列中第二类图片的最大宽度之和和最大高度之和，根据所述最大宽度之和和所述最大高度之和生成空白的第二预合成图片；根据所述第一类图片的第一目标坐标信息确定所述第一类图片在所述第一预合成图片中的第一位置；根据所述第二类图片的第二目标坐标信息确定所述第二类图片在所述第二预合成图片中的第二位置；将所述第一类图片从所述第一位置沿水平方向绘制，直到绘制的图片的宽度等于所述第一类图片的最大宽度，以得到绘制后的第一预合成图片；将所述第二类图片从所述第二位置沿垂直方向绘制，直到绘制的图片的高度等于所述第二类图片的最大高度，以得到绘制后的第二预合成图片。
在该技术方案中，通过上述过程，就可以实现将需要水平重绘或垂直重绘的图片合成到一张大图中，从而可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度。
在上述技术方案中，优选地，所述图片生成步骤308还包括：将所述绘制后的第一预合成图片和所述绘制后的第二预合成图片进行合并，以得到绘制后的预合成图片。
在该技术方案中，可以将水平重绘和竖直重绘以及其他默认不需要重复绘制的图片都合成到一张图片中，这样，不但可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度，同时还可以使合并图能够满足浏览器的图片重复渲染机制，以适应不同屏幕的分辨率。
图4示出了根据本发明的实施例的图片合并系统的框图。
如图4所示，根据本发明的实施例的图片合并系统400，包括：复制单元402，扫描开发态目录下的CSS文件，并将所述CSS文件复制到产品态目录下；查找单元404，读取所述开发态目录下的CSS文件，查找出所述CSS文件中引用的图片；处理单元406，计算所述图片在预合成图片中的目标坐标信息，并将所述产品态目录下对应的引用的图片的路径修改为所述预合成图片的路径，以及在所述产品态目录下的所述图片中添加所述目标坐标信息；图片生成单元408，根据所述图片中的所述目标坐标信息和所述预合成图片的路径生成所述预合成图片。
在该技术方案中，将产品态目录和开发态目录分离，这样，使得合并文件不影响正常的开发态的文件。并且整个图片合并过程完全自动化，使得开发人员专注开发，设计人员专注设计，而不必关注合并过程。其中，产品态的目录是开发态目录的一份经过CSS修改和只存合并图片的拷贝，开发人员只需关注开发态目录，产品态的目录由工具自动构建完成。同时将图片合并，可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度。
在上述技术方案中，优选地，所述处理单元406还包括：分类单元4062，根据所述图片的背景重绘属性信息，将所述图片分成第一类图片和第二类图片；第一计算单元4064，计算所述第一类图片在所述预合成图片中的纵向坐标，以得到所述第一类图片的第一目标坐标信息，其中，所述第一类图片的横向坐标为零；第二计算单元4066，计算所述第二类图片在所述预合成图片中的横向坐标，以得到所述第二类图片的第二目标坐标信息，其中，所述第二类图片的纵向坐标为零；队列构建单元4068，将所述第一类图片的路径和所述第一目标坐标信息添加到水平重绘图片队列，将所述第二类图片的路径和所述第二目标坐标信息添加到垂直重绘图片队列；坐标添加单元40610，将所述第一类图片和所述第二类图片的路径修改为所述预合成图片的路径，并在所述第一类图片中添加所述第一目标坐标信息，在所述第二类图片中添加所述第二目标坐标信息。
在该技术方案中，通过构建水平方向和垂直方向上的两个大图，可以实现图片的水平和垂直方向的重复渲染，从而使图片可以适应不同的屏幕分辨率。
在上述技术方案中，优选地，所述处理单元406还包括：信息获取单元40612，获取所述第一类图片和所述第二类图片的高度信息和宽度信息；第三计算单元40614，根据所述第一类图片的高度信息计算所述第一类图片在所述预合成图片中的纵向坐标，其中，所述纵向坐标为读取过的水平重绘图片的高度之和；第四计算单元40616，根据所述第二类图片的宽度信息计算所述第二类图片在所述预合成图片中的横向坐标，其中，所述横向坐标为读取过的垂直重绘图片的宽度之和。
在上述技术方案中，优选地，所述图片生成单元408具体包括：第一空白图片生成单元4082，计算所述水平重绘图片队列中第一类图片的最大宽度之和和最大高度之和，根据所述最大宽度之和和所述最大高度之和生成空白的所述预合成图片生成空白的第一预合成图片；第二空白图片生成单元4084，计算所述垂直重绘图片队列中第二类图片的最大宽度之和和最大高度之和，根据所述最大宽度之和和所述最大高度之和生成空白的第二预合成图片；第一位置确定单元4086，根据所述第一类图片的第一目标坐标信息确定所述第一类图片在所述第一预合成图片中的第一位置；第二位置确定单元，根据所述第二类图片的第二目标坐标信息确定所述第二类图片在所述第二预合成图片中的第二位置；第一绘制单元4088，将所述第一类图片从所述第一位置沿水平方向绘制，直到绘制的图片的宽度等于所述第一类图片的最大宽度，以得到绘制后的第一预合成图片；第二绘制单元40810，将所述第二类图片从所述第二位置沿垂直方向绘制，直到绘制的图片的高度等于所述第二类图片的最大高度，以得到绘制后的第二预合成图片。
在该技术方案中，通过上述过程，就可以实现将需要水平重绘或垂直重绘的图片合成到一张大图中，从而可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度。
在上述技术方案中，优选地，所述图片生成单元408还包括：合成单元40812，将所述绘制后的第一预合成图片和所述绘制后的第二预合成图片进行合并，以得到绘制后的预合成图片。
在该技术方案中，可以将水平重绘和竖直重绘以及其他默认不需要重复绘制的图片都合成到一张图片中，这样，不但可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度，同时还可以使合并图能够满足浏览器的图片重复渲染机制，以适应不同屏幕的分辨率。
通过以上技术方案，将产品态目录和开发态目录分离，这样，使得合并文件不影响正常的开发态的文件。并且整个图片合并过程完全自动化，使得开发人员专注开发，设计人员专注设计，而不必关注合并过程。其中，产品态的目录是开发态目录的一份经过CSS修改和只存合并图片的拷贝，开发人员只需关注开发态目录，产品态的目录由工具自动构建完成。同时将图片合并，可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度。
图5示出了根据本发明的实施例的图片合并方法的具体流程图。
如图5所示，根据本发明的实施例的图片合并方法的具体流程如下：
步骤502，扫描并复制开发态下的CSS文件到产品态目录下。这样，将产品态目录和开发态目录的分离，使得合并文件不影响正常的开发态的文件。
步骤504，遍历所有CSS文件和CSS文件中的引用图片，修改CSS，并将图片路径按遍历顺序放入到图片队列中。即主要是修改CSS文件，在每个引用图片后面加上坐标。
步骤506，图片的合并。从图片队列中读取图片，按一定的规则对图片进行合并。
下面详细说明修改CSS文件和图片合成的具体流程。
如图6所示，根据本发明的实施例的修改CSS文件的流程如下：
步骤602，读取一个CSS文件。
步骤604，定位到包含有引用图片路径的一行。
步骤606，获取图片的高度和宽度。
步骤608，判断background-repeat的值(X或Y)，根据判断结果将图片分成两类。如需要水平重绘和不需要重绘的分到一类，需要垂重绘的分到一类。
步骤610，对于水平重绘的图片，计算小图在大图中纵向的坐标，纵向坐标＝读取过的水平重绘图片高度和，横向坐标＝0。
步骤612，将小图路径和坐标信息加入水平重绘图片队列。
步骤614，修改background-image为v.png。
步骤616，对于垂直重绘的图片，计算小图在大图中横向向的坐标，横向坐标＝读取过的垂直重绘图片宽度和，纵向坐标＝0。
步骤618，将小图路径和坐标信息加入垂直重绘图片队列。
步骤620，修改background-image为h.png。
步骤622，将横向坐标和纵向坐标加入到CSS中。
步骤624，判断是否结束。当判断结果为是时，结束步骤，否则返回步骤604。
上述流程是修改一个CSS文件的过程，可见经过这个过程，会完成两部分的工作：一部分是修改了CSS文件中引用图片路径为大图文件路径和加入了小图在大图中的坐标值；另一部分是生成了两个图片路径队列，一个是需水平重复的图片队列，一个是需垂直重复的图片队列，它们存放了图片的路径和要在大图中绘制的坐标信息，用于下一步图片的合并处理。
下面以水平方向重绘的图片为例，详细说明图片合并的过程。
如图7所示，图片合并包括以下步骤：
步骤702，计算水平重绘图片队列中的图片的最大宽度和高度之和。
步骤704，生成一张空白的大图，宽度和高度等于上一步的宽度和高度。
步骤706，从队列中取出一个图片信息。
步骤708，根据图片的纵向坐标定位小图在大图中的位置。
步骤710，将小图从指定位置处沿水平方向重复绘制，直到达到最大宽度。
步骤712，判断水平重绘队列中是否还有元素，当判断结果为是时，返回步骤706，否则，结束流程。
经过上面过程就能将需要水平重绘的图片自动的合成一张大图v.png，默认不需重复绘制的图片也会合到这张图中，该图如图8所示，浏览器用background-position中的坐标可以定位到小图的位置，再根据要填充的网页元素的height和width即可实现与未做图片合并之前同样的显示效果。
综上所述，本技术方案具有以下特点：
1、开发态和产品态的分离。产品态的目录是开发态目录的一份经过CSS修改和只存合并图片的拷贝，开发人员只需关注开发态目录，产品态的目录由工具自动构建完成。
2、利用background-position、width、height来在合并的大图中定位小图中的位置。
3、工具自动化遍历开发目录下的所有CSS文件，找出CSS中引用的图片，计算其在大图中的坐标，修改相应产品态CSS的background-image，background-position，并将其加到大图中。
4、支持图片的水平和垂直方向重复渲染机制。通过构建两张合并大图h.png和v.png来实现，h.png用来存放需要垂直重绘的图片，整体表现为一张横向的大图，v.png存放需要水平重绘的图片，整体表现为一张垂直的大图。
5、基于Ant脚本来实现自动化的构建过程，中间件启动过程中执行构建脚本，完成全部的构建工作。
6、中间件启动后，如需变更图片，只需要运行一次脚本，无需重启中间件，即可实现合并图片的热替换。
7、全程基本上无需设计人员、开发人员参与。
以上结合附图详细说明了本发明的技术方案，通过本发明的技术方案，将产品态目录和开发态目录分离，这样，使得合并文件不影响正常的开发态的文件。并且整个图片合并过程完全自动化，使得开发人员专注开发，设计人员专注设计，而不必关注合并过程。其中，产品态的目录是开发态目录的一份经过CSS修改和只存合并图片的拷贝，开发人员只需关注开发态目录，产品态的目录由工具自动构建完成。同时将图片合并，可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度。
以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (10)
1.一种图片合并方法，其特征在于，包括：
复制步骤，扫描开发态目录下的级联样式表文件，并将所述级联样式表文件复制到产品态目录下；
查找步骤，读取所述开发态目录下的级联样式表文件，查找出所述级联样式表文件中引用的图片；
处理步骤，计算所述图片在预合成图片中的目标坐标信息，并将所述产品态目录下对应的引用的图片的路径修改为所述预合成图片的路径，以及在所述产品态目录下的所述图片中添加所述目标坐标信息；
图片生成步骤，根据所述图片中的所述目标坐标信息和所述预合成图片的路径生成所述预合成图片。
2.根据权利要求1所述的图片合并方法，其特征在于，所述处理步骤还包括：
根据所述图片的背景重绘属性信息，将所述图片分成第一类图片和第二类图片，
计算所述第一类图片在所述预合成图片中的纵向坐标，以得到所述第一类图片的第一目标坐标信息，其中，所述第一类图片的横向坐标为零；
计算所述第二类图片在所述预合成图片中的横向坐标，以得到所述第二类图片的第二目标坐标信息，其中，所述第二类图片的纵向坐标为零；
将所述第一类图片的路径和所述第一目标坐标信息添加到水平重绘图片队列，将所述第二类图片的路径和所述第二目标坐标信息添加到垂直重绘图片队列；
将所述第一类图片和所述第二类图片的路径修改为所述预合成图片的路径，并在所述第一类图片中添加所述第一目标坐标信息，在所述第二类图片中添加所述第二目标坐标信息。
3.根据权利要求2所述的图片合并方法，其特征在于，所述处理步骤还包括：
获取所述第一类图片和所述第二类图片的高度信息和宽度信息；
根据所述第一类图片的高度信息计算所述第一类图片在所述预合成图片中的纵向坐标，其中，所述纵向坐标为读取过的水平重绘图片的高度之和；
根据所述第二类图片的宽度信息计算所述第二类图片在所述预合成图片中的横向坐标，其中，所述横向坐标为读取过的垂直重绘图片的宽度之和。
4.根据权利要求3所述的图片合并方法，其特征在于，所述图片生成步骤具体包括：
计算所述水平重绘图片队列中第一类图片的最大宽度之和和最大高度之和，根据所述最大宽度之和和所述最大高度之和生成空白的所述预合成图片生成空白的第一预合成图片；
计算所述垂直重绘图片队列中第二类图片的最大宽度之和和最大高度之和，根据所述最大宽度之和和所述最大高度之和生成空白的第二预合成图片；
根据所述第一类图片的第一目标坐标信息确定所述第一类图片在所述第一预合成图片中的第一位置；
根据所述第二类图片的第二目标坐标信息确定所述第二类图片在所述第二预合成图片中的第二位置；
将所述第一类图片从所述第一位置沿水平方向绘制，直到绘制的图片的宽度等于所述第一类图片的最大宽度，以得到绘制后的第一预合成图片；
将所述第二类图片从所述第二位置沿垂直方向绘制，直到绘制的图片的高度等于所述第二类图片的最大高度，以得到绘制后的第二预合成图片。
5.根据权利要求4所述的图片合并方法，其特征在于，所述图片生成步骤还包括：
将所述绘制后的第一预合成图片和所述绘制后的第二预合成图片进行合并，以得到绘制后的预合成图片。
6.一种图片合并系统，其特征在于，包括：
复制单元，扫描开发态目录下的级联样式表文件，并将所述级联样式表文件复制到产品态目录下；
查找单元，读取所述开发态目录下的级联样式表文件，查找出所述级联样式表文件中引用的图片；
处理单元，计算所述图片在预合成图片中的目标坐标信息，并将所述产品态目录下对应的引用的图片的路径修改为所述预合成图片的路径，以及在所述产品态目录下的所述图片中添加所述目标坐标信息；
图片生成单元，根据所述图片中的所述目标坐标信息和所述预合成图片的路径生成所述预合成图片。
7.根据权利要求6所述的图片合并系统，其特征在于，所述处理单元还包括：
分类单元，根据所述图片的背景重绘属性信息，将所述图片分成第一类图片和第二类图片；
第一计算单元，计算所述第一类图片在所述预合成图片中的纵向坐标，以得到所述第一类图片的第一目标坐标信息，其中，所述第一类图片的横向坐标为零；
第二计算单元，计算所述第二类图片在所述预合成图片中的横向坐标，以得到所述第二类图片的第二目标坐标信息，其中，所述第二类图片的纵向坐标为零；
队列构建单元，将所述第一类图片的路径和所述第一目标坐标信息添加到水平重绘图片队列，将所述第二类图片的路径和所述第二目标坐标信息添加到垂直重绘图片队列；
坐标添加单元，将所述第一类图片和所述第二类图片的路径修改为所述预合成图片的路径，并在所述第一类图片中添加所述第一目标坐标信息，在所述第二类图片中添加所述第二目标坐标信息。
8.根据权利要求7所述的图片合并系统，其特征在于，所述处理单元还包括：
信息获取单元，获取所述第一类图片和所述第二类图片的高度信息和宽度信息；
第三计算单元，根据所述第一类图片的高度信息计算所述第一类图片在所述预合成图片中的纵向坐标，其中，所述纵向坐标为读取过的水平重绘图片的高度之和；
第四计算单元，根据所述第二类图片的宽度信息计算所述第二类图片在所述预合成图片中的横向坐标，其中，所述横向坐标为读取过的垂直重绘图片的宽度之和。
9.根据权利要求8所述的图片合并系统，其特征在于，所述图片生成单元具体包括：
第一空白图片生成单元，计算所述水平重绘图片队列中第一类图片的最大宽度之和和最大高度之和，根据所述最大宽度之和和所述最大高度之和生成空白的所述预合成图片生成空白的第一预合成图片；
第二空白图片生成单元，计算所述垂直重绘图片队列中第二类图片的最大宽度之和和最大高度之和，根据所述最大宽度之和和所述最大高度之和生成空白的第二预合成图片；
第一位置确定单元，根据所述第一类图片的第一目标坐标信息确定所述第一类图片在所述第一预合成图片中的第一位置；
第二位置确定单元，根据所述第二类图片的第二目标坐标信息确定所述第二类图片在所述第二预合成图片中的第二位置；
第一绘制单元，将所述第一类图片从所述第一位置沿水平方向绘制，直到绘制的图片的宽度等于所述第一类图片的最大宽度，以得到绘制后的第一预合成图片；
第二绘制单元，将所述第二类图片从所述第二位置沿垂直方向绘制，直到绘制的图片的高度等于所述第二类图片的最大高度，以得到绘制后的第二预合成图片。
10.根据权利要求9所述的图片合并系统，其特征在于，所述图片生成单元还包括：
合成单元，将所述绘制后的第一预合成图片和所述绘制后的第二预合成图片进行合并，以得到绘制后的预合成图片。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410318927.XA CN104063492B (zh) | 2014-07-04 | 2014-07-04 | 图片合并方法和图片合并系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410318927.XA CN104063492B (zh) | 2014-07-04 | 2014-07-04 | 图片合并方法和图片合并系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104063492A true CN104063492A (zh) | 2014-09-24 |
| CN104063492B CN104063492B (zh) | 2017-09-29 |
Family
ID=51551206
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410318927.XA Active CN104063492B (zh) | 2014-07-04 | 2014-07-04 | 图片合并方法和图片合并系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104063492B (zh) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105159634A (zh) * | 2015-07-10 | 2015-12-16 | 深圳市美贝壳科技有限公司 | 一种照片拼接投射的方法及装置 |
| CN106355207A (zh) * | 2016-08-31 | 2017-01-25 | 五矿电子商务有限公司 | 一种比对网页中合并图的方法和装置 |
| CN106649794A (zh) * | 2016-12-28 | 2017-05-10 | 北京奇虎科技有限公司 | 图片合成方法及装置 |
| CN108874829A (zh) * | 2017-05-12 | 2018-11-23 | 腾讯科技（深圳）有限公司 | 网页的处理方法、装置、智能设备及计算机存储介质 |
| CN109948123A (zh) * | 2018-11-27 | 2019-06-28 | 阿里巴巴集团控股有限公司 | 一种图像合并方法及装置 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090248831A1 (en) * | 2008-03-27 | 2009-10-01 | Scott Sean M | Dynamic image composition |
| CN102314434A (zh) * | 2010-06-30 | 2012-01-11 | 中兴通讯股份有限公司 | 页面背景图合并显示的方法及装置 |
| CN102622391A (zh) * | 2011-10-18 | 2012-08-01 | 北京小米科技有限责任公司 | 一种小图片处理方法 |
| CN103164443A (zh) * | 2011-12-14 | 2013-06-19 | 腾讯科技（深圳）有限公司 | 图片合并方法和装置 |
| CN103577552A (zh) * | 2013-10-17 | 2014-02-12 | 北京奇虎科技有限公司 | 网页图片处理方法及装置 |
-
2014
- 2014-07-04 CN CN201410318927.XA patent/CN104063492B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090248831A1 (en) * | 2008-03-27 | 2009-10-01 | Scott Sean M | Dynamic image composition |
| CN102314434A (zh) * | 2010-06-30 | 2012-01-11 | 中兴通讯股份有限公司 | 页面背景图合并显示的方法及装置 |
| CN102622391A (zh) * | 2011-10-18 | 2012-08-01 | 北京小米科技有限责任公司 | 一种小图片处理方法 |
| CN103164443A (zh) * | 2011-12-14 | 2013-06-19 | 腾讯科技（深圳）有限公司 | 图片合并方法和装置 |
| CN103577552A (zh) * | 2013-10-17 | 2014-02-12 | 北京奇虎科技有限公司 | 网页图片处理方法及装置 |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105159634A (zh) * | 2015-07-10 | 2015-12-16 | 深圳市美贝壳科技有限公司 | 一种照片拼接投射的方法及装置 |
| CN105159634B (zh) * | 2015-07-10 | 2018-07-06 | 深圳市美贝壳科技有限公司 | 一种照片拼接投射的方法及装置 |
| CN106355207A (zh) * | 2016-08-31 | 2017-01-25 | 五矿电子商务有限公司 | 一种比对网页中合并图的方法和装置 |
| CN106649794A (zh) * | 2016-12-28 | 2017-05-10 | 北京奇虎科技有限公司 | 图片合成方法及装置 |
| CN108874829A (zh) * | 2017-05-12 | 2018-11-23 | 腾讯科技（深圳）有限公司 | 网页的处理方法、装置、智能设备及计算机存储介质 |
| CN109948123A (zh) * | 2018-11-27 | 2019-06-28 | 阿里巴巴集团控股有限公司 | 一种图像合并方法及装置 |
| CN109948123B (zh) * | 2018-11-27 | 2023-06-02 | 创新先进技术有限公司 | 一种图像合并方法及装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104063492B (zh) | 2017-09-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104063492A (zh) | 图片合并方法和图片合并系统 | |
| US9953460B2 (en) | Garment simulation using thread and data level parallelism | |
| CN101014831B (zh) | 数字地图描绘系统 | |
| US9916070B1 (en) | Architectures and methods for creating and representing time-dependent imagery | |
| CN100517316C (zh) | 图像文件一览显示装置 | |
| CN104995657B (zh) | 用于调整图像大小的系统和方法 | |
| US11276220B2 (en) | Automatic and interactive animation driven by change-based heuristics | |
| CN102609517B (zh) | 一种矢量地图在线式综合服务方法及其系统 | |
| CN107861682A (zh) | 虚拟对象的移动控制方法和装置 | |
| CN103398719A (zh) | 数字地图描绘系统 | |
| CN108108194B (zh) | 用户界面编辑方法以及用户界面编辑器 | |
| CN106294822A (zh) | 一种电力数据可视化系统 | |
| CN103208225A (zh) | 一种瓦片地图制作方法及系统 | |
| US20180204376A1 (en) | Providing a tutorial for drawing a scaffold to guide a drawing of a three dimensional object | |
| JP2008033530A (ja) | 建築物リフォーム設計支援システム | |
| CN110741229A (zh) | 数字地图上指示符的动态变化的视觉属性 | |
| US20140362087A1 (en) | System And Method For Quickly Visualizing Oil And Gas Field Data | |
| Tatzgern | Situated visualization in augmented reality | |
| CN115510337B (zh) | 一种三维立体注记调度显示的方法 | |
| CN103069460B (zh) | 用于呈现钻井记录值的方法和系统 | |
| Sieber et al. | Atlas of Switzerland goes online and 3D—Concept, architecture and visualization methods | |
| Serpa et al. | A draw call-oriented approach for visibility of static and dynamic scenes with large number of triangles | |
| JP6341323B2 (ja) | 電子チラシ推薦システム、電子チラシ推薦サーバ、及びプログラム | |
| Gan et al. | Hybrid organization and visualization of the DSM combined with 3D building model | |
| Qu et al. | A spatial web service client based on Microsoft Bing Maps |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information |
Address after: 100094 Haidian District North Road, Beijing, No. 68 Applicant after: Yonyou Network Technology Co., Ltd. Address before: 100094 Beijing city Haidian District North Road No. 68, UFIDA Software Park Applicant before: UFIDA Software Co., Ltd. |
|
| COR | Change of bibliographic data | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |