[发明专利]一种生成雪碧图及其样式代码的方法及设备

说明书

本申请的目的是提供一种生成雪碧图及其样式代码的方法及设备，本申请通过获取至少两张图片及其对应的尺寸和生成代码，并基于每张图片的尺寸对至少两张图片进行图片排列布局，得到每张图片的布局位置；响应于用户的控制输入操作，获取用于指示图片与代码的输出需求信息，并基于每张图片对应的生成代码、布局位置及输出需求信息对至少两张图片进行聚合操作和嵌套代码操作，生成至少两张图片对应的雪碧图及其对应的目标样式代码；将雪碧图上传至网络设备并保存雪碧图对应的目标样式代码，使得通过增加多种输入交互与优化输出代码，弥补了现有技术导致的生成的代码冗余、操作不方便、兼容场景不够丰富等缺陷,极大的提高了用户使用效率。

技术领域

本申请涉及计算机技术领域，尤其涉及一种生成雪碧图及其样式代码的方法及设备。

背景技术

随着网络技术的不断发展，在网页中，如果每个图标都是一个单独的图片，则每个图标都将会是一个独立的资源请求。但是一般浏览器因为性能原因会限制最大并发请求数，所以大量的图标会降低页面加载速度，影响用户体验。雪碧图即CSS Sprite，是一种网页图片应用处理方式，通过将小图标和背景图像合并到一张图片上，然后利用层叠样式表(Cascading Style Sheets，CSS)的背景定位来显示需要显示的图片部分，只需加载一整张图片，即可展示多个图标，节省了请求数量。但目前现有的雪碧图生成工具有生成的代码冗余、操作不方便、兼容场景不够丰富等缺陷。

发明内容

本申请的一个目的是提供一种生成雪碧图及其样式代码的方法及设备，通过增加多种输入交互与优化输出代码，弥补了现有技术导致的生成的代码冗余、操作不方便、兼容场景不够丰富等缺陷,极大的提高了用户使用效率。

根据本申请的一个方面，提供了一种生成雪碧图及其样式代码的方法，其中，所述方法包括：

生成雪碧图及其样式代码的方法，其中，所述方法包括：

获取至少两张图片及其对应的尺寸和生成代码；

基于每张所述图片的尺寸，对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置；

响应于用户的控制输入操作，获取用于指示图片与代码的输出需求信息；

基于每张所述图片对应的所述生成代码、所述布局位置及所述输出需求信息，对所述至少两张图片进行聚合操作和嵌套代码操作，生成所述至少两张图片对应的雪碧图及其对应的目标样式代码；

将所述雪碧图上传至网络设备，并保存所述雪碧图对应的目标样式代码。

进一步地，上述方法中，所述基于每张所述图片的尺寸，对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置，包括：

基于每张所述图片的尺寸，采用二叉树算法对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置，以使所述雪碧图的尺寸最小化。

进一步地，上述方法中，所述输出需求信息包括图片输出需求信息和代码输出需求信息；

其中，所述基于每张所述图片对应的所述生成代码、所述布局位置及所述输出需求信息，对所述至少两张图片进行聚合操作和嵌套代码操作，生成所述至少两张图片对应的雪碧图及其对应的目标样式代码，包括：

基于每张所述图片的布局位置和所述图片输出需求信息对所述至少两张图片进行聚合操作，生成所述至少两张图片对应的雪碧图；

基于每张所述图对应的所述生成代码和所述代码输出需求信息，对所述至少两张图片进行嵌套代码操作，生成所述雪碧图对应的目标样式代码。

进一步地，上述方法中，所述图片输出需求信息包括图片间距、图片背景及图片效果。

进一步地，上述方法中，所述代码输出需求信息包括代码前缀和代码语言。