图片合并方法和图片合并系统的制作方法

图片合并方法和图片合并系统的制作方法
【专利摘要】本发明提供了一种图片合并系统和图片合并方法，图片合并方法包括：复制步骤，扫描开发态目录下的级联样式表文件，并将所述级联样式表文件复制到产品态目录下；查找步骤，读取所述开发态目录下的级联样式表文件，查找出所述级联样式表文件中引用的图片；处理步骤，计算所述图片在预合成图片中的目标坐标信息，并将所述产品态目录下对应的引用的图片的路径修改为所述预合成图片的路径，以及在所述产品态目录下的所述图片中添加所述目标坐标信息；图片生成步骤，根据所述图片中的所述目标坐标信息和所述预合成图片的路径生成所述预合成图片。通过本发明的技术方案，可以满足不同项目组对于图片的个性化需求，从而提供一种简单、易用、自动的图片合并工具。
【专利说明】图片合并方法和图片合并系统

【技术领域】
[0001] 本发明涉及图片处理【技术领域】，具体而言，涉及一种图片合并方法和图片合并系 统。

【背景技术】
[0002] 在大型的网站中，会存在大量的图片，客户端每加载一张图片就会向服务器发送 一次http请求，这样就会给服务器一定的压力，影响网页的加载性能。
[0003] 针对上面的问题，很多的互联网公司都用了图片合并的解决方案。首先将这些 大量琐碎的图片合成一张大图，之后综合运用CSS(Cascading Style Sheets,级联样式 表）的background-position、width、height在合并大图中对小图进行准确定位，其中 background-position代表小图在大图中的坐标值，width和height代表页面元素的宽和 商。
[0004] 这个解决方案能带来以下的好处。
[0005] 1)大幅度减少图片的http请求次数，从而提高网页的加载速度。
[0006] 2)有效的减小图片的大小，实践证明合并大图的大小小于小图大小的总和。
[0007] 3)网页图片显示过程的整体性增强，当合并的大图加载完成后，网页中的图片会 同时显示出来，而不是每个图片单独显示出来。
[0008] 4)方便网站风格变换，当需要改变网站的主题色时，只需更改一张图片的色彩即 可。
[0009] 图1是百度首页的合成图片的片段。这种方案提高了网站的性能，增强了用户体 验。但是，也有很多的不足。
[0010] 如图2的流程所示，首先是在构建阶段，先要把所有的小图利用画图工具手工合 并成一张大图，然后再利用工具精确定位小图在大图中的坐标值，并将其整理成一个Excel 表格，之后再在CSS中加入每一个图片的坐标值。可见这个过程是极其繁琐和麻烦的，当图 片数量非常大时，需要付出很大的精力和耐心。而且，这个过程可能需要开发和UE的共同 参与下完成。
[0011] 然后是维护阶段，如果需要变更图片，重新构建合并大图已经是不可能的事情了， 这样只能通过增加图片和修改CSS完成。如果网站有频繁的变更网页图片的需求，合并大 图的体积可能就会迅速增长，直到无法维护而重新手工构建。这些工作也需要开发和UE协 调下完成。
[0012] 综上，很多互联网公司采用的大量图片合并方案虽然带来了很多性能和体验上的 提升，但是其构建维护过程过于繁琐，且不能满足图片重复渲染的需求。
[0013] 因此，需要一种新的技术方案，可以满足不同项目组对于图片的个性化需求，从而 提供一种简单、易用、自动的图片合并工具。


【发明内容】

[0014] 本发明正是基于上述问题，提出了一种新的技术方案，可以满足不同项目组对于 图片的个性化需求，从而提供一种简单、易用、自动的图片合并工具。
[0015] 有鉴于此，本发明提出了一种图片合并方法，包括：复制步骤，扫描开发态目录下 的级联样式表文件，并将所述级联样式表文件复制到产品态目录下；查找步骤，读取所述开 发态目录下的级联样式表文件，查找出所述级联样式表文件中引用的图片；处理步骤，计算 所述图片在预合成图片中的目标坐标信息，并将所述产品态目录下对应的引用的图片的路 径修改为所述预合成图片的路径，以及在所述产品态目录下的所述图片中添加所述目标坐 标信息；图片生成步骤，根据所述图片中的所述目标坐标信息和所述预合成图片的路径生 成所述预合成图片。
[0016] 在该技术方案中，将产品态目录和开发态目录分离，这样，使得合并文件不影响正 常的开发态的文件。并且整个图片合并过程完全自动化，使得开发人员专注开发，设计人员 专注设计，而不必关注合并过程。其中，产品态的目录是开发态目录的一份经过CSS修改和 只存合并图片的拷贝，开发人员只需关注开发态目录，产品态的目录由工具自动构建完成。 同时将图片合并，可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度。
[0017] 在上述技术方案中，优选地，所述处理步骤还包括：根据所述图片的背景重绘属性 信息，将所述图片分成第一类图片和第二类图片，计算所述第一类图片在所述预合成图片 中的纵向坐标，以得到所述第一类图片的第一目标坐标信息，其中，所述第一类图片的横向 坐标为零；计算所述第二类图片在所述预合成图片中的横向坐标，以得到所述第二类图片 的第二目标坐标信息，其中，所述第二类图片的纵向坐标为零；将所述第一类图片的路径和 所述第一目标坐标信息添加到水平重绘图片队列，将所述第二类图片的路径和所述第二目 标坐标信息添加到垂直重绘图片队列；将所述第一类图片和所述第二类图片的路径修改为 所述预合成图片的路径，并在所述第一类图片中添加所述第一目标坐标信息，在所述第二 类图片中添加所述第二目标坐标信息。
[0018] 在该技术方案中，通过构建水平方向和垂直方向上的两个大图，可以实现图片的 水平和垂直方向的重复渲染，从而使图片可以适应不同的屏幕分辨率。
[0019] 在上述技术方案中，优选地，所述处理步骤还包括：获取所述第一类图片和所述第 二类图片的高度信息和宽度信息；根据所述第一类图片的高度信息计算所述第一类图片在 所述预合成图片中的纵向坐标，其中，所述纵向坐标为读取过的水平重绘图片的高度之和； 根据所述第二类图片的宽度信息计算所述第二类图片在所述预合成图片中的横向坐标，其 中，所述横向坐标为读取过的垂直重绘图片的宽度之和。
[0020] 在上述技术方案中，优选地，所述图片生成步骤具体包括：计算所述水平重绘图片 队列中第一类图片的最大宽度之和和最大高度之和，根据所述最大宽度之和和所述最大高 度之和生成空白的所述预合成图片生成空白的第一预合成图片；计算所述垂直重绘图片队 列中第二类图片的最大宽度之和和最大高度之和，根据所述最大宽度之和和所述最大高度 之和生成空白的第二预合成图片；根据所述第一类图片的第一目标坐标信息确定所述第一 类图片在所述第一预合成图片中的第一位置；根据所述第二类图片的第二目标坐标信息确 定所述第二类图片在所述第二预合成图片中的第二位置；将所述第一类图片从所述第一位 置沿水平方向绘制，直到绘制的图片的宽度等于所述第一类图片的最大宽度，以得到绘制 后的第一预合成图片；将所述第二类图片从所述第二位置沿垂直方向绘制，直到绘制的图 片的高度等于所述第二类图片的最大高度，以得到绘制后的第二预合成图片。
[0021] 在该技术方案中，通过上述过程，就可以实现将需要水平重绘或垂直重绘的图片 合成到一张大图中，从而可以大幅减小http请求数量，减轻服务器压力，提高网页加载速 度。
[0022] 在上述技术方案中，优选地，所述图片生成步骤还包括：将所述绘制后的第一预合 成图片和所述绘制后的第二预合成图片进行合并，以得到绘制后的预合成图片。
[0023] 在该技术方案中，可以将水平重绘和坚直重绘以及其他默认不需要重复绘制的图 片都合成到一张图片中，这样，不但可以大幅减小http请求数量，减轻服务器压力，提高网 页加载速度，同时还可以使合并图能够满足浏览器的图片重复渲染机制，以适应不同屏幕 的分辨率。
[0024] 根据本发明的另一方面，还提供了一种图片合并系统，包括：复制单元，扫描开发 态目录下的级联样式表文件，并将所述级联样式表文件复制到产品态目录下；查找单元，读 取所述开发态目录下的级联样式表文件，查找出所述级联样式表文件中引用的图片；处理 单元，计算所述图片在预合成图片中的目标坐标信息，并将所述产品态目录下对应的引用 的图片的路径修改为所述预合成图片的路径，以及在所述产品态目录下的所述图片中添加 所述目标坐标信息；图片生成单元，根据所述图片中的所述目标坐标信息和所述预合成图 片的路径生成所述预合成图片。
[0025] 在该技术方案中，将产品态目录和开发态目录分离，这样，使得合并文件不影响正 常的开发态的文件。并且整个图片合并过程完全自动化，使得开发人员专注开发，设计人员 专注设计，而不必关注合并过程。其中，产品态的目录是开发态目录的一份经过CSS修改和 只存合并图片的拷贝，开发人员只需关注开发态目录，产品态的目录由工具自动构建完成。 同时将图片合并，可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度。
[0026] 在上述技术方案中，优选地，所述处理单元还包括：分类单元，根据所述图片的背 景重绘属性信息，将所述图片分成第一类图片和第二类图片，第一计算单元，计算所述第一 类图片在所述预合成图片中的纵向坐标，以得到所述第一类图片的第一目标坐标信息，其 中，所述第一类图片的横向坐标为零；第二计算单元，计算所述第二类图片在所述预合成图 片中的横向坐标，以得到所述第二类图片的第二目标坐标信息，其中，所述第二类图片的纵 向坐标为零；队列构建单元，将所述第一类图片的路径和所述第一目标坐标信息添加到水 平重绘图片队列，将所述第二类图片的路径和所述第二目标坐标信息添加到垂直重绘图片 队列；坐标添加单元，将所述第一类图片和所述第二类图片的路径修改为所述预合成图片 的路径，并在所述第一类图片中添加所述第一目标坐标信息，在所述第二类图片中添加所 述第二目标坐标信息。
[0027] 在该技术方案中，通过构建水平方向和垂直方向上的两个大图，可以实现图片的 水平和垂直方向的重复渲染，从而使图片可以适应不同的屏幕分辨率。
[0028] 在上述技术方案中，优选地，所述处理单元还包括：信息获取单元，获取所述第一 类图片和所述第二类图片的高度信息和宽度信息；第三计算单元，根据所述第一类图片的 高度信息计算所述第一类图片在所述预合成图片中的纵向坐标，其中，所述纵向坐标为读 取过的水平重绘图片的高度之和；第四计算单元，根据所述第二类图片的宽度信息计算所 述第二类图片在所述预合成图片中的横向坐标，其中，所述横向坐标为读取过的垂直重绘 图片的宽度之和。
[0029] 在上述技术方案中，优选地，所述图片生成单元具体包括：第一空白图片生成单 元，计算所述水平重绘图片队列中第一类图片的最大宽度之和和最大高度之和，根据所述 最大宽度之和和所述最大高度之和生成空白的所述预合成图片生成空白的第一预合成图 片；第二空白图片生成单元，计算所述垂直重绘图片队列中第二类图片的最大宽度之和和 最大高度之和，根据所述最大宽度之和和所述最大高度之和生成空白的第二预合成图片； 第一位置确定单元，根据所述第一类图片的第一目标坐标信息确定所述第一类图片在所述 第一预合成图片中的第一位置；第二位置确定单元，根据所述第二类图片的第二目标坐标 信息确定所述第二类图片在所述第二预合成图片中的第二位置；第一绘制单元，将所述第 一类图片从所述第一位置沿水平方向绘制，直到绘制的图片的宽度等于所述第一类图片的 最大宽度，以得到绘制后的第一预合成图片；第二绘制单元，将所述第二类图片从所述第二 位置沿垂直方向绘制，直到绘制的图片的高度等于所述第二类图片的最大高度，以得到绘 制后的第二预合成图片。
[0030] 在该技术方案中，通过上述过程，就可以实现将需要水平重绘或垂直重绘的图片 合成到一张大图中，从而可以大幅减小http请求数量，减轻服务器压力，提高网页加载速 度。
[0031] 在上述技术方案中，优选地，所述图片生成单元还包括：合成单元，将所述绘制后 的第一预合成图片和所述绘制后的第二预合成图片进行合并，以得到绘制后的预合成图 片。
[0032] 在该技术方案中，可以将水平重绘和坚直重绘以及其他默认不需要重复绘制的图 片都合成到一张图片中，这样，不但可以大幅减小http请求数量，减轻服务器压力，提高网 页加载速度，同时还可以使合并图能够满足浏览器的图片重复渲染机制，以适应不同屏幕 的分辨率。
[0033] 通过以上技术方案，将产品态目录和开发态目录分离，这样，使得合并文件不影响 正常的开发态的文件。并且整个图片合并过程完全自动化，使得开发人员专注开发，设计人 员专注设计，而不必关注合并过程。其中，产品态的目录是开发态目录的一份经过CSS修改 和只存合并图片的拷贝，开发人员只需关注开发态目录，产品态的目录由工具自动构建完 成。同时将图片合并，可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度。

【专利附图】

【附图说明】
[0034] 图1示出了相关技术中合并图片段的效果示意图；
[0035] 图2示出了相关技术中图片合并方法的流程图；
[0036] 图3示出了根据本发明的实施例的图片合并方法的流程图；
[0037] 图4示出了根据本发明的实施例的图片合并系统的框图；
[0038] 图5示出了根据本发明的实施例的图片合并方法的具体流程图；
[0039] 图6示出了根据本发明的实施例的修改CSS文件的流程图；
[0040] 图7示出了根据本发明的实施例的图片合并的流程图；
[0041] 图8示出了根据本发明的实施例的合并后图片的效果示意图。

【具体实施方式】
[0042] 为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实 施方式对本发明进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施 例及实施例中的特征可以相互组合。
[0043] 在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可 以采用其他不同于在此描述的其他方式来实施，因此，本发明的保护范围并不受下面公开 的具体实施例的限制。
[0044] 图3示出了根据本发明的实施例的图片合并方法的流程图。
[0045] 如图3所示，根据本发明的实施例的图片合并方法，包括：复制步骤302,扫描开发 态目录下的CSS文件，并将所述CSS文件复制到产品态目录下；查找步骤304,读取所述开 发态目录下的CSS文件，查找出所述CSS文件中引用的图片；处理步骤306,计算所述图片 在预合成图片中的目标坐标信息，并将所述产品态目录下对应的引用的图片的路径修改为 所述预合成图片的路径，以及在所述产品态目录下的所述图片中添加所述目标坐标信息； 图片生成步骤308,根据所述图片中的所述目标坐标信息和所述预合成图片的路径生成所 述预合成图片。
[0046] 在该技术方案中，将产品态目录和开发态目录分离，这样，使得合并文件不影响正 常的开发态的文件。并且整个图片合并过程完全自动化，使得开发人员专注开发，设计人员 专注设计，而不必关注合并过程。其中，产品态的目录是开发态目录的一份经过CSS修改和 只存合并图片的拷贝，开发人员只需关注开发态目录，产品态的目录由工具自动构建完成。 同时将图片合并，可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度。
[0047] 在上述技术方案中，优选地，所述处理步骤306还包括：根据所述图片的背景重绘 属性信息，将所述图片分成第一类图片和第二类图片，计算所述第一类图片在所述预合成 图片中的纵向坐标，以得到所述第一类图片的第一目标坐标信息，其中，所述第一类图片的 横向坐标为零；计算所述第二类图片在所述预合成图片中的横向坐标，以得到所述第二类 图片的第二目标坐标信息，其中，所述第二类图片的纵向坐标为零；将所述第一类图片的路 径和所述第一目标坐标信息添加到水平重绘图片队列，将所述第二类图片的路径和所述第 二目标坐标信息添加到垂直重绘图片队列；将所述第一类图片和所述第二类图片的路径修 改为所述预合成图片的路径，并在所述第一类图片中添加所述第一目标坐标信息，在所述 第二类图片中添加所述第二目标坐标信息。
[0048] 在该技术方案中，通过构建水平方向和垂直方向上的两个大图，可以实现图片的 水平和垂直方向的重复渲染，从而使图片可以适应不同的屏幕分辨率。
[0049] 在上述技术方案中，优选地，所述处理步骤306还包括：获取所述第一类图片和所 述第二类图片的高度信息和宽度信息；根据所述第一类图片的高度信息计算所述第一类图 片在所述预合成图片中的纵向坐标，其中，所述纵向坐标为读取过的水平重绘图片的高度 之和；根据所述第二类图片的宽度信息计算所述第二类图片在所述预合成图片中的横向坐 标，其中，所述横向坐标为读取过的垂直重绘图片的宽度之和。
[0050] 在上述技术方案中，优选地，所述图片生成步骤308具体包括：计算所述水平重绘 图片队列中第一类图片的最大宽度之和和最大高度之和，根据所述最大宽度之和和所述最 大高度之和生成空白的所述预合成图片生成空白的第一预合成图片；计算所述垂直重绘图 片队列中第二类图片的最大宽度之和和最大高度之和，根据所述最大宽度之和和所述最大 高度之和生成空白的第二预合成图片；根据所述第一类图片的第一目标坐标信息确定所述 第一类图片在所述第一预合成图片中的第一位置；根据所述第二类图片的第二目标坐标信 息确定所述第二类图片在所述第二预合成图片中的第二位置；将所述第一类图片从所述第 一位置沿水平方向绘制，直到绘制的图片的宽度等于所述第一类图片的最大宽度，以得到 绘制后的第一预合成图片；将所述第二类图片从所述第二位置沿垂直方向绘制，直到绘制 的图片的高度等于所述第二类图片的最大高度，以得到绘制后的第二预合成图片。
[0051] 在该技术方案中，通过上述过程，就可以实现将需要水平重绘或垂直重绘的图片 合成到一张大图中，从而可以大幅减小http请求数量，减轻服务器压力，提高网页加载速 度。
[0052] 在上述技术方案中，优选地，所述图片生成步骤308还包括：将所述绘制后的第一 预合成图片和所述绘制后的第二预合成图片进行合并，以得到绘制后的预合成图片。
[0053] 在该技术方案中，可以将水平重绘和坚直重绘以及其他默认不需要重复绘制的图 片都合成到一张图片中，这样，不但可以大幅减小http请求数量，减轻服务器压力，提高网 页加载速度，同时还可以使合并图能够满足浏览器的图片重复渲染机制，以适应不同屏幕 的分辨率。
[0054] 图4示出了根据本发明的实施例的图片合并系统的框图。
[0055] 如图4所示，根据本发明的实施例的图片合并系统400,包括：复制单元402,扫描 开发态目录下的CSS文件，并将所述CSS文件复制到产品态目录下；查找单元404,读取所 述开发态目录下的CSS文件，查找出所述CSS文件中引用的图片；处理单元406,计算所述 图片在预合成图片中的目标坐标信息，并将所述产品态目录下对应的引用的图片的路径修 改为所述预合成图片的路径，以及在所述产品态目录下的所述图片中添加所述目标坐标信 息；图片生成单元408,根据所述图片中的所述目标坐标信息和所述预合成图片的路径生 成所述预合成图片。
[0056] 在该技术方案中，将产品态目录和开发态目录分离，这样，使得合并文件不影响正 常的开发态的文件。并且整个图片合并过程完全自动化，使得开发人员专注开发，设计人员 专注设计，而不必关注合并过程。其中，产品态的目录是开发态目录的一份经过CSS修改和 只存合并图片的拷贝，开发人员只需关注开发态目录，产品态的目录由工具自动构建完成。 同时将图片合并，可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度。
[0057] 在上述技术方案中，优选地，所述处理单元406还包括：分类单元4062,根据所 述图片的背景重绘属性信息，将所述图片分成第一类图片和第二类图片；第一计算单元 4064,计算所述第一类图片在所述预合成图片中的纵向坐标，以得到所述第一类图片的第 一目标坐标信息，其中，所述第一类图片的横向坐标为零；第二计算单元4066,计算所述第 二类图片在所述预合成图片中的横向坐标，以得到所述第二类图片的第二目标坐标信息， 其中，所述第二类图片的纵向坐标为零；队列构建单元4068,将所述第一类图片的路径和 所述第一目标坐标信息添加到水平重绘图片队列，将所述第二类图片的路径和所述第二目 标坐标信息添加到垂直重绘图片队列；坐标添加单元40610,将所述第一类图片和所述第 二类图片的路径修改为所述预合成图片的路径，并在所述第一类图片中添加所述第一目标 坐标信息，在所述第二类图片中添加所述第二目标坐标信息。
[0058] 在该技术方案中，通过构建水平方向和垂直方向上的两个大图，可以实现图片的 水平和垂直方向的重复渲染，从而使图片可以适应不同的屏幕分辨率。
[0059] 在上述技术方案中，优选地，所述处理单元406还包括：信息获取单元40612,获取 所述第一类图片和所述第二类图片的高度信息和宽度信息；第三计算单元40614,根据所 述第一类图片的高度信息计算所述第一类图片在所述预合成图片中的纵向坐标，其中，所 述纵向坐标为读取过的水平重绘图片的高度之和；第四计算单元40616,根据所述第二类 图片的宽度信息计算所述第二类图片在所述预合成图片中的横向坐标，其中，所述横向坐 标为读取过的垂直重绘图片的宽度之和。
[0060] 在上述技术方案中，优选地，所述图片生成单元408具体包括：第一空白图片生成 单元4082,计算所述水平重绘图片队列中第一类图片的最大宽度之和和最大高度之和，根 据所述最大宽度之和和所述最大高度之和生成空白的所述预合成图片生成空白的第一预 合成图片；第二空白图片生成单元4084,计算所述垂直重绘图片队列中第二类图片的最大 宽度之和和最大高度之和，根据所述最大宽度之和和所述最大高度之和生成空白的第二预 合成图片；第一位置确定单元4086,根据所述第一类图片的第一目标坐标信息确定所述第 一类图片在所述第一预合成图片中的第一位置；第二位置确定单元，根据所述第二类图片 的第二目标坐标信息确定所述第二类图片在所述第二预合成图片中的第二位置；第一绘制 单元4088,将所述第一类图片从所述第一位置沿水平方向绘制，直到绘制的图片的宽度等 于所述第一类图片的最大宽度，以得到绘制后的第一预合成图片；第二绘制单元40810,将 所述第二类图片从所述第二位置沿垂直方向绘制，直到绘制的图片的高度等于所述第二类 图片的最大高度，以得到绘制后的第二预合成图片。
[0061] 在该技术方案中，通过上述过程，就可以实现将需要水平重绘或垂直重绘的图片 合成到一张大图中，从而可以大幅减小http请求数量，减轻服务器压力，提高网页加载速 度。
[0062] 在上述技术方案中，优选地，所述图片生成单元408还包括：合成单元40812,将所 述绘制后的第一预合成图片和所述绘制后的第二预合成图片进行合并，以得到绘制后的预 合成图片。
[0063] 在该技术方案中，可以将水平重绘和坚直重绘以及其他默认不需要重复绘制的图 片都合成到一张图片中，这样，不但可以大幅减小http请求数量，减轻服务器压力，提高网 页加载速度，同时还可以使合并图能够满足浏览器的图片重复渲染机制，以适应不同屏幕 的分辨率。
[0064] 通过以上技术方案，将产品态目录和开发态目录分离，这样，使得合并文件不影响 正常的开发态的文件。并且整个图片合并过程完全自动化，使得开发人员专注开发，设计人 员专注设计，而不必关注合并过程。其中，产品态的目录是开发态目录的一份经过CSS修改 和只存合并图片的拷贝，开发人员只需关注开发态目录，产品态的目录由工具自动构建完 成。同时将图片合并，可以大幅减小http请求数量，减轻服务器压力，提高网页加载速度。 [0065] 图5示出了根据本发明的实施例的图片合并方法的具体流程图。
[0066] 如图5所示，根据本发明的实施例的图片合并方法的具体流程如下：
[0067] 步骤502,扫描并复制开发态下的CSS文件到产品态目录下。这样，将产品态目录 和开发态目录的分离，使得合并文件不影响正常的开发态的文件。
[0068] 步骤504,遍历所有CSS文件和CSS文件中的引用图片，修改CSS，并将图片路径按 遍历顺序放入到图片队列中。即主要是修改CSS文件，在每个引用图片后面加上坐标。
[0069] 步骤506,图片的合并。从图片队列中读取图片，按一定的规则对图片进行合并。
[0070] 下面详细说明修改CSS文件和图片合成的具体流程。
[0071] 如图6所示，根据本发明的实施例的修改CSS文件的流程如下：
[0072] 步骤602，读取一个CSS文件。
[0073] 步骤604,定位到包含有引用图片路径的一行。
[0074] 步骤606,获取图片的高度和宽度。
[0075] 步骤608,判断background-repeat的值（X或Y)，根据判断结果将图片分成两类。 如需要水平重绘和不需要重绘的分到一类，需要垂重绘的分到一类。
[0076] 步骤610，对于水平重绘的图片，计算小图在大图中纵向的坐标，纵向坐标=读取 过的水平重绘图片高度和，横向坐标=0。
[0077] 步骤612,将小图路径和坐标信息加入水平重绘图片队列。
[0078] 步骤 614,修改 background-image 为 V. png。
[0079] 步骤616，对于垂直重绘的图片，计算小图在大图中横向向的坐标，横向坐标=读 取过的垂直重绘图片宽度和，纵向坐标=0。
[0080] 步骤618,将小图路径和坐标信息加入垂直重绘图片队列。
[0081] 步骤 62〇,修改 background-image 为 h. png。
[0082] 步骤622,将横向坐标和纵向坐标加入到CSS中。
[0083] 步骤624,判断是否结束。当判断结果为是时，结束步骤，否则返回步骤604。
[0084] 上述流程是修改一个CSS文件的过程，可见经过这个过程，会完成两部分的工作： 一部分是修改了 CSS文件中引用图片路径为大图文件路径和加入了小图在大图中的坐标 值；另一部分是生成了两个图片路径队列，一个是需水平重复的图片队列，一个是需垂直重 复的图片队列，它们存放了图片的路径和要在大图中绘制的坐标信息，用于下一步图片的 合并处理。
[0085] 下面以水平方向重绘的图片为例，详细说明图片合并的过程。
[0086] 如图7所示，图片合并包括以下步骤：
[0087] 步骤702,计算水平重绘图片队列中的图片的最大宽度和高度之和。
[0088] 步骤704,生成一张空白的大图，宽度和高度等于上一步的宽度和高度。
[0089] 步骤706,从队列中取出一个图片信息。
[0090] 步骤708,根据图片的纵向坐标定位小图在大图中的位置。
[0091] 步骤710,将小图从指定位置处沿水平方向重复绘制，直到达到最大宽度。
[0092] 步骤712,判断水平重绘队列中是否还有元素，当判断结果为是时，返回步骤706， 否则，结束流程。
[0093] 经过上面过程就能将需要水平重绘的图片自动的合成一张大图v. png，默认不需 重复绘制的图片也会合到这张图中，该图如图8所示，浏览器用background-position中的 坐标可以定位到小图的位置，再根据要填充的网页元素的height和width即可实现与未做 图片合并之前同样的显示效果。
[0094] 综上所述，本技术方案具有以下特点：
[0095] 1、开发态和产品态的分离。产品态的目录是开发态目录的一份经过CSS修改和只 存合并图片的拷贝，开发人员只需关注开发态目录，产品态的目录由工具自动构建完成。
[0096] 2、利用background-position、width、height来在合并的大图中定位小图中的位 置。
[0097] 3、工具自动化遍历开发目录下的所有CSS文件，找出CSS中引用的图片，计算其在 大图中的坐标，修改相应产品态CSS的background-image, background-position,并将其 加到大图中。
[0098] 4、支持图片的水平和垂直方向重复渲染机制。通过构建两张合并大图h. png和 V. png来实现，h. png用来存放需要垂直重绘的图片，整体表现为一张横向的大图，V. png存 放需要水平重绘的图片，整体表现为一张垂直的大图。
[0099] 5、基于Ant脚本来实现自动化的构建过程，中间件启动过程中执行构建脚本，完 成全部的构建工作。
[0100] 6、中间件启动后，如需变更图片，只需要运行一次脚本，无需重启中间件，即可实 现合并图片的热替换。
[0101] 7、全程基本上无需设计人员、开发人员参与。
[0102] 以上结合附图详细说明了本发明的技术方案，通过本发明的技术方案，将产品态 目录和开发态目录分离，这样，使得合并文件不影响正常的开发态的文件。并且整个图片合 并过程完全自动化，使得开发人员专注开发，设计人员专注设计，而不必关注合并过程。其 中，产品态的目录是开发态目录的一份经过CSS修改和只存合并图片的拷贝，开发人员只 需关注开发态目录，广品态的目录由工具自动构建完成。同时将图片合并，可以大幅减小 http请求数量，减轻服务器压力，提高网页加载速度。
[0103] 以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技 术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修 改、等同替换、改进等，均应包含在本发明的保护范围之内。
【权利要求】
1. 一种图片合并方法，其特征在于，包括： 复制步骤，扫描开发态目录下的级联样式表文件，并将所述级联样式表文件复制到产 品态目录下； 查找步骤，读取所述开发态目录下的级联样式表文件，查找出所述级联样式表文件中 引用的图片； 处理步骤，计算所述图片在预合成图片中的目标坐标信息，并将所述产品态目录下对 应的引用的图片的路径修改为所述预合成图片的路径，以及在所述产品态目录下的所述图 片中添加所述目标坐标信息； 图片生成步骤，根据所述图片中的所述目标坐标信息和所述预合成图片的路径生成所 述预合成图片。
2. 根据权利要求1所述的图片合并方法，其特征在于，所述处理步骤还包括： 根据所述图片的背景重绘属性信息，将所述图片分成第一类图片和第二类图片， 计算所述第一类图片在所述预合成图片中的纵向坐标，以得到所述第一类图片的第一 目标坐标信息，其中，所述第一类图片的横向坐标为零； 计算所述第二类图片在所述预合成图片中的横向坐标，以得到所述第二类图片的第二 目标坐标信息，其中，所述第二类图片的纵向坐标为零； 将所述第一类图片的路径和所述第一目标坐标信息添加到水平重绘图片队列，将所述 第二类图片的路径和所述第二目标坐标信息添加到垂直重绘图片队列； 将所述第一类图片和所述第二类图片的路径修改为所述预合成图片的路径，并在所述 第一类图片中添加所述第一目标坐标信息，在所述第二类图片中添加所述第二目标坐标信 息。
3. 根据权利要求2所述的图片合并方法，其特征在于，所述处理步骤还包括： 获取所述第一类图片和所述第二类图片的高度信息和宽度信息； 根据所述第一类图片的高度信息计算所述第一类图片在所述预合成图片中的纵向坐 标，其中，所述纵向坐标为读取过的水平重绘图片的高度之和； 根据所述第二类图片的宽度信息计算所述第二类图片在所述预合成图片中的横向坐 标，其中，所述横向坐标为读取过的垂直重绘图片的宽度之和。
4. 根据权利要求3所述的图片合并方法，其特征在于，所述图片生成步骤具体包括： 计算所述水平重绘图片队列中第一类图片的最大宽度之和和最大高度之和，根据所述 最大宽度之和和所述最大高度之和生成空白的所述预合成图片生成空白的第一预合成图 片； 计算所述垂直重绘图片队列中第二类图片的最大宽度之和和最大高度之和，根据所述 最大宽度之和和所述最大高度之和生成空白的第二预合成图片； 根据所述第一类图片的第一目标坐标信息确定所述第一类图片在所述第一预合成图 片中的第一位置； 根据所述第二类图片的第二目标坐标信息确定所述第二类图片在所述第二预合成图 片中的第二位置； 将所述第一类图片从所述第一位置沿水平方向绘制，直到绘制的图片的宽度等于所述 第一类图片的最大宽度，以得到绘制后的第一预合成图片； 将所述第二类图片从所述第二位置沿垂直方向绘制，直到绘制的图片的高度等于所述 第二类图片的最大高度，以得到绘制后的第二预合成图片。
5. 根据权利要求4所述的图片合并方法，其特征在于，所述图片生成步骤还包括： 将所述绘制后的第一预合成图片和所述绘制后的第二预合成图片进行合并，以得到绘 制后的预合成图片。
6. -种图片合并系统，其特征在于，包括： 复制单元，扫描开发态目录下的级联样式表文件，并将所述级联样式表文件复制到产 品态目录下； 查找单元，读取所述开发态目录下的级联样式表文件，查找出所述级联样式表文件中 引用的图片； 处理单元，计算所述图片在预合成图片中的目标坐标信息，并将所述产品态目录下对 应的引用的图片的路径修改为所述预合成图片的路径，以及在所述产品态目录下的所述图 片中添加所述目标坐标信息； 图片生成单元，根据所述图片中的所述目标坐标信息和所述预合成图片的路径生成所 述预合成图片。
7. 根据权利要求6所述的图片合并系统，其特征在于，所述处理单元还包括： 分类单元，根据所述图片的背景重绘属性信息，将所述图片分成第一类图片和第二类 图片； 第一计算单元，计算所述第一类图片在所述预合成图片中的纵向坐标，以得到所述第 一类图片的第一目标坐标信息，其中，所述第一类图片的横向坐标为零； 第二计算单元，计算所述第二类图片在所述预合成图片中的横向坐标，以得到所述第 二类图片的第二目标坐标信息，其中，所述第二类图片的纵向坐标为零； 队列构建单元，将所述第一类图片的路径和所述第一目标坐标信息添加到水平重绘图 片队列，将所述第二类图片的路径和所述第二目标坐标信息添加到垂直重绘图片队列； 坐标添加单元，将所述第一类图片和所述第二类图片的路径修改为所述预合成图片的 路径，并在所述第一类图片中添加所述第一目标坐标信息，在所述第二类图片中添加所述 第二目标坐标信息。
8. 根据权利要求7所述的图片合并系统，其特征在于，所述处理单元还包括： 信息获取单元，获取所述第一类图片和所述第二类图片的高度信息和宽度信息； 第三计算单元，根据所述第一类图片的高度信息计算所述第一类图片在所述预合成图 片中的纵向坐标，其中，所述纵向坐标为读取过的水平重绘图片的高度之和； 第四计算单元，根据所述第二类图片的宽度信息计算所述第二类图片在所述预合成图 片中的横向坐标，其中，所述横向坐标为读取过的垂直重绘图片的宽度之和。
9. 根据权利要求8所述的图片合并系统，其特征在于，所述图片生成单元具体包括： 第一空白图片生成单元，计算所述水平重绘图片队列中第一类图片的最大宽度之和和 最大高度之和，根据所述最大宽度之和和所述最大高度之和生成空白的所述预合成图片生 成空白的第一预合成图片； 第二空白图片生成单元，计算所述垂直重绘图片队列中第二类图片的最大宽度之和和 最大高度之和，根据所述最大宽度之和和所述最大高度之和生成空白的第二预合成图片； 第一位置确定单元，根据所述第一类图片的第一目标坐标信息确定所述第一类图片在 所述第一预合成图片中的第一位置； 第二位置确定单元，根据所述第二类图片的第二目标坐标信息确定所述第二类图片在 所述第二预合成图片中的第二位置； 第一绘制单元，将所述第一类图片从所述第一位置沿水平方向绘制，直到绘制的图片 的宽度等于所述第一类图片的最大宽度，以得到绘制后的第一预合成图片； 第二绘制单元，将所述第二类图片从所述第二位置沿垂直方向绘制，直到绘制的图片 的高度等于所述第二类图片的最大高度，以得到绘制后的第二预合成图片。
10.根据权利要求9所述的图片合并系统，其特征在于，所述图片生成单元还包括： 合成单元，将所述绘制后的第一预合成图片和所述绘制后的第二预合成图片进行合 并，以得到绘制后的预合成图片。
【文档编号】G06F17/30GK104063492SQ201410318927
【公开日】2014年9月24日 申请日期:2014年7月4日 优先权日:2014年7月4日
【发明者】田孝启, 李传忠 申请人:用友软件股份有限公司