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

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

A method, device and computer equipment for generating page skeleton screen

【技术实现步骤摘要】
一种生成页面骨架屏的方法、装置及计算机设备
本申请属于互联网页面处理
，尤其涉及一种生成页面骨架屏的方法、装置及计算机设备。
技术介绍
在移动端网页应用、PC端网页应用或者APP小程序(如微信小程序、支付宝小程序等)中，页面前端通常会以异步请求的方式获取网页数据，由于请求的响应有一定耗时，为了避免呈现给用户空白一片的网页加载效果，通常会在请求响应的耗时、等待期间，于页面前端展示页面最终效果的骨架屏，以使得尽可能保证用户体验。目前，骨架屏一般都是由开发者(如网站开发人员、APP小程序开发人员等)自己编写的，开发者通常根据正式页面中实际内容的页面布局和外观特征编写页面的骨架屏代码，以实现骨架屏的制作，这会耗费大量的人力、物力和时间，同时存在着骨架屏制作效率低的问题；另外，在进行骨架屏的展示时，相对应会通过分析开发者基于前端模版引擎(如vue、react等)开发的骨架屏代码逻辑来绘制出对应页面的骨架屏，这就使得会依赖于对应项目开发中所使用的编程语言及框架，由于受限于前端开发时所使用的编程语言及框架，从而相应会导致该方式的骨架屏不具备通用性。
技术实现思路
有鉴于此，本申请的目的在于提供一本文档来自技高网...

【技术保护点】
1.一种生成页面骨架屏的方法，其特征在于，包括：获取网页页面所对应的视觉稿图片；根据所述视觉稿图片中页面元素的像素布局特征生成页面元素的轮廓；确定页面元素的轮廓在所述视觉稿图片中对应的位置信息；基于页面元素的轮廓在所述视觉稿图片中对应的位置信息，生成所述网页页面的预定网页编程语言的骨架屏代码，以使得后续基于所述骨架屏代码绘制所述网页页面的骨架屏。

【技术特征摘要】
1.一种生成页面骨架屏的方法，其特征在于，包括：获取网页页面所对应的视觉稿图片；根据所述视觉稿图片中页面元素的像素布局特征生成页面元素的轮廓；确定页面元素的轮廓在所述视觉稿图片中对应的位置信息；基于页面元素的轮廓在所述视觉稿图片中对应的位置信息，生成所述网页页面的预定网页编程语言的骨架屏代码，以使得后续基于所述骨架屏代码绘制所述网页页面的骨架屏。2.根据权利要求1所述的方法，其特征在于，所述根据所述视觉稿图片中页面元素的像素布局特征生成页面元素的轮廓，包括：遍历视觉稿图片的各像素点，若当前像素点为非白色，则将该像素点转换为具有相应灰度值的非白色灰度像素点，得到视觉稿图片的第一灰度图像；将所述第一灰度图像中符合预定条件的白色像素点转换为非白色灰度像素点，得到第二灰度图像；其中，所述预定条件至少能用于表征所述白色像素点在四邻域中相邻的各像素点中至少一半的像素点为非白色灰度像素点；所述第二灰度图像中由至少一组连续的多个非白色灰度像素点组成的至少一个灰度图像区域，构成所述视觉稿图片的至少一个页面元素的轮廓。3.根据权利要求2所述的方法，其特征在于，所述将所述第一灰度图像中符合预定条件的白色像素点转换为非白色灰度像素点，得到第二灰度图像，包括以下的至少一种遍历处理：从上往下，从左往右遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点右下方第一个像素点是否为非白色，若是，则将该像素点右边相邻的像素点和下方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点右边相邻的像素点及下方相邻的像素点是否均为非白色，若是，则将该像素点右下方的第一个像素点转换为非白色灰度像素点；从上往下、从右往左遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点左下方第一个像素点是否为非白色，若是，则将该像素点左边相邻的像素点和下方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点左边相邻的像素点及下方相邻的像素点是否均为非白色，若是，则将该像素点左下方的第一个像素点转换为非白色灰度像素点；从下往上、从左往右遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点右上方第一个像素点是否为非白色，若是，则将该像素点右边相邻的像素点和上方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点右边相邻的像素点及上方相邻的像素点是否均为非白色，若是，则将该像素点右上方的第一个像素点转换为非白色灰度像素点；从下往上、从右往左遍历所述第一灰度图像的各像素点，若当前像素点为非白色，则判断该像素点左上方第一个像素点是否为非白色，若是，则将该像素点左边相邻的像素点和上方相邻的像素点转换为非白色灰度像素点；若否，则判断该像素点左边相邻的像素点及上方相邻的像素点是否均为非白色，若是，则将该像素点左上方的第一个像素点转换为非白色灰度像素点；其中，在通过以上的至少一种遍历处理后，能够将第一灰度图像中的各个非白色灰度像素点转换为至少一个矩形灰度图像区域，相应得到第二灰度图像；第二灰度图像中每一个由连续的多个非白色灰度像素点组成的最大矩形区域作为一个页面元素的轮廓。4.根据权利要求3所述的方法，其特征在于，在进行所述至少一种遍历处理后，所述方法还包括：从上往下、从左往右遍历所述第一灰度图像的各像素点，若当前像素点为非白色且该像素点不在所组成的各个矩形区域内，则进行以下处理：构建一个包含该像素点的1*1的矩形；判断该矩形右边和下方相邻的像素点是否均为白色，若否，则将该矩形向右下方扩大为2*2；重复以上的对该矩形的扩展处理，直至该矩形的右边和下方相邻的像素点均为白色时停止对该矩形的扩展处理，并开始对所述当前像素点的下一个像素点进行遍历处理，直至所述第一灰度图像中的全部像素点遍历完成时为止，得...

【专利技术属性】
技术研发人员：康铭海，
申请(专利权)人：腾讯科技深圳有限公司，
类型：发明
国别省市：广东,44