CN110377285B - 一种生成页面骨架屏的方法、装置及计算机设备 - Google Patents

Abstract

本申请涉及一种生成页面骨架屏的方法、装置及计算机设备，所述方法分析网页页面视觉稿图片中页面元素的像素布局特征，基于页面元素的像素布局特征生成页面元素的轮廓，进而基于页面元素的轮廓在视觉稿图片中对应的位置信息，生成网页页面的预定网页编程语言(如html)的骨架屏代码，这本质上实现了自动将网页页面的视觉稿图片转化为骨架屏，可有效减少开发者开发骨架屏的工作量，相应提升了骨架屏的制作效率；同时由于本申请通过对网页页面的视觉稿图片进行分析处理最终生成预定网页编程语言的骨架屏代码(代码)，从而在应用本申请方案进行骨架屏展示时不再如目前的技术那样存在编程语言及框架方面的限制，具有较好的通用性。

Description

一种生成页面骨架屏的方法、装置及计算机设备

技术领域

本申请属于互联网页面处理技术领域，尤其涉及一种生成页面骨架屏的方法、装置及计算机设备。

背景技术

在移动端网页应用、PC端网页应用或者APP小程序(如微信小程序、支付宝小程序等)中，页面前端通常会以异步请求的方式获取网页数据，由于请求的响应有一定耗时，为了避免呈现给用户空白一片的网页加载效果，通常会在请求响应的耗时、等待期间，于页面前端展示页面最终效果的骨架屏，以使得尽可能保证用户体验。

目前，骨架屏一般都是由开发者(如网站开发人员、APP小程序开发人员等)自己编写的，开发者通常根据正式页面中实际内容的页面布局和外观特征编写页面的骨架屏代码，以实现骨架屏的制作，这会耗费大量的人力、物力和时间，同时存在着骨架屏制作效率低的问题；另外，在进行骨架屏的展示时，相对应会通过分析开发者基于前端模版引擎(如vue、react等)开发的骨架屏代码逻辑来绘制出对应页面的骨架屏，这就使得会依赖于对应项目开发中所使用的编程语言及框架，由于受限于前端开发时所使用的编程语言及框架，从而相应会导致该方式的骨架屏不具备通用性。

发明内容

有鉴于此，本申请的目的在于提供一种生成页面骨架屏的方法、装置及计算机设备，以用于提升骨架屏的制作效率，同时提升所制作的骨架屏的通用性。

为实现上述目的，一方面，本申请提供了一种生成页面骨架屏的方法，该方法包括：

获取网页页面所对应的视觉稿图片；

根据所述视觉稿图片中页面元素的像素布局特征生成页面元素的轮廓；

确定页面元素的轮廓在所述视觉稿图片中对应的位置信息；

基于页面元素的轮廓在所述视觉稿图片中对应的位置信息，生成所述网页页面的预定网页编程语言的骨架屏代码，以使得后续基于所述骨架屏代码绘制所述网页页面的骨架屏。

又一方面，本申请还提供了一种生成页面骨架屏的装置，该装置包括：

获取单元，用于获取网页页面所对应的视觉稿图片；

第一生成单元，用于根据所述视觉稿图片中页面元素的像素布局特征生成页面元素的轮廓；

确定单元，用于确定页面元素的轮廓在所述视觉稿图片中对应的位置信息；

第二生成单元，用于基于页面元素的轮廓在所述视觉稿图片中对应的位置信息，生成所述网页页面的预定网页编程语言的骨架屏代码，以使得后续基于所述骨架屏代码绘制所述网页页面的骨架屏。

再一方面，本申请还提供了一种计算机设备，该计算机设备包括：

存储器，用于存储程序；

处理器，用于执行所述程序，所述程序在被调用时至少能用于执行上述的方法。

由以上方案可知，本申请提供的生成页面骨架屏的方法、装置及计算机设备，分析网页页面视觉稿图片中页面元素的像素布局特征，基于页面元素的像素布局特征生成页面元素的轮廓，进而基于页面元素的轮廓在所述视觉稿图片中对应的位置信息，生成所述网页页面的预定网页编程语言的骨架屏代码(后续可基于所述预定网页编程语言的骨架屏代码绘制所述网页页面的骨架屏)，这本质上实现了自动将网页页面的视觉稿图片转化为骨架屏(代码)，可有效减少开发者开发骨架屏的工作量，相应提升了骨架屏的制作效率；同时由于本申请通过对网页页面的视觉稿图片进行分析、处理最终生成预定网页编程语言(如html)的骨架屏代码，从而在应用本申请方案进行骨架屏展示时不再如目前的技术那样存在编程语言及框架方面的限制，具有较好的通用性。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1是本申请可选实施例中在服务器端新增网页时，由服务器生成骨架屏并在网页前端请求网页时向网页前端反馈所请求网页的骨架屏的示意图；

图2是本申请可选实施例中在终端生成网页及骨架屏并增加至服务器、并由服务器在网页前端请求网页时向网页前端反馈所请求网页的骨架屏的示意图；

图3是本申请可选实施例的生成页面骨架屏的方法所适用的计算机设备的一种结构示意图；

图4是本申请可选实施例中生成页面骨架屏的方法的一种流程示意图；

图5是本申请可选实施例中生成页面元素的轮廓的一种流程示意图；

图6(a)-图6(d)是本申请可选实施例中从不同方向遍历第一灰度图像的各像素点时，将符合条件的白色像素点转换为非白色灰度像素点的示意图；

图7是本申请可选实施例提供的本申请方法的一应用示例中将页面视觉稿转换为页面骨架屏的处理过程示意图；

图8是本申请可选实施例提供的生成页面骨架屏的装置的一种结构示意图；

图9是本申请可选实施例提供的生成页面骨架屏的装置的另一种结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

作为本申请实施例的一个方面，本申请提供了一种生成页面骨架屏的方法，该方法可通过分析网页页面视觉稿图片中页面元素的像素布局特征，进行页面元素轮廓的生成及轮廓位置的获取，并基于页面元素的轮廓位置最终将网页页面的视觉稿图片转换为预定网页编程语言的骨架屏(代码)，以此来提升骨架屏的制作效率，同时提升所制作的骨架屏的通用性。

可选的，上述生成页面骨架屏的方法可以应用在计算机设备中，该计算机设备可以是服务器，如具体地可以是部署在网络端的用于提供网页服务的网页服务器，或者，该计算机设备还可以是移动端或PC端终端设备，如智能手机、平板电脑、笔记本、一体机、台式机等，执行本申请方法的执行主体可以是多样化的，本申请实施例对此不作限定。

当将本申请的上述方法应用于服务器时，如图1所示，具体可将该方法以附加服务(骨架屏生成服务)的形式增设在服务器所提供的网页服务中，从而，每当网页服务器中新增一个网页，网页服务器则可基于其提供的该附加服务为新增的网页生成骨架屏(代码)，以便于后续在网页前端请求网页数据时在网页数据的响应等待期间向网页前端反馈所请求网页的骨架屏代码、进而支持网页前端绘制并展示所请求网页的骨架屏；在将本申请的上述方法应用于移动端或PC端终端设备的情况下，如图2所示，具体可以但不限于以插件的形式、或软件工具/软件App的形式对本申请方法加以实施，并在移动端或PC端终端设备上加载、运行该插件，或安装、运行该软件工具/软件App，这样，当开发者完成一个网页的开发时，可利用终端设备上的该插件或软件工具/软件App自动生成网页的骨架屏，之后可将网页及其对应的骨架屏同时提交至网页服务器，后续，在网页前端向网页服务器请求网页数据时在网页数据的响应等待期间可由网页服务器向网页前端反馈所请求网页的骨架屏代码，进而便于网页前端基于反馈的骨架屏代码绘制并展示所请求网页的骨架屏。

参阅图3，其示出了本申请方法所适用的计算机设备的一种组成结构示意图。在图3中，该计算机设备可以包括：处理器301和存储器302。当然，还可以包括通信接口303、输入单元304、显示器305和通信总线306。

其中，处理器301、存储器302、通信接口303、输入单元304及显示器305，均通过通信总线306完成相互间的通信。

在本申请实施例中，该处理器301，可以为中央处理器(Central ProcessingUnit，CPU)，特定应用集成电路(application-specific integrated circuit，ASIC)，数字信号处理器(DSP)、专用集成电路(ASIC)、现成可编程门阵列(FPGA)或者其他可编程逻辑器件等。

该处理器301可以调用存储器302中存储的程序。

存储器302中用于存放一个或者一个以上程序，程序可以包括程序代码，所述程序代码包括计算机操作指令，在本申请实施例中，该存储器302中至少存储有用于实现以下功能的程序：

获取网页页面所对应的视觉稿图片；

根据所述视觉稿图片中页面元素的像素布局特征生成页面元素的轮廓；

确定页面元素的轮廓在所述视觉稿图片中对应的位置信息；

基于页面元素的轮廓在所述视觉稿图片中对应的位置信息，生成所述网页页面的预定网页编程语言的骨架屏代码，以使得后续基于所述骨架屏代码绘制所述网页页面的骨架屏。

在一种可能的实现方式中，该存储器302可包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、以及至少一个功能(比如声音播放功能、图像播放功能等)所需的应用程序等；存储数据区可存储根据计算机的使用过程中所创建的数据，比如，用户数据、用户访问数据以及音频数据等等。

此外，存储器302可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

通信接口303可以为通信模块的接口，如GSM模块的接口。

输入单元304可以为触摸感应单元、键盘等等。显示器305可以包括显示面板，如触摸显示面板等。

当然，图3所示的终端设备结构并不构成对本申请实施例中终端设备的限定，在实际应用中该终端设备可以包括比图3所示的更多或更少的部件，或者组合某些部件。

另外，为了引用和清楚起见，这里同时对本申请下文所涉及的一些技术名词、简写或缩写总结解释如下：

视觉稿：视觉稿是高保真的静态设计图，用以表达产品设计框架，也可用作静态演示内容和功能；

Node.js：是一个Javascript运行环境(runtime environment)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js是一个基于ChromeJavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动，非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用；

骨架屏：顾名思义就是页面显示的骨架内容，即展示页面的轮廓和内容显示的位置信息，通常用在数据未填充时的页面展示；

RGBA：RGBA是代表Red(红色)Green(绿色)Blue(蓝色)和Alpha(表示像素的透明度)的色彩空间。虽然它有的时候被描述为一个颜色空间，但是它其实仅仅是在RGB模型基础上附加了额外的信息，采用的颜色是RGB，可以属于任何一种RGB颜色空间，但是Catmull和Smith在1971至1972年间提出了这个不可或缺的alpha数值，使得alpha渲染和alpha合成变得可能，提出者以alpha来命名是源于经典的线性插值方程αA+(1-α)B所用的就是这个希腊字母。

以下将基于本申请实施例涉及的上述共性方面，对本申请实施例进一步详细说明。如图4所示，为本申请一可选实施例提供的一种生成页面骨架屏的方法的流程示意图，该方法包括：

步骤S401、获取网页页面所对应的视觉稿图片。

具体地，作为一种可选的实施方式，可由网页服务器在其新增一个网页时，获取(如调用或加载)该新增网页对应的视觉稿图片，以用于在服务器端通过对网页页面的视觉稿图片进行分析、处理来得到网页页面的骨架屏。

或者，作为另一种可选的实施方式，还可以在开发者需利用运行于移动端或PC端的插件/软件工具生成一个网页的骨架屏时，由该运行于移动端或PC端的插件/软件工具获取(如调用或加载)网页页面的视觉稿图片，以用于在终端设备端通过对网页页面的视觉稿图片进行分析、处理来得到网页页面的骨架屏。

步骤S402、根据所述视觉稿图片中页面元素的像素布局特征生成页面元素的轮廓。

所述页面元素可以包括但不限于文字、图片、按钮、控件和/或浮窗等网页页面中用于构成页面内容的元素。

在获得网页页面的视觉稿图片后，本申请实施例首先分析网页页面的视觉稿图片中页面元素的像素布局特征，并基于页面元素的像素布局特征生成页面元素的轮廓，以此使得为网页页面骨架屏的生成提供基础。

参阅图5，为本申请实施例提供的根据所述视觉稿图片中页面元素的像素布局特征生成页面元素的轮廓的一种可选实施方式的流程图，如图5所示，具体可通过如下的处理过程生成页面元素的轮廓：

步骤S501、遍历视觉稿图片的各像素点，若当前像素点为非白色，则将该像素点转换为具有相应灰度值的非白色灰度像素点，得到视觉稿图片的第一灰度图像。

所述具有相应灰度值的非白色灰度像素点，具体地，比如可以是黑色像素点，或者还可以是灰度值位于0～255之间的任一非白色灰度像素点，通常，为了便于将该非白色灰度像素点与网页视觉稿上的白色像素点加以有效区分，该非白色灰度像素点的灰度值与白色像素点的灰度值的绝对差值应大于设定的数值。

步骤S502、将所述第一灰度图像中符合预定条件的白色像素点转换为非白色灰度像素点，得到第二灰度图像；其中，所述预定条件至少能用于表征所述白色像素点在四邻域中相邻的各像素点中至少一半的像素点为非白色灰度像素点。

在骨架屏展示中，通常会将页面元素对应展示成形状较规则的页面元素骨架，鉴于此，本实施例中，旨在通过该步骤302的处理实现将视觉稿中的页面元素内容转换为形状较规则的页面元素轮廓(该轮廓也即相当于页面元素的骨架)。

具体地，在本申请实施例的一可选的实施方式中，可通过执行以下遍历处理中的至少一种来实现该步骤302：

1)从上往下，从左往右遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点右下方第一个像素点是否为非白色，若是，则将该像素点右边相邻的像素点和下方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点右边相邻的像素点及下方相邻的像素点是否均为非白色，若是，则将该像素点右下方的第一个像素点转换为非白色灰度像素点；具体可结合图6(a)的图示对该步骤1)进行理解；

2)从上往下、从右往左遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点左下方第一个像素点是否为非白色，若是，则将该像素点左边相邻的像素点和下方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点左边相邻的像素点及下方相邻的像素点是否均为非白色，若是，则将该像素点左下方的第一个像素点转换为非白色灰度像素点；具体可结合图6(b)的图示对该步骤1)进行理解；

3)从下往上、从左往右遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点右上方第一个像素点是否为非白色，若是，则将该像素点右边相邻的像素点和上方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点右边相邻的像素点及上方相邻的像素点是否均为非白色，若是，则将该像素点右上方的第一个像素点转换为非白色灰度像素点；具体可结合图6(c)的图示对该步骤1)进行理解；

4)从下往上、从右往左遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点左上方第一个像素点是否为非白色，若是，则将该像素点左边相邻的像素点和上方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点左边相邻的像素点及上方相邻的像素点是否均为非白色，若是，则将该像素点左上方的第一个像素点转换为非白色灰度像素点；具体可结合图6(d)的图示对该步骤1)进行理解。

其中，在通过以上的至少一种遍历处理后，能够将第一灰度图像中的各个非白色灰度像素点(也即对应于网页页面中的页面元素内容)转换为至少一个较规则的矩形灰度图像区域，相应得到第二灰度图像；第二灰度图像中每一个由连续的多个非白色灰度像素点组成的最大矩形区域作为一个页面元素的轮廓。

实际实施本申请时，为了能够较为全面地将第一灰度图像中的各个非白色灰度像素点(也即对应于网页页面中的页面元素内容)转换为较规则的矩形区域，尽可能少地遗漏非白色灰度像素点的转换，优选地，可同时结合采用上述的1)-4)这四种遍历方式，来相应弥补某一种遍历方式对非白色灰度像素点转矩形区域时的遗漏。

通过上述的遍历方式，可有效实现将第一灰度图像中相邻的各个像素点中至少一半的像素点为非白色灰度像素点的白色像素点转换为非白色灰度像素点，然而对于离散度更高的、相邻的各个像素点中少于一半的像素点为非白色灰度像素点的白色像素点，则不能进行有效转换。

为进一步实现对该类白色像素点的转换，在本申请实施例的另一种可选实施方式中，在执行上述的1)-4)的至少一种遍历处理后，还可以进一步执行以下处理：

5)从上往下、从左往右(当然，可以选择以其他的方向遍历，比如从上往下、从右往左，或从下往上、从左往右，或从下往上、从右往左等等)遍历所述第一灰度图像的各像素点，若当前像素点为非白色且该像素点不在所组成的各个矩形区域内，则进行以下处理：

构建一个包含该像素点的1*1的矩形；判断该矩形右边和下方相邻的像素点是否均为白色，若否，则将该矩形向右下方扩大为2*2；重复以上的对该矩形的扩展处理，直至该矩形的右边和下方相邻的像素点均为白色时停止对该矩形的扩展处理，并开始对所述当前像素点的下一个像素点进行遍历处理，直至所述第一灰度图像中的全部像素点遍历完成时为止，得到所述第二灰度图像。

步骤S503、所述第二灰度图像中由至少一组连续的多个非白色灰度像素点组成的至少一个灰度图像区域，构成所述视觉稿图片的至少一个页面元素的轮廓。

本申请实施例中，页面元素的轮廓也即指页面元素在骨架屏中对应的页面元素骨架。

步骤S403、确定页面元素的轮廓在所述视觉稿图片中对应的位置信息。

在通过上述处理得到网页页面中页面元素的轮廓后，可根据其在视觉稿图片中的实际布局位置，确定并记录页面元素轮廓在视觉稿中对应的位置信息。

本实施例中，页面元素的轮廓具体为由多个非白色灰度像素点构成的灰度图像区域，作为一可选的实施方式，具体可采用“左上角像素点位(如左上角像素点的坐标)+矩形尺寸(如10*9)”的方式，来记录页面元素的轮廓所对应的矩形区域在视觉稿图片中的位置，从而，页面元素的轮廓在所述视觉稿图片中对应的位置信息则相对应地可以包括：页面元素轮廓的矩形区域的左上角像素点位信息及矩形区域的尺寸信息。

另外，可选地，还可以采用记录矩形区域的四个顶点的点位信息(如坐标值)的形式，来记录页面元素的轮廓所对应的矩形区域在视觉稿图片中的位置，在该方式下，则页面元素的轮廓在所述视觉稿图片中对应的位置信息相对应地包括：页面元素轮廓的矩形区域的四个顶点点位信息。

具体实施中，可采用上述两种方式中的任一种或者还可以是上述两种方式之外的其他可行的方式，来记录页面元素的轮廓在所述视觉稿图片中对应的位置信息，本实施例对此不作限定。

步骤S404、基于页面元素的轮廓在所述视觉稿图片中对应的位置信息，生成所述网页页面的预定网页编程语言的骨架屏代码，以使得后续基于所述骨架屏代码绘制所述网页页面的骨架屏。

在确定并记录页面元素的轮廓在所述视觉稿图片中对应的位置信息后，最终可基于页面元素的轮廓在所述视觉稿图片中对应的位置信息生成所述网页页面的预定网页编程语言的骨架屏代码。

其中，可选地，可基于所述第二灰度图像中各矩形区域的位置信息，生成所述网页页面的超文本标记语言html骨架屏代码；在所述html骨架屏代码中以预定标签元素标记各个矩形区域，以使得在调用网页页面的骨架屏代码时可基于所述预定标签元素来布局渲染网页页面的骨架屏。

在html骨架屏代码中，以标签元素标记的每个矩形区域，具体记录了相对应的页面元素的轮廓的属性信息，如矩形区域的位置、颜色、外形等属性。

在移动端/PC端网页前端实现中，具体可以采用div等标签元素布局渲染得到页面的骨架屏，在小程序端应用中，则可以采用view等标签元素布局渲染得到页面的骨架屏。

由以上方案可知，本申请实施例提供的生成页面骨架屏的方法，分析网页页面视觉稿图片中页面元素的像素布局特征，基于页面元素的像素布局特征生成页面元素的轮廓，进而基于页面元素的轮廓在所述视觉稿图片中对应的位置信息，生成所述网页页面的预定网页编程语言的骨架屏代码(后续可基于所述预定网页编程语言的骨架屏代码绘制所述网页页面的骨架屏)，这本质上实现了自动将网页页面的视觉稿图片转化为骨架屏(代码)，可有效减少开发者开发骨架屏的工作量，相应提升了骨架屏的制作效率；同时由于本申请通过对网页页面的视觉稿图片进行分析、处理最终生成预定网页编程语言(如html)的骨架屏代码，从而在应用本申请方案进行骨架屏展示时不再如目前的技术那样存在编程语言及框架方面的限制，具有较好的通用性。

在本申请一可选实施例中，在根据视觉稿图片中页面元素的像素布局特征生成页面元素的轮廓之后，并基于轮廓的位置信息生成网页页面的骨架屏代码之前，还可以对生成的页面元素的轮廓对应的矩形区域进行以下处理：

6)对所述第二灰度图像中的各个矩形区域进行预定的行归类处理，以使得将所述第二灰度图像中的各个矩形区域归类为至少一个行集合并基于行集合信息进行所述网页页面的骨架屏代码的生成；

其中，所述第二灰度图像中的各个矩形区域中满足预定位置条件的至少一个矩形区域被归类至同一个行集合中。

具体地，可基于预定的高度单位从上往下遍历当然，可以选择以其他的方向遍历，比如从下往上等所述第二灰度图像的全部图像区域，以当前遍历的高度值为基准线，判断是否有矩形区域落在基准线上；矩形区域落在基准线上包括：基准线穿过矩形区域或基准线与矩形区域的顶部重合；

若是，则：将落在基准线上的各个矩形区域归类为一个行集合并记录行集合信息，所述行集合信息包括：由所述落在基准线上的各个矩形区域构成的行集合区域的位置信息，以及所述落在基准线上的每个矩形区域的位置信息；判断是否有其他矩形落在所述行集合区域中(比如，其他矩形的全部矩形区域处于行集合区域，或者其他矩形的部分矩形区域处于行集合区域等)，若有其他矩形落在所述行集合区域中，则基于落在所述行集合区域中的所述其他矩形，调整所述行集合及所述行集合的行集合信息(调整行集合区域的位置信息并将落在所述行集合区域中的所述其他矩形的位置信息添加进所述行集合信息中)，并重新基于调整后的行集合判断是否有其他矩形落在行集合区域中，直至不再有新的矩形区域加入当前行集合时完成基于当前基准线的行归类处理，并将基准线下移至当前行集合中处于最底部的矩形区域的底部并下移一个高度单位，之后，基于下移后的基准线继续进行行归类处理，直至第二灰度图像的全部像素区域遍历完毕时结束；若无其他矩形落在所述行集合区域中，则将基准线下移至当前行集合中处于最底部的矩形区域的底部并下移一个高度单位，并基于下移后的基准线继续进行行归类处理，直至第二灰度图像的全部像素区域遍历完毕时结束。

若否，则：将基准线下移一个高度单位，基于下移后的基准线继续进行行归类处理，直至第二灰度图像的全部像素区域遍历完毕时结束。

其中，可选地，所述预定的高度单位可以是0.5个像素、1个像素、2个像素或3个像素对应的高度等，本实施例对此不作限定。在实际应用中，由于视觉稿的最小单位是0.5的像素，比如一条高0.5像素的分割线等，如果使用大于0.5个像素的高度单位(如1个、2个或3个像素对应的高度)，可能会漏掉对某些矩形的归类，从而，具体实施本申请时，优选地，可采用0.5个像素对应的高度作为所述基准线下移时所基于的高度单位。

本实施例将所述第二灰度图像中的各个矩形区域归类为至少一个行集合，并基于行集合信息进行所述网页页面的html骨架屏代码的生成，可使得所生成的网页页面的骨架屏html代码更为整洁，能够为开发者对所述骨架屏html代码的维护提供便利，举例来说，如果开发者需调整所生成的骨架屏html代码中的某一矩形的属性(如调整某一矩形的高度、宽度或灰度值，或者为某一矩形添加浮窗属性以使得在骨架屏中以浮窗形式展示该矩形等)，则可直接基于更为结构化的行集合，从相应行集合中定位至所需的矩形，而不必再从未结构化的所有矩形中定位至所需的矩形，从而可便于开发者快速、准确地找到所需维护的矩形。

为了便于对本申请的生成页面骨架屏的方法进行理解，以下进一步结合本申请实施例的一种应用示例对本申请方法进行介绍。在该示例中，参阅图7，具体可应用本申请方法通过如下处理，来生成网页页面的骨架屏：

步骤一、通过nodejs使用相应的图像处理库(如Jimp等)获取某一网页页面视觉稿图片的全部像素点的RGBA值；

所述RGBA中的“A”为Alpha，Alpha表示像素的透明度，Alpha通道本质上为一个8位的灰度通道，该通道用256级灰度来记录图像中的灰度信息，那么，相应地，可以采用图像像素的透明度即Alpha值来表示图像像素的灰度。

步骤二、遍历步骤一中获取到的全部像素点的RGBA值，如果遍历到的当前像素点对应的RGBA值表示该像素点为非白色(如对应的RGBA值为：255，255，255，255)，则将该像素点的RGBA值转为黑色(对应的RGBA值为：0，0，0，255)，通过该步骤可以将彩色的视觉稿转换为黑白色。

步骤三、从上往下，从左往右遍历在步骤二转换基础上所得的全部像素点。当遍历到的当前像素点对应的RGBA值为黑色时，判断该像素点右下方的第一个像素点其RGBA值是否为黑色，如果是(合并方式)，则将该像素点右边相邻的像素点和下方相邻的像素点转换为黑色。否则判断该像素点右边相邻的像素点是否为黑色且该像素点下方的像素点是否为黑色，如果是(扩充方式)，则将该像素点右下方的第一个像素点改为黑色。通过该步骤可以将视觉稿中的相邻近内容区块向右下方连接起来。

步骤四、重复类似步骤三的方式，以从上往下、从右往左的方式遍历，并合并(或扩充)黑色像素点左下方的黑色像素。以从下往上、从左往右的方式遍历，合并(或扩充)黑色像素点右上方的黑色像素。以从下往上、从右往左的方式遍历，合并(或扩充)黑色像素点左上方的黑色像素。通过步骤三和四的操作，可以将黑白色视觉稿中的内容转换为较规则的矩形区域，并记录各矩形的左上角像素点位和矩形的尺寸。

步骤五、在以上处理的基础上，从上往下、从左往右遍历(当然，可以选择以其他的方向遍历，比如从上往下、从右往左，或从下往上、从左往右，或从下往上、从右往左等等)全部像素点的RGBA值，如果该像素点为黑色且该像素点不在已记录的矩形区域内，则进行以下处理：构建一个包含该像素点1*1的矩形，判断创建的当前矩形右边和下方相邻的像素点RGBA值是否全部为白色，如果不是，则该矩形扩大为2*2，且保持矩形以当前遍历的像素点为左上角点。重复上述方式判断矩形右边和下方相邻的像素点是否全部为白色，如果不是，则扩大为3*3。一直重复上述判断，直到矩形右边和下方相邻的像素点都为白色为止，记录该矩形的左上角像素点位和矩形的尺寸。通过该步骤的处理，可以将视觉稿中的不规则矩形区域全部转换为规则的矩形区域，并获得视觉稿中所有内容的所在位置和矩形区域大小。

步骤六、从上往下遍历(当然，也可以选择以其他的方向遍历，比如从下往上等)全部图像区域(如图片高度为1200，则遍历范围为0～1199)，以当前遍历值为基准线(比如基准线位于10)，判断是否有矩形落在当前基准线中(矩形落在当前基准线中包括：基准线被包含在矩形中，即基准线穿过了矩形或者基准线刚好和矩形的顶部重合)，如果有，则存储这些矩形(比如：一个25*25的矩形)为一个行集合(则该行集合为起于位置10且高度为25，宽度默认为100％的行，记录的行集合信息包括该行集合位置信息同时包括落在当前基准线中的各矩形的位置信息)，遍历全部矩形，判断是否有其他矩形落在行集合区域中，如果有则将该矩形包含进该行集合，并重新判断行集合起始位置和高度，及重新调整记录的行集合信息。重复以上判断，直到不再有新的矩形加入当前行集合，并将基准线下移到该集合中处于最底部的矩形的下方并下移一个的位置(即一个高度单位)。如果没有，则将基准线下移一个位置。重复以上操作，直到基准线到达1199为止。

通过该步骤，可将视觉稿中全部内容区域(矩形区域)，以行的方式归类。

步骤七、基于行集合信息生成所述网页页面的html骨架屏代码，在所述html骨架屏代码中以预定标签元素标记每个行中的各个矩形区域，以使得在调用网页页面的骨架屏代码时可基于所述预定标签元素布局渲染网页页面的骨架屏。

在移动端/PC端网页前端实现中，具体可以采用div等标签元素布局渲染得到页面的骨架屏，在小程序端应用中，则可以采用view等标签元素布局渲染得到页面的骨架屏。

另一方面，本申请还提供了一种生成页面骨架屏的装置。

参阅图8，其示出了本申请生成页面骨架屏的装置的一种结构示意图，该装置具体可应用于服务器或移动端/PC端终端设备等计算机设备中，其中，本申请装置所适用的该计算机设备的组成结构可以参阅前文的相关介绍，这里不再赘述。

如图8所示，本申请实施例的生成页面骨架屏的装置可以包括：

获取单元801，用于获取网页页面所对应的视觉稿图片；

第一生成单元802，用于根据所述视觉稿图片中页面元素的像素布局特征生成页面元素的轮廓；

确定单元803，用于确定页面元素的轮廓在所述视觉稿图片中对应的位置信息；

第二生成单元804，用于基于页面元素的轮廓在所述视觉稿图片中对应的位置信息，生成所述网页页面的预定网页编程语言的骨架屏代码，以使得后续基于所述骨架屏代码绘制所述网页页面的骨架屏。

在本申请实施例的一可选的实施方式中，所述第一生成单元802，具体用于：

遍历视觉稿图片的各像素点，若当前像素点为非白色，则将该像素点转换为具有相应灰度值的非白色灰度像素点，得到视觉稿图片的第一灰度图像；

将所述第一灰度图像中符合预定条件的白色像素点转换为非白色灰度像素点，得到第二灰度图像；其中，所述预定条件至少能用于表征所述白色像素点在四邻域中相邻的各像素点中至少一半的像素点为非白色灰度像素点；

所述第二灰度图像中由至少一组连续的多个非白色灰度像素点组成的至少一个灰度图像区域，构成所述视觉稿图片的至少一个页面元素的轮廓。

在本申请实施例的一可选的实施方式中，所述第一生成单元802，将所述第一灰度图像中符合预定条件的白色像素点转换为非白色灰度像素点，得到第二灰度图像，具体包括以下的至少一种遍历处理：

从上往下，从左往右遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点右下方第一个像素点是否为非白色，若是，则将该像素点右边相邻的像素点和下方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点右边相邻的像素点及下方相邻的像素点是否均为非白色，若是，则将该像素点右下方的第一个像素点转换为非白色灰度像素点；

从上往下、从右往左遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点左下方第一个像素点是否为非白色，若是，则将该像素点左边相邻的像素点和下方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点左边相邻的像素点及下方相邻的像素点是否均为非白色，若是，则将该像素点左下方的第一个像素点转换为非白色灰度像素点；

从下往上、从左往右遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点右上方第一个像素点是否为非白色，若是，则将该像素点右边相邻的像素点和上方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点右边相邻的像素点及上方相邻的像素点是否均为非白色，若是，则将该像素点右上方的第一个像素点转换为非白色灰度像素点；

从下往上、从右往左遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点左上方第一个像素点是否为非白色，若是，则将该像素点左边相邻的像素点和上方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点左边相邻的像素点及上方相邻的像素点是否均为非白色，若是，则将该像素点左上方的第一个像素点转换为非白色灰度像素点；

其中，在通过以上的至少一种遍历处理后，能够将第一灰度图像中的各个非白色灰度像素点转换为至少一个矩形灰度图像区域，相应得到第二灰度图像；第二灰度图像中每一个由连续的多个非白色灰度像素点组成的最大矩形区域作为一个页面元素的轮廓。

在本申请实施例的一可选的实施方式中，所述第一生成单元802，在进行所述至少一种遍历所述后，还用于：

从上往下、从左往右遍历所述第一灰度图像的各像素点，若当前像素点为非白色且该像素点不在所组成的各个矩形区域内，则进行以下处理：

构建一个包含该像素点的1*1的矩形；

判断该矩形右边和下方相邻的像素点是否均为白色，若否，则将该矩形向右下方扩大为2*2；

重复以上的对该矩形的扩展处理，直至该矩形的右边和下方相邻的像素点均为白色时停止对该矩形的扩展处理，并开始对所述当前像素点的下一个像素点进行遍历处理，直至所述第一灰度图像中的全部像素遍历完成时为止，得到所述第二灰度图像。

在本申请实施例的一可选的实施方式中，所述第二生成单元804，具体用于：

基于所述第二灰度图像中各矩形区域的位置信息，生成所述网页页面的超文本标记语言html骨架屏代码；

其中，在所述html骨架屏代码中以预定标签元素标记各个矩形区域，以使得在调用网页页面的骨架屏代码时基于所述预定标签元素布局渲染网页页面的骨架屏。

在本申请实施例的一可选的实施方式中，参阅图9，所述生成页面骨架屏的装置还可以包括：

行归类单元805，用于对所述第二灰度图像中的各个矩形区域进行预定的行归类处理，以使得将所述第二灰度图像中的各个矩形区域归类为至少一个行集合并基于行集合信息进行所述网页页面的骨架屏代码的生成；

其中，所述第二灰度图像中的各个矩形区域中满足同一位置条件的至少一个矩形区域被归类至同一个行集合中。

在本申请实施例的一可选的实施方式中，所述行归类单元805对所述第二灰度图像中的各个矩形区域进行预定的行归类处理，具体包括：

基于预定的高度单位从上往下遍历所述第二灰度图像的全部图像区域，以当前遍历的高度值为基准线，判断是否有矩形区域落在基准线上；矩形区域落在基准线上包括：基准线穿过矩形区域或基准线与矩形区域的顶部重合；

若是，则：将落在基准线上的各个矩形区域归类为一个行集合并记录行集合信息，所述行集合信息包括：由所述落在基准线上的各个矩形区域构成的行集合区域的位置信息，以及所述落在基准线上的每个矩形区域的位置信息；判断是否有其他矩形落在所述行集合区域中，若有其他矩形落在所述行集合区域中，则基于落在所述行集合区域中的所述其他矩形，调整所述行集合及所述行集合的行集合信息，并重新基于调整后的行集合判断是否有其他矩形落在行集合区域中，直至不再有新的矩形区域加入当前行集合时完成基于当前基准线的行归类处理，并将基准线下移至当前行集合中处于最底部的矩形区域的底部并下移一个高度单位，之后，基于下移后的基准线继续进行行归类处理，直至第二灰度图像的全部像素区域遍历完毕时结束；若无其他矩形落在所述行集合区域中，则将基准线下移至当前行集合中处于最底部的矩形区域的底部并下移一个高度单位，并基于下移后的基准线继续进行行归类处理，直至第二灰度图像的全部像素区域遍历完毕时结束。

若否，则：将基准线下移一个高度单位，基于下移后的基准线继续进行行归类处理，直至第二灰度图像的全部像素区域遍历完毕时结束。

再一方面，本申请还提供了一种存储介质，该存储介质中存储有计算机程序，所述计算机程序被处理器加载并执行时，实现如上任意一个实施例中所描述的生成页面骨架屏的方法。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

为了描述的方便，描述以上系统或装置时以功能分为各种模块或单元分别描述。当然，在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。

最后，还需要说明的是，在本文中，诸如第一、第二、第三和第四等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。

Claims (14)

1.一种生成页面骨架屏的方法，其特征在于，包括：

获取网页页面所对应的视觉稿图片；

根据所述视觉稿图片中页面元素的像素布局特征生成页面元素的轮廓；

确定页面元素的轮廓在所述视觉稿图片中对应的位置信息；

基于页面元素的轮廓在所述视觉稿图片中对应的位置信息，生成所述网页页面的预定网页编程语言的骨架屏代码，以使得后续基于所述骨架屏代码绘制所述网页页面的骨架屏；

所述根据所述视觉稿图片中页面元素的像素布局特征生成页面元素的轮廓，包括：

遍历视觉稿图片的各像素点，若当前像素点为非白色，则将该像素点转换为具有相应灰度值的非白色灰度像素点，得到视觉稿图片的第一灰度图像；

将所述第一灰度图像中符合预定条件的白色像素点转换为非白色灰度像素点，得到第二灰度图像；其中，所述预定条件至少能用于表征所述白色像素点在四邻域中相邻的各像素点中至少一半的像素点为非白色灰度像素点；

所述第二灰度图像中由至少一组连续的多个非白色灰度像素点组成的至少一个灰度图像区域，构成所述视觉稿图片的至少一个页面元素的轮廓。

2.根据权利要求1所述的方法，其特征在于，所述将所述第一灰度图像中符合预定条件的白色像素点转换为非白色灰度像素点，得到第二灰度图像，包括以下的至少一种遍历处理：

从上往下，从左往右遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点右下方第一个像素点是否为非白色，若是，则将该像素点右边相邻的像素点和下方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点右边相邻的像素点及下方相邻的像素点是否均为非白色，若是，则将该像素点右下方的第一个像素点转换为非白色灰度像素点；

从上往下、从右往左遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点左下方第一个像素点是否为非白色，若是，则将该像素点左边相邻的像素点和下方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点左边相邻的像素点及下方相邻的像素点是否均为非白色，若是，则将该像素点左下方的第一个像素点转换为非白色灰度像素点；

从下往上、从左往右遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点右上方第一个像素点是否为非白色，若是，则将该像素点右边相邻的像素点和上方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点右边相邻的像素点及上方相邻的像素点是否均为非白色，若是，则将该像素点右上方的第一个像素点转换为非白色灰度像素点；

从下往上、从右往左遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点左上方第一个像素点是否为非白色，若是，则将该像素点左边相邻的像素点和上方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点左边相邻的像素点及上方相邻的像素点是否均为非白色，若是，则将该像素点左上方的第一个像素点转换为非白色灰度像素点；

其中，在通过以上的至少一种遍历处理后，能够将第一灰度图像中的各个非白色灰度像素点转换为至少一个矩形灰度图像区域，相应得到第二灰度图像；第二灰度图像中每一个由连续的多个非白色灰度像素点组成的最大矩形区域作为一个页面元素的轮廓。

3.根据权利要求2所述的方法，其特征在于，在进行所述至少一种遍历处理后，所述方法还包括：

从上往下、从左往右遍历所述第一灰度图像的各像素点，若当前像素点为非白色且该像素点不在所组成的各个矩形区域内，则进行以下处理：

构建一个包含该像素点的1*1的矩形；

判断该矩形右边和下方相邻的像素点是否均为白色，若否，则将该矩形向右下方扩大为2*2；

重复以上的对该矩形的扩展处理，直至该矩形的右边和下方相邻的像素点均为白色时停止对该矩形的扩展处理，并开始对所述当前像素点的下一个像素点进行遍历处理，直至所述第一灰度图像中的全部像素点遍历完成时为止，得到所述第二灰度图像。

4.根据权利要求3所述的方法，其特征在于，所述基于页面元素的轮廓在所述视觉稿图片中对应的位置信息，生成所述网页页面的预定网页编程语言的骨架屏代码，包括：

基于所述第二灰度图像中各矩形区域的位置信息，生成所述网页页面的超文本标记语言html骨架屏代码；

其中，在所述html骨架屏代码中以预定标签元素标记各个矩形区域，以使得在调用网页页面的骨架屏代码时基于所述预定标签元素布局渲染网页页面的骨架屏。

5.根据权利要求3所述的方法，其特征在于，在生成所述网页页面的预定网页编程语言的骨架屏代码之前，所述方法还包括：

对所述第二灰度图像中的各个矩形区域进行预定的行归类处理，以使得将所述第二灰度图像中的各个矩形区域归类为至少一个行集合、并基于行集合信息进行所述网页页面的骨架屏代码的生成；

其中，所述第二灰度图像中的各个矩形区域中满足同一位置条件的至少一个矩形区域被归类至同一个行集合中。

6.根据权利要求5所述的方法，所述对所述第二灰度图像中的各个矩形区域进行预定的行归类处理，包括：

基于预定的高度单位从上往下遍历所述第二灰度图像的全部图像区域，以当前遍历的高度值为基准线，判断是否有矩形区域落在基准线上；矩形区域落在基准线上包括：基准线穿过矩形区域或基准线与矩形区域的顶部重合；

若是，则：将落在基准线上的各个矩形区域归类为一个行集合并记录行集合信息，所述行集合信息包括：由所述落在基准线上的各个矩形区域构成的行集合区域的位置信息，以及所述落在基准线上的每个矩形区域的位置信息；判断是否有其他矩形落在所述行集合区域中，若有其他矩形落在所述行集合区域中，则基于落在所述行集合区域中的所述其他矩形，调整所述行集合及所述行集合的行集合信息，并重新基于调整后的行集合判断是否有其他矩形落在行集合区域中，直至不再有新的矩形区域加入当前行集合时完成基于当前基准线的行归类处理，并将基准线下移至当前行集合中处于最底部的矩形区域的底部并下移一个高度单位，之后，基于下移后的基准线继续进行行归类处理，直至第二灰度图像的全部像素区域遍历完毕时结束；若无其他矩形落在所述行集合区域中，则将基准线下移至当前行集合中处于最底部的矩形区域的底部并下移一个高度单位，并基于下移后的基准线继续进行行归类处理，直至第二灰度图像的全部像素区域遍历完毕时结束；

若否，则：将基准线下移一个高度单位，基于下移后的基准线继续进行行归类处理，直至第二灰度图像的全部像素区域遍历完毕时结束。

7.一种生成页面骨架屏的装置，其特征在于，包括：

获取单元，用于获取网页页面所对应的视觉稿图片；

第一生成单元，用于根据所述视觉稿图片中页面元素的像素布局特征生成页面元素的轮廓；

确定单元，用于确定页面元素的轮廓在所述视觉稿图片中对应的位置信息；

第二生成单元，用于基于页面元素的轮廓在所述视觉稿图片中对应的位置信息，生成所述网页页面的预定网页编程语言的骨架屏代码，以使得后续基于所述骨架屏代码绘制所述网页页面的骨架屏；

所述第一生成单元，具体用于：

遍历视觉稿图片的各像素点，若当前像素点为非白色，则将该像素点转换为具有相应灰度值的非白色灰度像素点，得到视觉稿图片的第一灰度图像；

将所述第一灰度图像中符合预定条件的白色像素点转换为非白色灰度像素点，得到第二灰度图像；其中，所述预定条件至少能用于表征所述白色像素点在四邻域中相邻的各像素点中至少一半的像素点为非白色灰度像素点；

所述第二灰度图像中由至少一组连续的多个非白色灰度像素点组成的至少一个灰度图像区域，构成所述视觉稿图片的至少一个页面元素的轮廓。

8.根据权利要求7所述的装置，其特征在于，所述第一生成单元，将所述第一灰度图像中符合预定条件的白色像素点转换为非白色灰度像素点，得到第二灰度图像，具体包括以下的至少一种遍历处理：

从上往下，从左往右遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点右下方第一个像素点是否为非白色，若是，则将该像素点右边相邻的像素点和下方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点右边相邻的像素点及下方相邻的像素点是否均为非白色，若是，则将该像素点右下方的第一个像素点转换为非白色灰度像素点；

从上往下、从右往左遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点左下方第一个像素点是否为非白色，若是，则将该像素点左边相邻的像素点和下方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点左边相邻的像素点及下方相邻的像素点是否均为非白色，若是，则将该像素点左下方的第一个像素点转换为非白色灰度像素点；

从下往上、从左往右遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点右上方第一个像素点是否为非白色，若是，则将该像素点右边相邻的像素点和上方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点右边相邻的像素点及上方相邻的像素点是否均为非白色，若是，则将该像素点右上方的第一个像素点转换为非白色灰度像素点；

从下往上、从右往左遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点左上方第一个像素点是否为非白色，若是，则将该像素点左边相邻的像素点和上方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点左边相邻的像素点及上方相邻的像素点是否均为非白色，若是，则将该像素点左上方的第一个像素点转换为非白色灰度像素点；

其中，在通过以上的至少一种遍历处理后，能够将第一灰度图像中的各个非白色灰度像素点转换为至少一个矩形灰度图像区域，相应得到第二灰度图像；第二灰度图像中每一个由连续的多个非白色灰度像素点组成的最大矩形区域作为一个页面元素的轮廓。

9.根据权利要求8所述的装置，其特征在于，所述第一生成单元，在进行所述至少一种遍历处理后，还用于：

从上往下、从左往右遍历所述第一灰度图像的各像素点，若当前像素点为非白色且该像素点不在所组成的各个矩形区域内，则进行以下处理：

构建一个包含该像素点的1*1的矩形；

判断该矩形右边和下方相邻的像素点是否均为白色，若否，则将该矩形向右下方扩大为2*2；

重复以上的对该矩形的扩展处理，直至该矩形的右边和下方相邻的像素点均为白色时停止对该矩形的扩展处理，并开始对所述当前像素点的下一个像素点进行遍历处理，直至所述第一灰度图像中的全部像素点遍历完成时为止，得到所述第二灰度图像。

10.根据权利要求9所述的装置，其特征在于，所述第二生成单元，具体用于：

基于所述第二灰度图像中各矩形区域的位置信息，生成所述网页页面的超文本标记语言html骨架屏代码；

其中，在所述html骨架屏代码中以预定标签元素标记各个矩形区域，以使得在调用网页页面的骨架屏代码时基于所述预定标签元素布局渲染网页页面的骨架屏。

11.根据权利要求9所述的装置，其特征在于，所述装置还包括：

行归类单元，用于对所述第二灰度图像中的各个矩形区域进行预定的行归类处理，以使得将所述第二灰度图像中的各个矩形区域归类为至少一个行集合，并基于行集合信息进行所述网页页面的骨架屏代码的生成；

其中，所述第二灰度图像中的各个矩形区域中满足同一位置条件的至少一个矩形区域被归类至同一个行集合中。

12.根据权利要求11所述的装置，所述行归类单元对所述第二灰度图像中的各个矩形区域进行预定的行归类处理，具体包括：

基于预定的高度单位从上往下遍历所述第二灰度图像的全部图像区域，以当前遍历的高度值为基准线，判断是否有矩形区域落在基准线上；矩形区域落在基准线上包括：基准线穿过矩形区域或基准线与矩形区域的顶部重合；

若是，则：将落在基准线上的各个矩形区域归类为一个行集合并记录行集合信息，所述行集合信息包括：由所述落在基准线上的各个矩形区域构成的行集合区域的位置信息，以及所述落在基准线上的每个矩形区域的位置信息；判断是否有其他矩形落在所述行集合区域中，若有其他矩形落在所述行集合区域中，则基于落在所述行集合区域中的所述其他矩形，调整所述行集合及所述行集合的行集合信息，并重新基于调整后的行集合判断是否有其他矩形落在行集合区域中，直至不再有新的矩形区域加入当前行集合时完成基于当前基准线的行归类处理，并将基准线下移至当前行集合中处于最底部的矩形区域的底部并下移一个高度单位，之后，基于下移后的基准线继续进行行归类处理，直至第二灰度图像的全部像素区域遍历完毕时结束；若无其他矩形落在所述行集合区域中，则将基准线下移至当前行集合中处于最底部的矩形区域的底部并下移一个高度单位，并基于下移后的基准线继续进行行归类处理，直至第二灰度图像的全部像素区域遍历完毕时结束；

若否，则：将基准线下移一个高度单位，基于下移后的基准线继续进行行归类处理，直至第二灰度图像的全部像素区域遍历完毕时结束。

13.一种计算机设备，其特征在于，包括：

存储器，用于存储程序；

处理器，用于执行所述程序，所述程序在被调用时至少能用于执行如权利要求1-6任一项所述的方法。

14.一种存储介质，其特征在于，该存储介质中存储有计算机程序，所述计算机程序被处理器加载并执行时，实现如权利要求1-6任一项所述的方法。