一种生成雪碧图及其样式代码的方法及设备技术

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

【技术实现步骤摘要】
一种生成雪碧图及其样式代码的方法及设备


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

技术介绍

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

技术实现思路

[0003]本申请的一个目的是提供一种生成雪碧图及其样式代码的方法及设备，通过增加多种输入交互与优化输出代码，弥补了现有技术导致的生成的代码冗余、操作不方便、兼容场景不够丰富等缺陷,极大的提高了用户使用效率。
[0004]根据本申请的一个方面，提供了一种生成雪碧图及其样式代码的方法，其中，所述方法包括：
[0005]生成雪碧图及其样式代码的方法，其中，所述方法包括：
[0006]获取至少两张图片及其对应的尺寸和生成代码；
[0007]基于每张所述图片的尺寸，对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置；
[0008]响应于用户的控制输入操作，获取用于指示图片与代码的输出需求信息；
[0009]基于每张所述图片对应的所述生成代码、所述布局位置及所述输出需求信息，对所述至少两张图片进行聚合操作和嵌套代码操作，生成所述至少两张图片对应的雪碧图及其对应的目标样式代码；
[0010]将所述雪碧图上传至网络设备，并保存所述雪碧图对应的目标样式代码。
[0011]进一步地，上述方法中，所述基于每张所述图片的尺寸，对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置，包括：
[0012]基于每张所述图片的尺寸，采用二叉树算法对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置，以使所述雪碧图的尺寸最小化。
[0013]进一步地，上述方法中，所述输出需求信息包括图片输出需求信息和代码输出需求信息；
[0014]其中，所述基于每张所述图片对应的所述生成代码、所述布局位置及所述输出需求信息，对所述至少两张图片进行聚合操作和嵌套代码操作，生成所述至少两张图片对应
的雪碧图及其对应的目标样式代码，包括：
[0015]基于每张所述图片的布局位置和所述图片输出需求信息对所述至少两张图片进行聚合操作，生成所述至少两张图片对应的雪碧图；
[0016]基于每张所述图对应的所述生成代码和所述代码输出需求信息，对所述至少两张图片进行嵌套代码操作，生成所述雪碧图对应的目标样式代码。
[0017]进一步地，上述方法中，所述图片输出需求信息包括图片间距、图片背景及图片效果。
[0018]进一步地，上述方法中，所述代码输出需求信息包括代码前缀和代码语言。
[0019]根据本申请的另一方面，还提供了一种非易失性存储介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行时，使所述处理器实现如上述生成雪碧图及其样式代码的方法。
[0020]根据本申请的另一方面，还提供了一种生成雪碧图及其样式代码的设备，其中，该设备包括：
[0021]一个或多个处理器；
[0022]计算机可读介质，用于存储一个或多个计算机可读指令，
[0023]当所述一个或多个计算机可读指令被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上述生成雪碧图及其样式代码的方法。
[0024]与现有技术相比，本申请通过首先获取至少两张图片及其对应的尺寸和生成代码，并基于每张所述图片的尺寸，对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置；然后响应于用户的控制输入操作，获取用于指示图片与代码的输出需求信息，并基于每张所述图片对应的所述生成代码、所述布局位置及所述输出需求信息，对所述至少两张图片进行聚合操作和嵌套代码操作，生成所述至少两张图片对应的雪碧图及其对应的目标样式代码；最后将所述雪碧图上传至网络设备，并保存所述雪碧图对应的目标样式代码，使得通过增加多种输入交互与优化输出代码，弥补了现有技术导致的生成的代码冗余、操作不方便、兼容场景不够丰富等缺陷,极大的提高了用户使用效率。
附图说明
[0025]通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：
[0026]图1示出根据本申请一个方面的一种生成雪碧图及其样式代码的方法的流程示意图；
[0027]图2示出根据本申请一个方面的一种生成雪碧图及其样式代码的方法中的实际操作界面的示意图；
[0028]图3示出根据本申请一个方面的一种生成雪碧图及其样式代码的方法中的实际应用场景中的流程示意图。
[0029]附图中相同或相似的附图标记代表相同或相似的部件。
具体实施方式
[0030]下面结合附图对本申请作进一步详细描述。
[0031]在本申请一个典型的配置中，终端、服务网络的设备和可信方均包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
[0032]内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
[0033]计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD
‑
ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
[0034]如图1所示，本申请的一个方面提出了一种生成雪碧图及其样式代码的方法的流程示意图，其中，所述方法包括步骤S11、步骤S12、步骤S13,及步骤S14，具体包括如下步骤：
[0035]步骤S11，获取至少两张图片及其对应的尺寸和生成代码，如图2左侧所示的每张图片均可以进行单个预览，也可以进行删除操作，每张图片下方展示该图片对应的生成代码。<本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种生成雪碧图及其样式代码的方法，其中，所述方法包括：获取至少两张图片及其对应的尺寸和生成代码；基于每张所述图片的尺寸，对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置；响应于用户的控制输入操作，获取用于指示图片与代码的输出需求信息；基于每张所述图片对应的所述生成代码、所述布局位置及所述输出需求信息，对所述至少两张图片进行聚合操作和嵌套代码操作，生成所述至少两张图片对应的雪碧图及其对应的目标样式代码；将所述雪碧图上传至网络设备，并保存所述雪碧图对应的目标样式代码。2.根据权利要求1所述的方法，其中，所述基于每张所述图片的尺寸，对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置，包括：基于每张所述图片的尺寸，采用二叉树算法对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置，以使所述雪碧图的尺寸最小化。3.根据权利要求1所述的方法，其中，所述输出需求信息包括图片输出需求信息和代码输出需求信息；其中，所述基于每张所述图片对应的所述生成代码、所述布局位置及所述输出需求信息...

【专利技术属性】
技术研发人员：徐傲，王孟杰，吴义良，
申请(专利权)人：上海万物新生环保科技集团有限公司，
类型：发明
国别省市：