生成雪碧图及其子图提取代码的方法及装置制造方法及图纸

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

【技术实现步骤摘要】
生成雪碧图及其子图提取代码的方法及装置


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

技术介绍

[0002]雪碧图是一种CSS(Cascading Style Sheets，层叠样式表)图像合并技术，该技术是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。雪碧图通常被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图上的多个图标时只需要引用一张雪碧图即可，对内存和带宽更好，并且可以减小图标的总大小。
[0003]然而，目前前端人员使用雪碧图时，一般都是手动合成，而手动合成一般都是按照同等大小的多个图标合成，以便后继的提取计算，如果图标大小不一致，合成后的雪碧图中小图标的提取规则比较复杂，容易计算错误。并且，前端人员使用雪碧图，对其中图标的提取，得依次计算好提取规则，然后把规则写到样式文件中，才能提取雪碧图中的图标，提取效率较低。

技术实现思路

[0004]为了解决上述技本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种生成雪碧图方法，其特征在于，包括以下步骤：根据用于生成雪碧图的背景画布以及至少两张子图的宽度，确定每一张子图在背景画布上的位置信息，其中，在所述背景画布上同一行所有子图的上侧边缘处于同一水平线；响应于雪碧图生成请求，按照每一张子图在背景画布上的位置信息，将子图绘制在背景画布上，生成雪碧图。2.根据权利要求1所述的方法，其特征在于，所述根据用于生成雪碧图的背景画布以及至少两张子图的宽度，确定每一张子图在背景画布上的位置信息，包括：对于每一张待确定位置的子图，获取与该子图对应的背景画布的配置信息；根据背景画布的配置信息，获取所述背景画布上已有子图的占据行数：将占据行数最大值对应行的总宽度和待确定位置的子图的宽度进行加和计算，并根据计算结果与背景画布的宽度之间的对比结果，确定待确定位置的子图的左上顶点的坐标值。3.根据权利要求2所述的方法，其特征在于，所述根据计算结果与背景画布的宽度之间的对比结果，确定待确定位置的子图的左上顶点的坐标值，包括：以背景画布的左上顶点为原点，x轴过原点水平向右为正，y轴过原点垂直向下为正；当计算结果大于背景画布的宽度时，使得待确定位置的子图置于占据行数最大值对应行的下一行，待确定位置的子图左上顶点的横坐标数值为0，纵坐标数值为占据行数最大值对应行的纵坐标数值与该行中所有子图高度的最大值的加和；当计算结果小于或等于背景画布的宽度时，使得待确定位置的子图置于占据行数最大值对应行，待确定位置的子图左上顶点的横坐标数值为占据行数最大值对应行中所有子图的总宽度，纵坐标数值与占据行数最大值对应行的相同。4.根据权利要求1所述的方法，其特征在于，所述响应于雪碧图生成请求，按照每一张子图在背景画布上的位置信息，将子图绘制在背景画布上，生成雪碧图，包括：响应于雪碧图生成请求，按照预设宽度和高度构建背景画布；接收用于生成雪碧图的至少两张子图；将每一张子图绘制在背景画布上的对应位置，生成雪碧图。5.根据权利要求3述的方法，其特征在于，在所述确定待确定位置的子图的左上顶点的坐标值之后，所述方法还包括：根据待确定位置的子图的左上顶点的坐标值计算背景画布的配置...

【专利技术属性】
技术研发人员：曾文杰，
申请(专利权)人：京东城市北京数字科技有限公司，
类型：发明
国别省市：