[发明专利]生成雪碧图及其子图提取代码的方法及装置

说明书

本公开涉及图像处理领域，具体涉及一种生成雪碧图及其子图提取代码的方法及装置、设备及存储介质，所述生成雪碧图的方法包括：根据用于生成雪碧图的背景画布以及至少两张子图的宽度，确定每一张子图在背景画布上的位置信息，其中，在所述背景画布上同一行所有子图的上侧边缘处于同一水平线；响应于雪碧图生成请求，按照每一张子图在背景画布上的位置信息，将子图绘制在背景画布上，生成雪碧图，通过同一行的子图上侧边缘处于同一水平线的绘制规则将子图绘制在背景画布上，得到雪碧图，能够简单快速地生成雪碧图，从而能够简化提取子图的过程。

技术领域

本公开涉及图像处理技术领域，尤其涉及一种生成雪碧图及其子图提取代码的方法及装置、设备及存储介质。

背景技术

雪碧图是一种CSS(Cascading Style Sheets，层叠样式表)图像合并技术，该技术是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。雪碧图通常被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图上的多个图标时只需要引用一张雪碧图即可，对内存和带宽更好，并且可以减小图标的总大小。

然而，目前前端人员使用雪碧图时，一般都是手动合成，而手动合成一般都是按照同等大小的多个图标合成，以便后继的提取计算，如果图标大小不一致，合成后的雪碧图中小图标的提取规则比较复杂，容易计算错误。并且，前端人员使用雪碧图，对其中图标的提取，得依次计算好提取规则，然后把规则写到样式文件中，才能提取雪碧图中的图标，提取效率较低。

发明内容

为了解决上述技术问题或者至少部分地解决上述技术问题，本公开的实施例提供了一种生成雪碧图及其子图提取代码的方法及装置、设备及存储介质。

第一方面，本公开的实施例提供了一种生成雪碧图的方法，包括以下步骤：

根据用于生成雪碧图的背景画布以及至少两张子图的宽度，确定每一张子图在背景画布上的位置信息，其中，在所述背景画布上同一行所有子图的上侧边缘处于同一水平线；

响应于雪碧图生成请求，按照每一张子图在背景画布上的位置信息，将子图绘制在背景画布上，生成雪碧图。

在一种可能的实施方式中，所述根据用于生成雪碧图的背景画布以及至少两张子图的宽度，确定每一张子图在背景画布上的位置信息，包括：

对于每一张待确定位置的子图，获取与该子图对应的背景画布的配置信息；

根据背景画布的配置信息，获取所述背景画布上已有子图的占据行数：

将占据行数最大值对应行的总宽度和待确定位置的子图的宽度进行加和计算，并根据计算结果与背景画布的宽度之间的对比结果，确定待确定位置的子图的左上顶点的坐标值。

在一种可能的实施方式中，所述根据计算结果与背景画布的宽度之间的对比结果，确定待确定位置的子图的左上顶点的坐标值，包括：

以背景画布的左上顶点为原点，x轴过原点水平向右为正，y轴过原点垂直向下为正；

当计算结果大于背景画布的宽度时，使得待确定位置的子图置于占据行数最大值对应行的下一行，待确定位置的子图左上顶点的横坐标数值为0，纵坐标数值为占据行数最大值对应行的纵坐标数值与该行中所有子图高度的最大值的加和；

当计算结果小于或等于背景画布的宽度时，使得待确定位置的子图置于占据行数最大值对应行，待确定位置的子图左上顶点的横坐标数值为占据行数最大值对应行中所有子图的总宽度，纵坐标数值与占据行数最大值对应行的相同。

在一种可能的实施方式中，所述响应于雪碧图生成请求，按照每一张子图在背景画布上的位置信息，将子图绘制在背景画布上，生成雪碧图，包括：

响应于雪碧图生成请求，按照预设宽度和高度构建背景画布；