基于图片识别的骨架屏生成方法、装置、设备及存储介质制造方法及图纸

本发明专利技术涉及人工智能技术领域，提供一种基于图片识别的骨架屏生成方法、装置、设备及存储介质。其中，方法包括：获取加载有真实数据的页面所对应的截图；对截图进行OCR识别，得到页面元素对应的区域坐标信息；根据区域坐标信息，自动生成骨架屏。本申请结合骨架屏布局简单、样式单一的特点，采用图片识别技术对加载有真实数据的页面进行识别，得到页面元素对应的区域坐标信息，然后自动生成骨架屏，保证了骨架屏结构与页面结构的一致性，简化了骨架屏开发流程，降低了开发和维护成本；无需手工写骨架屏代码，无需对代码结构分析、配置；且骨架屏代码结构清晰、合理、体积小；大幅度减少了白屏时间，优化了页面加载体验，提升了用户体验。

【技术实现步骤摘要】
基于图片识别的骨架屏生成方法、装置、设备及存储介质
本专利技术涉及人工智能
，特别是涉及一种基于图片识别的骨架屏生成方法、装置、设备及存储介质。
技术介绍
当今App市场竞争激烈，一款App产品的用户体验对该产品的成败至关重要；其中，优化页面加载体验是比较重要的一个提升用户体验的细节。App页面数据的加载逐渐从Loading和进度条转换成了骨架屏加载方式，从而提升了用户等待体验。骨架屏，就是在页面真实数据尚未加载前，先给用户展示出页面的大致结构，一般采用浅灰色占位图，能让用户对加载内容有个大致的预期；可以减轻用户对加载过程的关注，将注意力转移到正在加载的内容上，用户会觉得内容正在逐渐加载即将呈现，降低焦灼情绪，使加载过程主观上变得流畅，用户感知等待的时间比较短，直到请求数据返回后再渲染页面，补充进需要显示的数据内容；在网络环境差或加载数据量很大的情况下，效果会更明显。骨架屏特点是：布局简约、样式单一，使用浅灰色或偏中性填充颜色的块，来描绘页面大致框架；但是看似简单的页面布局，实现过程并不简单；其中涉及的环节较多，例如实现过本文档来自技高网...

【技术保护点】
1.一种基于图片识别的骨架屏生成方法，其特征在于，所述方法包括：/n获取加载有真实数据的页面所对应的截图；/n对所述截图进行OCR识别，得到页面元素对应的区域坐标信息；/n根据所述区域坐标信息，自动生成骨架屏。/n

【技术特征摘要】
1.一种基于图片识别的骨架屏生成方法，其特征在于，所述方法包括：
获取加载有真实数据的页面所对应的截图；
对所述截图进行OCR识别，得到页面元素对应的区域坐标信息；
根据所述区域坐标信息，自动生成骨架屏。


2.根据权利要求1所述的基于图片识别的骨架屏生成方法，其特征在于，所述的对所述截图进行OCR识别，得到页面元素对应的区域坐标信息的步骤中，包括：
对所述截图进行预处理；
对预处理后截图进行逻辑区域划分，得到逻辑区域；其中，所述逻辑区域包括标题栏、左分栏、右分栏、上分栏和下分栏；
对所述逻辑区域进行细划分，得到页面元素；
根据像素特征，判断出所述页面元素的形状轮廓，得到所述页面元素对应的区域坐标信息。


3.根据权利要求1所述的基于图片识别的骨架屏生成方法，其特征在于，所述的根据所述区域坐标信息，自动生成骨架屏的步骤中，包括：
根据每个页面元素的区域坐标信息中的点坐标，计算得到每个页面元素对应的区域块的宽度和高度；
根据区域坐标信息、以及区域块的宽度和高度，自动生成骨架屏。


4.根据权利要求3所述的基于图片识别的骨架屏生成方法，其特征在于，所述的根据区域坐标信息以及区域块的宽度和高度，自动生成骨架屏的步骤中，包括：
根据左上角点坐标，定位区域块的左边和顶部；
根据右下角点坐标，定位区域块的右边和底部；
根据所述区域块的宽度和高度，给出区域块样式，并自动生成骨架屏。


5.根据权利要求4所述的基于图片识别...

【专利技术属性】
技术研发人员：李世华，杜亮，
申请(专利权)人：平安银行股份有限公司，
类型：发明
国别省市：广东;44