一种生成雪碧图及其样式代码的方法及设备与流程

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


背景技术：

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


技术实现要素：

3.本技术的一个目的是提供一种生成雪碧图及其样式代码的方法及设备，通过增加多种输入交互与优化输出代码，弥补了现有技术导致的生成的代码冗余、操作不方便、兼容场景不够丰富等缺陷,极大的提高了用户使用效率。
4.根据本技术的一个方面，提供了一种生成雪碧图及其样式代码的方法，其中，所述方法包括：
5.生成雪碧图及其样式代码的方法，其中，所述方法包括：
6.获取至少两张图片及其对应的尺寸和生成代码；
7.基于每张所述图片的尺寸，对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置；
8.响应于用户的控制输入操作，获取用于指示图片与代码的输出需求信息；
9.基于每张所述图片对应的所述生成代码、所述布局位置及所述输出需求信息，对所述至少两张图片进行聚合操作和嵌套代码操作，生成所述至少两张图片对应的雪碧图及其对应的目标样式代码；
10.将所述雪碧图上传至网络设备，并保存所述雪碧图对应的目标样式代码。
11.进一步地，上述方法中，所述基于每张所述图片的尺寸，对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置，包括：
12.基于每张所述图片的尺寸，采用二叉树算法对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置，以使所述雪碧图的尺寸最小化。
13.进一步地，上述方法中，所述输出需求信息包括图片输出需求信息和代码输出需求信息；
14.其中，所述基于每张所述图片对应的所述生成代码、所述布局位置及所述输出需求信息，对所述至少两张图片进行聚合操作和嵌套代码操作，生成所述至少两张图片对应
的雪碧图及其对应的目标样式代码，包括：
15.基于每张所述图片的布局位置和所述图片输出需求信息对所述至少两张图片进行聚合操作，生成所述至少两张图片对应的雪碧图；
16.基于每张所述图对应的所述生成代码和所述代码输出需求信息，对所述至少两张图片进行嵌套代码操作，生成所述雪碧图对应的目标样式代码。
17.进一步地，上述方法中，所述图片输出需求信息包括图片间距、图片背景及图片效果。
18.进一步地，上述方法中，所述代码输出需求信息包括代码前缀和代码语言。
19.根据本技术的另一方面，还提供了一种非易失性存储介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行时，使所述处理器实现如上述生成雪碧图及其样式代码的方法。
20.根据本技术的另一方面，还提供了一种生成雪碧图及其样式代码的设备，其中，该设备包括：
21.一个或多个处理器；
22.计算机可读介质，用于存储一个或多个计算机可读指令，
23.当所述一个或多个计算机可读指令被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上述生成雪碧图及其样式代码的方法。
24.与现有技术相比，本技术通过首先获取至少两张图片及其对应的尺寸和生成代码，并基于每张所述图片的尺寸，对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置；然后响应于用户的控制输入操作，获取用于指示图片与代码的输出需求信息，并基于每张所述图片对应的所述生成代码、所述布局位置及所述输出需求信息，对所述至少两张图片进行聚合操作和嵌套代码操作，生成所述至少两张图片对应的雪碧图及其对应的目标样式代码；最后将所述雪碧图上传至网络设备，并保存所述雪碧图对应的目标样式代码，使得通过增加多种输入交互与优化输出代码，弥补了现有技术导致的生成的代码冗余、操作不方便、兼容场景不够丰富等缺陷,极大的提高了用户使用效率。
附图说明
25.通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本技术的其它特征、目的和优点将会变得更明显：
26.图1示出根据本技术一个方面的一种生成雪碧图及其样式代码的方法的流程示意图；
27.图2示出根据本技术一个方面的一种生成雪碧图及其样式代码的方法中的实际操作界面的示意图；
28.图3示出根据本技术一个方面的一种生成雪碧图及其样式代码的方法中的实际应用场景中的流程示意图。
29.附图中相同或相似的附图标记代表相同或相似的部件。
具体实施方式
30.下面结合附图对本技术作进一步详细描述。
31.在本技术一个典型的配置中，终端、服务网络的设备和可信方均包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。
32.内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flash ram)。内存是计算机可读介质的示例。
33.计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd
‑
rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
34.如图1所示，本技术的一个方面提出了一种生成雪碧图及其样式代码的方法的流程示意图，其中，所述方法包括步骤s11、步骤s12、步骤s13,及步骤s14，具体包括如下步骤：
35.步骤s11，获取至少两张图片及其对应的尺寸和生成代码，如图2左侧所示的每张图片均可以进行单个预览，也可以进行删除操作，每张图片下方展示该图片对应的生成代码。
36.在步骤s11中，读取多张图片及每张所述图片的尺寸的过程可以通过如下代码实现：
[0037][0038]
步骤s12，基于每张所述图片的尺寸，对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置；在此，所述图片的布局位置用于指示在所述至少两张图片生成的整体的雪碧图中，所述图片所处的排列位置，以便根据每张图片的布局位置能够生成整体的雪碧图。
[0039]
步骤s13，响应于用户的控制输入操作，获取用于指示图片与代码的输出需求信息，在此，所述输出需求信息包括图片输出需求信息和代码输出需求信息，其中，所述图片输出需求信息包括但不限于图片间距、图片背景及图片效果等，所述代码输出需求信息包括但不限于代码前缀和代码语言等，以满足在生成雪碧图及其对应的样式代码时的用户需求。
[0040]
步骤s14，基于每张所述图片对应的所述生成代码、所述布局位置及所述输出需求信息，对所述至少两张图片进行聚合操作和嵌套代码操作，生成所述至少两张图片对应的雪碧图及其对应的目标样式代码，如图2右侧所示，可以点击雪碧图预览的按键或选项，进行整体的雪碧图的呈现和预览，且在雪碧图预览下方可以展示生成所述雪碧图对应的目标样式代码，也可以进行所述目标样式代码的复制。
[0041]
在步骤s12至步骤s14中的用于计算每张图片的布局位置及生成雪碧图的过程可以通过如下代码实现：
[0042][0043][0044]
在步骤s14中的生成雪碧图对应的目标样式代码(比如scss嵌套代码)可以通过如下代码实现：
[0045][0046][0047]
步骤s15，将所述雪碧图上传至网络设备，并保存所述雪碧图对应的目标样式代码。
[0048]
通过上述步骤s11至步骤s15，通过增加多种输入交互与优化输出代码，弥补了现有技术导致的生成的代码冗余、操作不方便、兼容场景不够丰富等缺陷,极大的提高了用户使用效率。
[0049]
例如，如图3所示，可通过拖拽上传、多图片上传的形式，来获取需要进行雪碧图生
成的多张图片，使得获取图片方便快捷，即通过canvas读取每张图片及其尺寸和生成代码，分别为：图片1、图片2、
……
、及图片n，及每张图片的尺寸依序分别为：尺寸1、尺寸2、
……
、尺寸n，其中，n为大于等于2的正整数；然后，基于每张所述图片的尺寸：图片1的尺寸1、图片2的尺寸2、
……
、图片n的尺寸n，对上述n张图片进行图片排列布局，得到每张所述图片的布局位置，即图片1的布局位置d1、图片2的布局位置d2、
……
、即图片n的布局位置d(n)；接着在需要进行雪碧图及其目标样式代码的生成时，先获取用户输入的用于指示图片与代码的输出需求信息，使得可以通过用户的控制输入操作，使得后续生成并输出的雪碧图及其对应的目标样式代码的内容格式多样且满足用户需求，进一步提高输出的灵活性；之后，基于图片1的生成代码code1和布局位置d1、图片2的生成代码code2和布局位置d2、
……
、及图片n的生成代码coden和布局位置d(n)及所述输出需求信息，对所述至少两张图片进行聚合操作和嵌套代码操作，生成所述n张图片对应的雪碧图及其对应的目标样式代码；最后将所述雪碧图自动上传至网络设备，从而减少人工操作，其中，该网络设备可以是存储雪碧图的第三方设备，也可以是服务器，还可以是网络链接的形式，以便其他用户对应的设备能够通过该网络设备获取到所述雪碧图；并将所述雪碧图对应的目标样式代码进行本地保存，以便输出给用户(比如开发人员等)进行使用，如图3所示。
[0050]
在本实施例中，通过canvas api将图片进行聚合实现，首先用户可以批量上传多张图片，使得每张图片经过canvas处理以生成雪碧图，并通过网络请求将雪碧图上传到网络设备(比如图床等，图床为网络设备的一优选实施例，仅为优选举例)；同时，用户可以通过选择输出的格式来控制雪碧图对应的目标样式代码的输出内容或格式，生成方便自己使用的目标样式代码。
[0051]
接着本技术的上述实施例，其中，所述步骤s12基于每张所述图片的尺寸，对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置，具体包括：
[0052]
基于每张所述图片的尺寸，采用二叉树算法对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置，以使所述雪碧图的尺寸最小化。
[0053]
例如，如图3所示，在获得每张图片的尺寸后，基于图片1的尺寸1、图片2的尺寸2、
……
、及图片n的尺寸n，采用二叉树算法对图片1、图片2、
……
、及图片n进行图片排列布局，得到每张所述图片的布局位置，分别为：图片1的布局位置d1、图片2的布局位置d2、
……
、及图片n的布局位置d(n)，使得采用二叉树算法计算得到的、在雪碧图中的每张图片的布局位置，可以保持n张图片生成的雪碧图的整体的尺寸是最小化的，即保持了雪碧图的整体的最小面积。
[0054]
接着本技术的上述实施例，其中，所述输出需求信息包括图片输出需求信息和代码输出需求信息；
[0055]
其中，所述基于每张所述图片对应的所述生成代码、所述布局位置及所述输出需求信息，对所述至少两张图片进行聚合操作和嵌套代码操作，生成所述至少两张图片对应的雪碧图及其对应的目标样式代码，包括：
[0056]
基于每张所述图片的布局位置和所述图片输出需求信息对所述至少两张图片进行聚合操作，生成所述至少两张图片对应的雪碧图；
[0057]
基于每张所述图对应的所述生成代码和所述代码输出需求信息，对所述至少两张图片进行嵌套代码操作，生成所述雪碧图对应的目标样式代码。
[0058]
例如，在本技术一优选实施例中，将所述图片输出需求信息优选为如图2所示的图片间距10，将所述代码输出需求信息优选为代码前缀icon和输出语言为scss；然后在进行雪碧图及其对应的目标样式代码的生成时，基于每张所述图片的布局位置，分别为：图片1的布局位置d1、图片2的布局位置d2、
……
、及图片n的布局位置d(n)和图片输出需求信息：图片间距10，对图片1、图片2、
……
、及图片n进行图片聚合操作，生成由所述n张图片形成的雪碧图；同时，还基于每张图片的生成代码：图片1的生成代码code1、图片2的生成代码code2、
……
、及图片n的生成代码coden和所述代码输出需求信息：代码前缀icon和输出语言scss，对所述n张图片进行嵌套代码操作，生成所述雪碧图对应的目标样式代码，使得生成的雪碧图能够支持scss嵌套格式，代码简洁利于维护与复用。
[0059]
根据本技术的另一方面，还提供了一种非易失性存储介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行时，使所述处理器实现如上述生成雪碧图及其样式代码的方法。
[0060]
根据本技术的另一方面，还提供了一种生成雪碧图及其样式代码的设备，其中，该设备包括：
[0061]
一个或多个处理器；
[0062]
计算机可读介质，用于存储一个或多个计算机可读指令，
[0063]
当所述一个或多个计算机可读指令被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上述生成雪碧图及其样式代码的方法。
[0064]
在此，所述生成雪碧图及其样式代码的设备中的各实施例的详细内容，具体可参见上述生成雪碧图及其样式代码的方法的实施例的对应部分，在此，不再赘述。
[0065]
综上所述，本技术通过首先获取至少两张图片及其对应的尺寸和生成代码，并基于每张所述图片的尺寸，对所述至少两张图片进行图片排列布局，得到每张所述图片的布局位置；然后响应于用户的控制输入操作，获取用于指示图片与代码的输出需求信息，并基于每张所述图片对应的所述生成代码、所述布局位置及所述输出需求信息，对所述至少两张图片进行聚合操作和嵌套代码操作，生成所述至少两张图片对应的雪碧图及其对应的目标样式代码；最后将所述雪碧图上传至网络设备，并保存所述雪碧图对应的目标样式代码，使得通过增加多种输入交互与优化输出代码，弥补了现有技术导致的生成的代码冗余、操作不方便、兼容场景不够丰富等缺陷,极大的提高了用户使用效率。
[0066]
需要注意的是，本技术可在软件和/或软件与硬件的组合体中被实施，例如，可采用专用集成电路(asic)、通用目的计算机或任何其他类似硬件设备来实现。在一个实施例中，本技术的软件程序可以通过处理器执行以实现上文所述步骤或功能。同样地，本技术的软件程序(包括相关的数据结构)可以被存储到计算机可读记录介质中，例如，ram存储器，磁或光驱动器或软磁盘及类似设备。另外，本技术的一些步骤或功能可采用硬件来实现，例如，作为与处理器配合从而执行各个步骤或功能的电路。
[0067]
另外，本技术的一部分可被应用为计算机程序产品，例如计算机程序指令，当其被计算机执行时，通过该计算机的操作，可以调用或提供根据本技术的方法和/或技术方案。而调用本技术的方法的程序指令，可能被存储在固定的或可移动的记录介质中，和/或通过广播或其他信号承载媒体中的数据流而被传输，和/或被存储在根据所述程序指令运行的计算机设备的工作存储器中。在此，根据本技术的一个实施例包括一个装置，该装置包括用
于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指令被该处理器执行时，触发该装置运行基于前述根据本技术的多个实施例的方法和/或技术方案。
[0068]
对于本领域技术人员而言，显然本技术不限于上述示范性实施例的细节，而且在不背离本技术的精神或基本特征的情况下，能够以其他的具体形式实现本技术。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本技术的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本技术内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。装置权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。