图标库展示方法和装置制造方法及图纸

本申请提出了一种图标库展示方法和装置，其中方法包括：获取图标库，所述图标库中存储至少一可缩放矢量图形；将每一所述可缩放矢量图形分别加载到预设模板中，得到承载文本，其中，所述承载文本是用于承载所述可缩放矢量图形的超文本；以所述承载文本作为运行参数运行第一浏览器以渲染生成展示所述可缩放矢量图形的页面；按照预设规则生成所述页面对应的截屏图片，并展示所述截屏图片。通过本方案能够在服务器上通过node层获取多个图片并合成成一个图片，通过加载合成后的截图实现加快前端渲染速度的有益效果。渲染速度的有益效果。渲染速度的有益效果。

【技术实现步骤摘要】
图标库展示方法和装置


[0001]本申请涉及计算机
，特别是涉及一种图标库展示方法和装置。

技术介绍

[0002]SVG图形，又称为可缩放矢量图形(Scalable Vector Graphics，SVG)，它是一种用可扩展标记语言(XML)定义的用于描述二维的矢量图形。
[0003]图标库是一种用于矢量图标管理的应用仓库，使用图标库统一管理网站中的SVG图形是目前流行的方式，在图标库中一般提供矢量图标下载、在线存储、格式转换等功能。
[0004]图标库中SVG图形通过网络请求依次加载到浏览器。浏览器限制并发请求为6个，当图标过多时，会造成请求排队，导致页面渲染缓慢。
[0005]随着网站业务的复杂化，网站性能也应得到必要的优化，其中，为了减少http请求以达到页面快速显示的目的，可以利用CSS Sprite(即CSS精灵)将多个CSS样式文件中的小图标集成一张大图(俗称雪碧图)，通过减少图片数量从而减少请求次数，提高了渲染效率。目前，业界普遍采用Photoshop手动合成、Css图片合成工具或构建工具来实现雪碧图的集成。
[0006]但是，上述方式都是借用外部软件合成雪碧图来上传到服务器，在实际操作中发现合成操作不够快捷、软件安装繁琐以及使用安全性低等问题。
[0007]综上，针对目前当图标过多时，网页请求会造成排队，导致页面渲染缓慢的问题，目前尚未得到有效解决方式。

技术实现思路

[0008]本申请实施例提供了一种图标库展示方法和装置，针对现有的图标库中图标过多时，网页请求会造成排队，导致页面渲染缓慢的问题，能够在服务器上通过node层获取多个图片并合成成一个图片，通过加载合成后的截图实现加快前端渲染速度的有益效果。
[0009]第一方面，本申请实施例提供了一种图标库展示方法，所述方法包括：获取图标库，所述图标库中存储至少一可缩放矢量图形；将每一所述可缩放矢量图形分别加载到预设模板中，得到承载文本，其中，所述承载文本是用于承载所述可缩放矢量图形的超文本；以所述承载文本作为运行参数运行第一浏览器以渲染生成展示所述可缩放矢量图形的页面；按照预设规则生成所述页面对应的截屏图片，并展示所述截屏图片。
[0010]在其中一些实施例中，在所述图标库中存储有超过一个所述可缩放矢量图形的情况下，根据每个所述可缩放矢量图形的属性信息提取风格特征和/或业务特征，基于所述风格特征和/或所述业务特征对所有所述可缩放矢量图形进行排列。
[0011]在其中一些实施例中，“将每一所述可缩放矢量图形分别加载到预设模板中，得到承载文本”包括：将每一所述可缩放矢量图形分别转换为以字符串数组表示的图标内容，将所述图标内容传入预设模板中，基于所述预设模板中的模板内容以及传入的所述图标内容生成承载文本。
[0012]在其中一些实施例中，所述承载文本包括HTML文档以及CSS层叠样式表，其中，所述HTML文档用于负责所述页面的DOM元素布局，所述CSS层叠样式表用于负责所述页面的DOM元素的定位、宽高和颜色。
[0013]在其中一些实施例中，“所述以承载文本作为运行参数运行第一浏览器以渲染生成展示所述可缩放矢量图形的页面”包括：搭建基于Node.js技术框架的服务器端运行环境并安装Puppeteer依赖包，创建并实例化Puppeteer对象以用来模拟第一浏览器的运行；运行所述Puppeteer对象，将所述承载文本传入所述Puppetee对象中以渲染生成展示所述可缩放矢量图形的页面。
[0014]在其中一些实施例中，“按照预设规则生成所述页面对应的截屏图片，并展示所述截屏图片”包括：按照预设规则生成所述页面对应的截屏图片，将所述截屏图片存入文件服务器并记录所述截屏图片的存储地址；当第二浏览器预览所述图标库时，通过所述第二浏览器获取所述存储地址，基于所述存储地址请求所述截屏图片，渲染并展示所述截屏图片。
[0015]在其中一些实施例中，生成所述截屏图片的所述预设规则包括：将所述页面的宽高设置为所述预设模板的宽高，在所述页面的高度超出首屏高度显示范围的情况下，将所述页面滚动至底部并截图，否则直接对所述页面截图。
[0016]在其中一些实施例中，所述方法包括：在所述第二浏览器首次加载所述截图图片后，缓存加载后的所述截图图片，在所述第二浏览器每次预览所述图标库时，判断所述图标库对应的所述截图图片是否已缓存，若已缓存则直接从缓存中读取加载。
[0017]第二方面，本申请实施例提供了一种图标库展示装置，包括：图标库获取模块，用于获取图标库，所述图标库中存储至少一可缩放矢量图形；超文本生成模块，用于将每一所述可缩放矢量图形分别加载到预设模板中，得到承载文本，其中，所述承载文本是用于承载所述可缩放矢量图形的超文本；渲染模块，用于以所述承载文本作为运行参数运行第一浏览器以渲染生成展示所述可缩放矢量图形的页面，其中，第一浏览器用以在服务器上运行；展示模块，用于按照预设规则生成所述页面对应的截屏图片，并展示所述截屏图片。
[0018]第三方面，本申请实施例提供了一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行第一方面任一项所述的图标库展示方法。
[0019]第四方面，本申请实施例提供了一种计算机程序产品，包括软件代码部分，当所述计算机程序产品在计算机上被运行时，所述软件代码部分用于执行根据第一方面任一项所述的图标库展示方法。
[0020]第五方面，本申请实施例提供了一种可读存储介质，所述可读存储介质中存储有计算机程序，所述计算机程序包括用于控制过程以执行过程的程序代码，所述过程包括根据第一方面任一项所述的图标库展示方法。
[0021]本申请实施例的主要贡献和创新点如下：
[0022]本申请实施例通过将SVG图形嵌入node层的预设模版中，生成承载文本，将承载文本渲染后得到页面，并对页面进行截图，以截屏图片展示图标库。在目标浏览器需要展示图标库时，只需要加载渲染截图图片即可，与加载整个图标库相比，加载图片大大提高了渲染效率。通过本申请，能够解决现有技术中存在的当图标库中图标过多时，网页请求会造成排队导致页面渲染缓慢的问题。同时，本申请与目前已有的以外部软件合成雪碧图上传到服
务器的方式相比，操作更为简单，无须安装软件、且安全性更高。。
[0023]本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。
附图说明
[0024]此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
[0025]图1是根据本申请实施例的图标库展示方法的流程图；
[0026]图2是根据本申请第一实施例的图标库的第一页面展示图。
[0027]图3是根据本申请第一实施例的图标库的第二页面展示图。
[0028]图4本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种图标库展示方法，其特征在于，包括以下步骤：获取图标库，所述图标库中存储至少一可缩放矢量图形；将每一所述可缩放矢量图形分别加载到预设模板中，得到承载文本，其中，所述承载文本是用于承载所述可缩放矢量图形的超文本；以所述承载文本作为运行参数运行第一浏览器以渲染生成展示所述可缩放矢量图形的页面，其中，第一浏览器用以在服务器上运行；按照预设规则生成所述页面对应的截屏图片，并展示所述截屏图片。2.根据权利要求1所述的图标库展示方法，其特征在于，在所述图标库中存储有超过一个所述可缩放矢量图形的情况下，根据每个所述可缩放矢量图形的属性信息提取风格特征和/或业务特征，基于所述风格特征和/或所述业务特征对所有所述可缩放矢量图形进行排列。3.根据权利要求1所述的图标库展示方法，其特征在于，“将每一所述可缩放矢量图形分别加载到预设模板中，得到承载文本”包括：将每一所述可缩放矢量图形分别转换为以字符串数组表示的图标内容，将所述图标内容传入预设模板中，基于所述预设模板中的模板内容以及传入的所述图标内容生成承载文本。4.根据权利要求1所述的图标库展示方法，其特征在于，所述承载文本包括HTML文档以及CSS层叠样式表，其中，所述HTML文档用于负责所述页面的DOM元素布局，所述CSS层叠样式表用于负责所述页面的DOM元素的定位、宽高和颜色。5.根据权利要求1或4任一所述的图标库展示方法，其特征在于，“所述以承载文本作为运行参数运行第一浏览器以渲染生成展示所述可缩放矢量图形的页面”包括：搭建基于Node.js技术框架的服务器端运行环境并安装Puppeteer依赖包，创建并实例化Puppeteer对象以用来模拟第一浏览器的运行；运行所述Puppeteer对象，将所述承载文本传入所述Puppetee对象中以渲染生成展示所述可缩放矢量图形的页面。6.根据权利要求1所述的图标库展示方法，其特征在于，“按照预设规则生成所述页面对应的截屏图片，并展示所述截屏图片”包括：按照预设规则生成所...

【专利技术属性】
技术研发人员：郁强，胡飞，牛宇鹏，
申请(专利权)人：城云科技中国有限公司，
类型：发明
国别省市：