雪碧图生成方法、装置、电子设备及可读存储介质与流程

1.本发明涉及浏览器插件领域，尤其涉及一种雪碧图生成方法、雪碧图生成装置、电子设备及计算机可读存储介质。


背景技术：

2.雪碧图是一种css（cascading style sheets，层叠样式表）图像合并技术，该方法是在一个页面上把设计到的所有零星图片都包含到一张大图中，能够在用户访问该页面时，载入的图片能够一次性全部显现出来，避免图片一张张载入存在的显现慢和http（hyper text transfer protocol，超文本传输协议）请求次数多而存在服务器压力大、页面加载记载速度慢和服务器流量大的问题。
3.但目前现有的雪碧图生成方案中，用户需要在有网络资源的情况下，才能通过浏览器端进行雪碧图的生成，当用户所处的环境没有网络资源时，雪碧图会生成失败。
4.另外，使用浏览器生成雪碧图时，需要打开特定的在线网址或特定的桌面软件才能执行，过程繁琐，且当连接的在线网址为恶意网址时，存在文件泄露的风险。


技术实现要素：

5.本发明的主要目的在于提供一种雪碧图生成方法、雪碧图生成装置、电子设备及计算机可读存储介质，旨在解决如何在没有网络资源的情况下，实现雪碧图的生成的技术问题。
6.为实现上述目的，本发明提供一种雪碧图生成方法，所述雪碧图生成方法包括以下步骤：当接收到雪碧图生成指令时，根据所述雪碧图生成指令弹出扩展程序操作面板；通过所述扩展程序操作面板载入待合成图片集后，将所述待合成图片集中的每一待合成图片渲染到所述扩展程序操作面板的待生成界面上；当接收到雪碧图合成指令时，基于所述雪碧图合成指令生成所述待合成图片的雪碧图所述将所述待合成图片集中的每一待合成图片渲染到所述扩展程序操作面板的待生成界面上的步骤包括：通过所述扩展程序操作面板对所述待合成图片集中的每一所述待合成图片分别进行img标签的定义；将经由所述img标签定义后的所述待合成图片渲染到所述扩展程序操作面板的待生成界面上。
7.可选地，所述当接收到雪碧图合成指令时，基于所述雪碧图合成指令生成所述待合成图片的雪碧图的步骤包括：当接收到所述雪碧图合成指令时，通过文件创建元素在所述扩展程序操作面板上创建一个canvas画布；基于所述雪碧图合成指令在所述canvas画布上生成所述待合成图片的所述雪碧
图。
8.可选地，所述通过文件创建元素在所述扩展程序操作面板上创建一个canvas画布的步骤之后，还包括：基于所述雪碧图生成插件中的for循环对每一所述待合成图片进行遍历，并将遍历后的每一所述待合成图片分别加入image对象后，将所述image对象渲染到所述canvas画布上。
9.可选地，所述基于所述雪碧图合成指令生成所述待合成图片的雪碧图的步骤之后，还包括：对每一所述待合成图片对应的宽度、高度和坐标数据进行记录；根据记录的所述宽度、高度和坐标数据生成每一所述待合成图片对应的css代码后，将所述css代码显现在所述扩展程序操作面板的代码显示栏上。
10.可选地，所述基于所述雪碧图合成指令生成所述待合成图片的雪碧图的步骤之后，还包括：基于所述雪碧图对所述扩展程序操作面板上的下载控件进行激活，并在接收到所述下载控件触发的下载指令时，将所述雪碧图发送至所述浏览器端。
11.可选地，所述在接收到所述下载控件触发的下载指令时，将所述雪碧图发送至所述浏览器端的步骤之后，还包括：检测到所述浏览器端完成所述雪碧图的下载和存储后，将缓存至浏览器端的所述雪碧图的数据文件调出并清除。
12.本发明还提供一种雪碧图生成装置，所述雪碧图生成装置包括：扩展程序操作面板单元，用于接收到雪碧图生成指令时，根据所述雪碧图生成指令弹出扩展程序操作面板；待合成图片渲染单元，用于通过所述扩展程序操作面板载入待合成图片集后，将所述待合成图片集中的每一待合成图片渲染到所述扩展程序操作面板的待生成界面上；雪碧图生成单元，用于接收到雪碧图合成指令时，基于所述雪碧图合成指令生成所述待合成图片的雪碧图。
13.此外，为实现上述目的，本发明还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机处理程序，所述处理器执行所述计算机处理程序时实现上述雪碧图生成方法的步骤。
14.此外，为实现上述目的，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述雪碧图生成方法的步骤。
15.本发明实施例提出一种雪碧图生成方法、装置、电子设备及可读存储介质，首先通过接收到雪碧图生成指令时，根据雪碧图生成指令弹出扩展程序操作面板，通过扩展程序操作面板载入待合成图片集后，将待合成图片集中的每一待合成图片渲染到扩展程序操作面板的待生成界面上，实现了根据浏览器端检测到的用户的雪碧图生成需求，直接将浏览器打开的网页中的待合成图片载入扩展程序操作面板，简化了现有技术中下载待合成图片、保存待合成图片以及上传待合成图片等一系列获取待合成图片的操作步骤，用户可以直接通过拖拽或鼠标右键直接选取的方式进行待合成图片的载入，进而将待合成图片渲染
到待生成界面上，并在接收到上传的雪碧图合成指令时，基于雪碧图合成指令生成待合成图片的雪碧图，实现了用户可在无网络资源的情况下生成雪碧图，避免了由于大量的网络交互导致雪碧图的生成过程不流畅、延迟或失败进而增加了用户的操作难度和操作时间，有效避免了需通过网络资源进行雪碧图的获取而存在的不便捷因素，为用户提供了便捷化的雪碧图生成方式。
附图说明
16.图1是本发明实施例方案涉及的硬件运行环境的终端结构示意图；图2为本发明雪碧图生成方法一实施例的流程示意图；图3为图2中步骤s30的细化流程示意图；图4为本发明雪碧图生成插件的扩展程序操作面板的界面示意图。
17.本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
18.应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
19.本发明实施例的主要解决方案是：通过接收到雪碧图生成指令时，根据所述雪碧图生成指令弹出扩展程序操作面板，通过所述扩展程序操作面板载入待合成图片集后，将所述待合成图片集中的每一待合成图片渲染到所述扩展程序操作面板的待生成界面上，进而将待合成图片渲染到待生成界面上，并在接收到上传的雪碧图合成指令时，基于所述雪碧图合成指令生成所述待合成图片的雪碧图，实现了用户可在无网络资源的情况下生成雪碧图。
20.由于现有技术中雪碧图生成需要基于服务端，而服务端需要在有网络资源的情况下才能进行雪碧图的生成，限制了雪碧图生成的方法，在无网络资源的情况下不利于用户的操作，且需要通过在线网站或者特定的桌面软件实现，生成过程繁琐，如若该网站为恶意网站的话，还存在信息泄露的风险，不利于用户的信息安全。
21.本发明提供一种雪碧图生成方法，使用户能够在无网络资源的情况下，实现雪碧图的生成，满足了用户特定场景下的使用需求，达到离线生成雪碧图的目的。
22.如图1所示，图1是本发明实施例方案涉及的硬件运行环境的终端结构示意图。
23.本发明实施例电子设备可以是pc，也可以是智能手机、平板电脑、电子书阅读器、便携计算机等具有显示功能的可移动式终端设备。
24.如图1所示，该终端可以包括：处理器1001，例如cpu，网络接口1004，用户接口1003，存储器1005，通信总线1002。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏（display）、输入单元比如键盘（keyboard），可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口（如wi-fi接口）。存储器1005可以是高速ram存储器，也可以是稳定的存储器（non-volatile memory），例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。
25.可选地，电子设备还可以包括摄像头、rf（radio frequency，射频）电路，传感器、音频电路、wifi模块等等。其中，传感器比如光传感器、运动传感器以及其他传感器。具体
地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示屏的亮度，接近传感器可在移动终端移动到耳边时，关闭显示屏和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上（一般为三轴）加速度的大小，静止时可检测出重力的大小及方向，可用于识别移动终端姿态的应用（比如横竖屏切换、相关游戏、磁力计姿态校准）、振动识别相关功能（比如计步器、敲击）等；当然，移动终端还可配置陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。
26.本领域技术人员可以理解，图1中示出的电子设备结构并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
27.如图1所示，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及计算机程序。
28.在图1所示的终端中，网络接口1004主要用于连接后台服务器，与后台服务器进行数据通信；用户接口1003主要用于连接客户端（用户端），与客户端进行数据通信；而处理器1001可以用于调用存储器1005中存储的计算机程序，并执行以下操作：当接收到雪碧图生成指令时，根据所述雪碧图生成指令弹出扩展程序操作面板；通过所述扩展程序操作面板载入待合成图片集后，将所述待合成图片集中的每一待合成图片渲染到所述扩展程序操作面板的待生成界面上；当接收到雪碧图合成指令时，基于所述雪碧图合成指令生成所述待合成图片的雪碧图。
29.进一步地，处理器1001可以调用存储器1005中存储的计算机程序，还执行以下操作：将所述待合成图片集中的每一待合成图片渲染到所述扩展程序操作面板的待生成界面上的步骤包括：通过所述扩展程序操作面板对所述待合成图片集中的每一所述待合成图片分别进行img标签的定义；将经由所述img标签定义后的所述待合成图片渲染到所述扩展程序操作面板的待生成界面上。
30.进一步地，处理器1001可以调用存储器1005中存储的计算机程序，还执行以下操作：当接收到雪碧图合成指令时，基于所述雪碧图合成指令生成所述待合成图片的雪碧图的步骤包括：当接收到所述雪碧图合成指令时，通过文件创建元素在所述扩展程序操作面板上创建一个canvas画布；基于所述雪碧图合成指令在所述canvas画布上生成所述待合成图片的所述雪碧图。
31.进一步地，处理器1001可以调用存储器1005中存储的计算机程序，还执行以下操作：通过文件创建元素在所述扩展程序操作面板上创建一个canvas画布的步骤之后，基于所述雪碧图生成插件中的for循环对每一所述待合成图片进行遍历，并将遍历后的每一所述待合成图片分别加入image对象后，将所述image对象渲染到所述canvas画布上。
32.进一步地，处理器1001可以调用存储器1005中存储的计算机程序，还执行以下操作：
基于所述雪碧图合成指令生成所述待合成图片的雪碧图的步骤之后，还包括：对每一所述待合成图片对应的宽度、高度和坐标数据进行记录；根据记录的所述宽度、高度和坐标数据生成每一所述待合成图片对应的css代码后，将所述css代码显现在所述扩展程序操作面板的代码显示栏上。
33.进一步地，处理器1001可以调用存储器1005中存储的计算机程序，还执行以下操作：基于所述雪碧图合成指令生成所述待合成图片的雪碧图的步骤之后，还包括：基于所述雪碧图对所述扩展程序操作面板上的下载控件进行激活，并在接收到所述下载控件触发的下载指令时，将所述雪碧图发送至所述浏览器端。
34.进一步地，处理器1001可以调用存储器1005中存储的计算机程序，还执行以下操作：在接收到所述下载控件触发的下载指令时，将所述雪碧图发送至所述浏览器端的步骤之后，检测到所述浏览器端完成所述雪碧图的下载和存储后，将缓存至浏览器端的所述雪碧图的数据文件调出并清除。
35.参照图2，本发明一实施例提供一种雪碧图生成方法，所述雪碧图生成方法方法包括：步骤s10，当接收到雪碧图生成指令时，根据所述雪碧图生成指令弹出扩展程序操作面板；需要说明的是，在本实施例中的执行主体为雪碧图生成插件，该插件挂载在浏览器端，即利用了浏览器插件可执行javascript脚本的特性，实现了在无网络状态下的雪碧图生成，有效降低了对网络的依赖性，又可以通过浏览器端对待合成图片进行直接的获取，减少了上传下载的手动不便捷操作和图片传输的等待过程，大大减少了网络端之间的交互，简化了用户的手动操作流程。
36.具体为，当用户通过在浏览器端对雪碧图生成插件进行需求性的点击时，浏览器端接收到雪碧图生成插件的触发操作，向雪碧图生成插件发送雪碧图生成指令，使得浏览器端能够根据雪碧图生成指令弹出雪碧图生成插件的扩展程序操作面板，其中，扩展程序操作面板为雪碧图生成插件的操作界面，用于获取用户上传的操作指令，例如合成雪碧图、下载雪碧图、拓展或右击待合成图片的操作、对雪碧图进行后续编辑等等，和展示个操作指令的完成情况，例如显示合成的雪碧图的预设合成图，雪碧图下载进度条等等。
37.步骤s20，通过所述扩展程序操作面板载入待合成图片集后，将所述待合成图片集中的每一待合成图片渲染到所述扩展程序操作面板的待生成界面上；用户从浏览器端打开的网页中或浏览器关联的本地文件中选取待合成图片集，浏览器通过检测用户选取的待合成图片集并将其载入扩展程序操作面板中，其中，待合成图片集包括两张或两张以上的待合成图片，用户在扩展程序操作面板上通过拖拽或加载待合成图片的方式，或者直接通过输入设备，例如鼠标右键直接对当前网页上的待合成图片进行选取后，把载入的所有待合成图片渲染到扩展程序操作面板的待生成界面上，使得用户可以在待生成界面上直观的看到所载入的待合成图片。
38.其中，鼠标右键可直接对当前网页上的待合成图片进行选取的相关操作数据浏览器插件的api（application programming interface，应用程序编辑接口）。
39.可选地，步骤s20中将所述待合成图片集中的每一待合成图片渲染到所述扩展程序操作面板的待生成界面上的步骤包括：步骤s21，通过所述扩展程序操作面板对所述待合成图片集中的每一所述待合成图片分别进行img（images，图片）标签的定义；步骤s22，将经由所述img标签定义后的所述待合成图片渲染到所述扩展程序操作面板的待生成界面上。
40.当雪碧图生成插件检测到用户正在执行载入待合成图片的操作时，对载入的每一待合成图片进行img标签的定义，其作用是告诉扩展程序操作面板此时需要显示待合成图片。
41.其中，img标签包括src、width、height、title和alt五个属性的定义，src用于定义需要显示的待合成图片的名称；width和height用来定义需要显示的待合成图片的宽度和高度，若如ing标签没有对width和height进行定义，则此时渲染到待生成界面上的待合成图片则会因为没有指定的宽度和高度二直接基于默认的宽度和高度进行显示，存在待合成图片变形的风险；title用于当输入设备，例如鼠标悬停在待合成图片上时，可以直接弹出描述框用于展示当前内容，例如当用户操控鼠标悬停在一张待合成图片上时，待合成图片上直接弹出“这个是待合成图片”的描述框；alt是指替代文本，能够在待合成图片无法显示或者用户禁用待合成图片显示时，代替待合成图片显示在扩展程序操作面板中的内容。
42.当雪碧图生成插件上的img标签定义程序分别对载入的每一待合成图片进行定义完成后，将img标签定义完成后的待合成图片渲染到插件界面，即扩展程序操作面板的待生成界面上，供用户进行查看。
43.步骤s30，当接收到雪碧图合成指令时，基于所述雪碧图合成指令生成所述待合成图片的雪碧图。
44.当接收到雪碧图合成指令时，将所有的待合成图片合成一张大图片，即可得到一张雪碧图，如图4所示，图4为本实施例中的扩展程序操作面板，右边一栏为以载入并在待生成界面上进行渲染的五个待合成图片，但用户通过点击“合成”按钮，此时的雪碧图生成插件就会接收到雪碧图合成指令，基于该指令，将五个待合成图片合成一张大图片，即雪碧图，并在显示界面上进行显示，另外，用户还可通过扩展程序操作面板上的“下载”按钮进行雪碧图的下载和存储。
45.可选地，步骤s30中当接收到雪碧图合成指令时，基于所述雪碧图合成指令生成所述待合成图片的雪碧图的步骤包括：步骤s31，当接收到所述雪碧图合成指令时，通过文件创建元素在所述扩展程序操作面板上创建一个canvas（位图）画布；当接收到雪碧合成指令时，通过文件创建元素，即document.createelement方法在扩展程序操作面板上创建一个canvas画布，具体为根据创建一个符合待合成图片的img标签的画布后，引入一个名为“canvas”的javascript脚本，使之形成canvas画布。
46.而canvas画布是在html5（hyper text markup language 5.0，超文本标记语言5.0）中新增的标签，用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用javascript操作的位图。
47.步骤s32，基于所述雪碧图合成指令在所述canvas画布上生成所述待合成图片的
所述雪碧图。
48.在扩展程序操作面板上创建好canvas画布后，使用draw函数在canvas画布上进行绘画，即根据待合成图片在canvas画布上生成雪碧图。
49.可选地，步骤s31中通过文件创建元素在所述扩展程序操作面板上创建一个canvas画布的步骤之后，还包括：步骤s33，基于所述雪碧图生成插件中的for循环对每一所述待合成图片进行遍历，并将遍历后的每一所述待合成图片分别加入image对象后，将所述image对象渲染到所述canvas画布上。
50.其中，在扩展程序操作面板上创建好canvas画布后，通过雪碧图生成插件内的for循环对每一待合成图片进行遍历，对所有的待合成图片的节点进行访问操作，以提高程序执行效率，在遍历完所有的待合成图片后，将所有的待合成图片分别加入image对象中，把每个image对象绘制到渲染到canvas画布中，通过drawlmage得到每个image对象的图片数据，该图片数据即为每个image对象对应的待合成图片的待合成图片数据，其中image对象是javascript的内置对象，它代表嵌入的图片，当我们创建一个image对象时，就相当于缓存一张图片。
51.可选地，步骤s30中基于所述雪碧图合成指令生成所述待合成图片的雪碧图的步骤之后，还包括：步骤s34，基于所述雪碧图对所述扩展程序操作面板上的下载控件进行激活，并在接收到所述下载控件触发的下载指令时，将所述雪碧图发送至所述浏览器端。
52.另外，在扩展程序操作面板上设置有下载控件，该下载控件只有在检测到雪碧图生成完毕的时候才会被激活，激活后的下载控件能够接收用户上传的下载指令，例如当下载控件设置为扩展程序操作面板上的下载按钮时，用户通过输入设备点击扩展程序操作面板上的下载按钮，使得下载按钮被触发，进而触发下载指令，基于下载指令，雪碧图生成插件将生成完毕的雪碧图发送至浏览器端供用户进行下载和保存。
53.可选地，步骤s34中在接收到所述下载控件触发的下载指令时，将所述雪碧图发送至所述浏览器端的步骤之后，还包括：步骤s35，检测到所述浏览器端完成所述雪碧图的下载和存储后，将缓存至浏览器端的所述雪碧图的数据文件调出并清除。
54.雪碧图生成插件在检测到用户通过浏览器端完成雪碧图的下载和存储后，为了避免无效的雪碧图的数据文件存在占用存储空间的情况，雪碧图生成插件会对无效的雪碧图的数据文件调出并进行自动清除，其中，无效的雪碧图的数据文件即为在浏览器端完成下载和存储的雪碧图对应的数据文件。
55.在本实施例中，利用浏览器插件，即雪碧图生成插件可以执行javascript脚本的特性，实现了在无网络资源的情况下雪碧图的生成，有效降低了对网络的依赖性，通过接收到雪碧图生成指令时，根据雪碧图生成指令弹出扩展程序操作面板，通过扩展程序操作面板载入待合成图片集后，将所述待合成图片集中的每一待合成图片渲染到扩展程序操作面板的待生成界面上，减少了上传下载的手动操作过程和图片传输的等待过程，大大减少了网络交互，将待合成图片渲染到待生成界面上，并在接收到上传的雪碧图合成指令时，基于所述雪碧图合成指令生成所述待合成图片的雪碧图，实现了用户可在无网络资源的情况下
生成雪碧图，避免了由于大量的网络交互导致雪碧图的生成过程不流畅、延迟或失败进而增加了用户的操作难度和操作时间，有效避免了需通过网络资源进行雪碧图的获取而存在的不便捷因素，为用户提供了便捷化的雪碧图生成方式。
56.进一步的，参照图3，本发明一实施例提供一种雪碧图生成方法，步骤s30中基于所述雪碧图合成指令生成所述待合成图片的雪碧图的步骤之后，还包括：步骤s40，对每一所述待合成图片对应的宽度、高度和坐标数据进行记录；步骤s41，根据记录的所述宽度、高度和坐标数据生成每一所述待合成图片对应的css代码后，将所述css代码显现在所述扩展程序操作面板的代码显示栏上。
57.在扩展程序操作面板上生成完对应的雪碧图后，此时的雪碧图插件需要对每一待合成图片对应的宽度、高度和坐标数据进行记录，同时基于记录好的的宽度、高度和坐标数据生成每一待合成图片对应的css代码，并将该css代码显现在扩展程序操作面板的代码显示栏上，以供用户进行复制使用，避免需手动敲打对应的css代码的不便捷操作。
58.在本实施例中，通过对每一待合成图片的宽度、高度和坐标数据进行记录，并基于记录的宽度、高度和坐标数据进行对应的css代码的自动生成，避免了后续需用到该css代码时，存在需用户进行手动敲打待合成图片的css代码的不便捷操作。
59.进一步的，本发明一实施例提供一种雪碧图生成装置，所述雪碧图生成装置包括：扩展程序操作面板单元，用于接收到雪碧图生成指令时，根据所述雪碧图生成指令弹出扩展程序操作面板；待合成图片渲染单元，用于通过所述扩展程序操作面板载入待合成图片集后，将所述待合成图片集中的每一待合成图片渲染到所述扩展程序操作面板的待生成界面上；雪碧图生成单元，用于接收到雪碧图合成指令时，基于所述雪碧图合成指令生成所述待合成图片的雪碧图。
60.此外，本发明实施例还提出一种电子设备，所述电子设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述雪碧图生成方法的步骤。
61.此外，本发明还提出一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述雪碧图生成方法的步骤。
62.需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。
63.上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
64.通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如rom/ram、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。
65.以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。