CN112633270A - 基于图片识别的骨架屏生成方法、装置、设备及存储介质 - Google Patents

Abstract

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

Description

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

技术领域

本发明涉及人工智能技术领域，特别是涉及一种基于图片识别的骨架屏生成方法、装置、设备及存储介质。

背景技术

当今App市场竞争激烈，一款App产品的用户体验对该产品的成败至关重要；其中，优化页面加载体验是比较重要的一个提升用户体验的细节。App页面数据的加载逐渐从Loading和进度条转换成了骨架屏加载方式，从而提升了用户等待体验。

骨架屏，就是在页面真实数据尚未加载前，先给用户展示出页面的大致结构，一般采用浅灰色占位图，能让用户对加载内容有个大致的预期；可以减轻用户对加载过程的关注，将注意力转移到正在加载的内容上，用户会觉得内容正在逐渐加载即将呈现，降低焦灼情绪，使加载过程主观上变得流畅，用户感知等待的时间比较短，直到请求数据返回后再渲染页面，补充进需要显示的数据内容；在网络环境差或加载数据量很大的情况下，效果会更明显。

骨架屏特点是：布局简约、样式单一，使用浅灰色或偏中性填充颜色的块，来描绘页面大致框架；但是看似简单的页面布局，实现过程并不简单；其中涉及的环节较多，例如实现过程中需要设计师、开发人员一起参与才能完成，设计师给出骨架屏设计稿，开发工程师手工书写为骨架屏代码；同时，因页面交互需求的不同，骨架屏会经常发生变化，这样对于骨架屏的维护来说是个很大的问题，需要一部分人力投入。

目前主要的骨架屏生成方案有以下几种：

一、首先由设计师提供骨架屏设计稿，开发人员完成骨架屏相关代码的书写，然后手工放到html文件中。该方案需要设计师参与、开发人员手工书写骨架屏代码，需要手工注入html文件中，流程较长，不够灵活，变更成本较高；同时由于是单独设计，很容易出现骨架屏和页面实际内容不一致的情况。

二、首先由设计师提供骨架屏设计稿，开发人员完成骨架屏组件的书写，通过ssrrender插件解析并自动注入html文件中。该方案虽然实现了将骨架屏代码自动注入到html文件中，但是，仍然存在周期长、灵活性差、以及容易出现骨架屏和页面实际内容不一致的情况。

三、不需要设计稿，通过Puppeteer在服务端操控headless Chrome打开需要生成骨架屏的页面，通过对页面中元素进行删减或增添，对已有元素进行样式层叠，达到在不改变页面布局的情况下，隐藏图片和文字，通过样式覆盖，使其展示为灰色块；然后将修改后的代码提取出来，用作骨架屏。该方案虽然不需要设计师参与，可以自动生成骨架屏，但是，对页面结构有一定要求，如果想要达到预期效果，就需要很多的配置，比如：通过DOM属性进行骨架屏细粒度配置、指定节点配置、自适应的单位要求，使用门槛较高；同时生成的骨架屏代码复杂，体积较大；Puppeteer有大概80M，很容易安装失败，在只能在内网办公环境下使用，存在使用局限性。

综上所述，如何既能够简化骨架屏开发流程，保证自动生成，保证与真实页面结构的一致性，使其具有简洁的骨架屏代码，又能够简化使用方式，对页面结构无侵入性，降低开发和维护成本，是该领域目前所要解决的主要技术问题。

发明内容

本发明的目的在于提供一种基于图片识别的骨架屏生成方法、装置、设备及存储介质，以解决目前骨架屏结构与页面结构不一致，骨架屏生成流程复杂等问题。

上述目的是通过以下技术方案实现的：

根据本发明一个方面，本发明提供的一种基于图片识别的骨架屏生成方法，所述骨架屏生成方法包括：

获取加载有真实数据的页面所对应的截图；

对所述截图进行OCR识别，得到页面元素对应的区域坐标信息；

根据所述区域坐标信息，自动生成骨架屏。

可选地，所述的对所述截图进行OCR识别，得到页面元素对应的区域坐标信息的步骤中，包括：

对所述截图进行预处理；

对预处理后截图进行逻辑区域划分，得到逻辑区域；所述逻辑区域包括标题栏、左分栏、右分栏、上分栏和下分栏；

对所述逻辑区域进行细划分，得到页面元素；

根据像素特征，判断出所述页面元素的形状轮廓，得到所述页面元素对应的区域坐标信息。

可选地，所述的根据所述区域坐标信息，自动生成骨架屏的步骤中，包括：根据每个页面元素的区域坐标信息中的点坐标，计算得到每个页面元素对应的区域块的宽度和高度；根据区域坐标信息、以及区域块的宽度和高度，自动生成骨架屏。

可选地，所述的根据区域坐标信息以及区域块的宽度和高度，自动生成骨架屏的步骤中，包括：根据左上角点坐标，定位区域块的左边和顶部；根据右下角点坐标，定位区域块的右边和底部；根据区域块的宽度和高度，给出区域块样式，并自动生成骨架屏。

可选地，所述的给出区域块样式，并自动生成骨架屏的步骤中，包括：给出区域块样式并转化成骨架屏代码；将所述骨架屏代码自动注入到html文件中；进行页面渲染，得到骨架屏。

可选地，所述骨架屏代码采用外部引用Js文件的方式自动注入到html文件中。

可选地，所述真实数据是呈现给用户的真实的页面数据；所述页面元素包括文本和图片；所述区域坐标信息包括页面元素类型和页面元素的点坐标。

根据本发明另一个方面，本发明提供的一种基于图片识别的骨架屏生成装置，所述骨架屏生成装置包括：

获取单元，用于获取加载有真实数据的页面所对应的截图；

识别单元，用于对所述截图进行OCR识别，得到页面元素对应的区域坐标信息；

生成单元，用于根据所述区域坐标信息，自动生成骨架屏。

根据本发明的再一个方面，本发明提供的一种电子设备，所述电子设备包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行所述的基于图片识别的骨架屏生成方法中的各步骤。

根据本发明的还一个方面，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序，所述计算机程序被处理器执行时实现所述的基于图片识别的骨架屏生成方法中的各步骤。

有益效果：本发明基于图片识别的骨架屏生成方法、装置、设备及存储介质，采用OCR图片识别技术对加载有真实数据的页面的图片进行识别，得到页面元素如图片和文本等的区域坐标信息，然后根据区域坐标信息，自动生成骨架屏，从而保证了页面结构和骨架屏结构的一致性，简化了骨架屏的开发流程，降低了开发和维护成本；大幅度减少了白屏时间，优化了页面加载体验，提升了用户体验。

附图说明

通过参考以下结合附图的说明，并且随着对本发明的更全面理解，本发明的其它目的及结果将更加明白及易于理解。附图中：

图1是本发明实施例基于图片识别的骨架屏生成方法的流程示意图；

图2是本发明实施例中得到区域坐标信息的流程示意图；

图3是本发明一个实施例中自动生成骨架屏的流程示意图；

图4是本发明另一个实施例中自动生成骨架屏的流程示意图；

图5是本发明实施例中加载有真实数据的综合资讯列表页面的示意图；

图6是本发明实施例中基于图片识别的骨架屏生成方法的的逻辑框图；

图7是本发明实施例中所得到的综合资讯的骨架屏的结构示意图；

图8是本发明提供的基于图片识别的骨架屏生成装置的结构框图；

图9是本发明电子设备的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述：

图1示意性地示出了本发明实施例基于图片识别的骨架屏生成方法的流程图。如图1所示，本发明提供的一种基于图片识别的骨架屏生成方法，所述骨架屏生成方法包括以下步骤：

步骤S100，获取加载有真实数据的页面所对应的截图；其中，所述真实数据是最终呈现给用户看到的真实的页面数据。

步骤S200，对所述截图进行OCR识别，得到页面元素对应的区域坐标信息；其中，所述页面元素可以包括图片、文本、视频、按钮等元素；所述区域坐标信息可以包括页面元素类型和页面元素的点坐标等内容。

步骤S300，根据所述区域坐标信息，自动生成骨架屏。

本发明结合骨架屏布局简单、样式单一的特点，采用OCR图片识别技术对加载有真实数据的页面进行识别，得到页面元素例如文本和图片等的区域坐标信息，然后根据对应的区域坐标信息，给出区域块样式自动生成骨架屏，从而保证了骨架屏结构与页面结构的一致性，简化了骨架屏的开发流程，降低了开发和维护成本；提升了骨架屏开发效率。采用本发明基于图片识别的骨架屏生成方法所生成的骨架屏代码结构非常清晰、合理且体积小。采用本发明基于图片识别的骨架屏生成方法大幅度减少了白屏时间，优化了页面加载体验，提升了用户体验。

步骤S100中，获取加载有真实数据的页面所对应的截图的步骤中，所述加载有真实数据的页面是在开发人员完成页面功能开发后，经过页面加载渲染真实数据得到的，其中真实数据是最终呈现给用户看到的真实的页面数据。本发明由真实数据页面来生成骨架屏，即见即所得，可保证页面结构和骨架屏结构的一致性，在页面交互改变时，可以更小成本完成骨架屏的更新。

图5示意性地示出了加载有真实数据的综合资讯列表页面。示例性地，在前端，先由开发人员完成综合资讯列表页面的功能开发，然后加载真实的数据渲染出页面，即可得到如图所示的加载有真实数据的综合资讯列表页面。基于所述页面便可进行接下来的截图、OCR处理等操作。

其中，“列表页面的功能开发”是指完整的页面开发，例如包括页面布局、接口对接等。页面中的所述页面元素可以包括：图片、文本、视频、按钮等，本发明下述实施例仅以文本和图片作为常见页面元素进行示例性说明；以综合资讯列表页面为例，如图所示，其页面上方为标题，每个标题下包含两列页面元素，左侧一列可以为文本元素、右侧一列可以为图片元素，所述文本元素与图片元素可以一一对应。

步骤S200中，对所述截图进行OCR识别，得到页面元素对应的区域坐标信息的步骤中，可以通过OCR平台采用OCR图片识别技术对所述截图进行识别。图6示意性地示出了本发明实施例基于图片识别的骨架屏生成方法的的逻辑框图，如图6所示，包括前端和OCR平台，前端完成页面功能开发，采用真实数据渲染出页面并截图；然后将截图上传至与前端接口连接的OCR平台，OCR平台对截图中的文字和图片进行识别，生成文字和图片区域的坐标信息，并将各区域坐标信息返回给前端；前端根据各区域坐标信息例如左上角、右下角坐标，生成每块区域样式，即自动生成骨架屏，便可进行后续的骨架屏页面的渲染等操作。其中，所述OCR平台可以包括图像预处理模块、版面划分模块、文字识别模块和文字编辑模块等部分。本申请整个流程短，生成过程灵活；将骨架屏所具有的布局简单、样式单一的特点，与图片识别技术的区域识别特点完美吻合，适用于骨架屏大概轮廓的生成；而且，采用OCR图片识别最终得到的骨架屏具有简洁的骨架屏代码，其对页面结构无侵入性，生成的骨架屏代码结构非常清晰、合理且体积小。

本发明采用OCR图片识别技术对加载有真实数据的页面的截图进行识别，可以快速、准确地将页面元素如图片、文本等对应的区域坐标信息从所述的截图中识别出来，简化了整个开发流程，降低开发和维护成本，大大提升了骨架屏的开发效率，可应用推广实施。

图2示意性地示出了本发明一实施例中得到区域坐标信息的流程，如图2所示，对所述截图进行OCR识别得到页面元素对应的区域坐标信息的步骤中，可以包括：

步骤210，对所述截图进行预处理。其中，所述预处理可以包括灰度化处理、降噪处理、倾斜校正、图像剪裁等步骤。灰度化处理是对彩色截图进行灰度处理，得到黑白色图片，例如处理后只显示灰色前景信息和白色背景信息。降噪处理是根据噪声特征进行去燥处理。倾斜校正是对倾斜的截图进行校正处理。图像剪裁是将所述截图剪裁出真正需要的区域，以减少不必要的运行消耗，以提升OCR识别的速度。

步骤220，对预处理后截图进行逻辑区域划分，得到逻辑区域，对所述逻辑区域进行细划分，得到页面元素；其中，所述逻辑区域包括标题栏、左分栏、右分栏、上分栏和下分栏；所述页面元素可以包括：文字、标题、图片、表格、直线等；

步骤230，根据像素特征，判断出所述页面元素的形状轮廓，得到所述页面元素对应的区域坐标信息。其中，所述区域坐标信息可以包括：页面元素类型、页面元素的点坐标数据等。其中，所述页面元素类型主要是表明页面元素是图片还是文本或者其他页面元素。所述页面元素的点坐标数据，例如以矩形框为例，可以为矩形框各顶点的坐标等。需要说明的是，本发明以页面元素对应的区域为矩形框为例进行说明，当然，页面元素对应的区域可以为其他形状，例如圆形等。

优选地，所述区域坐标信息还可以包括页面元素的区域位置信息，例如可以表明该页面元素是否属于顶端处的标题等，如“综合资讯”等。

示例性地，以页面元素轮廓为矩形框为例，得到页面元素对应的区域坐标信息如下：文本信息text为“产品周告”，其矩形框区域的四个顶点的坐标信息：

x：498.525，y：1401.702；

x：492.745，y：1180.304；

x：562.105，y：1178.838；

x：567.885，y：1398.770。

图3示例性地示出了本发明一个实施例中自动生成骨架屏的流程。如图3所示，根据所述区域坐标信息自动生成骨架屏的步骤中，具体可以包括：

步骤S310，根据每个页面元素的区域坐标信息中的点坐标，计算得到每个页面元素对应的区域块的宽度和高度。其中，所述点坐标，例如以矩形框为例，可以为某一条对角线上的两端点的点坐标。当页面元素的区域为圆形时，也可以根据圆心和半径等确定块区域的轮廓。

步骤S320，根据区域坐标信息、以及区域块的宽度和高度，自动生成骨架屏。考虑到页面性能和合理性，可以根据区域坐标信息先计算得到区域宽度和高度，然后再生成骨架屏。

图4示意性地示出了一实施例自动生成骨架屏的流程。如图4所示，以页面元素轮廓为矩形框为例，所述步骤S320可以包括以下步骤：

步骤S321，根据左上角点坐标，定位区域块的左边和顶部；

步骤S322，根据右下角点坐标，定位区域块的右边和底部；

步骤S323，然后根据区域块的宽度和高度，给出区域块样式，并自动生成骨架屏。具体地，按照行内设计H5静态页面的规范要求，使用rem单位，兼容行内的布局方案生成骨架屏。所述“布局方案”是指H5页面做多终端适配的一种方案，也就是在开发人员完成的页面功能开发时完成的页面布局。该实施例是以矩形框为例进行的说明，矩形框属于区域定位，而非具体的某个点的定位，考虑到页面性能和合理性，需根据区域坐标信息计算得到区域宽度和高度，然后根据区域块宽度和高度以及区域坐标信息，最终给出区域块样式，进而自动生成骨架屏。所述的区域块样式可以包括颜色块例如灰色块的位置、大小、背景色等，需要说明的是，本发明中以灰色块为例进行说明，但不限于此，也可以为其他颜色块。

在一可选实施例中，所述的给出灰色区域块样式并自动生成骨架屏的步骤中，可以包括：给出灰色区域块样式并转化成骨架屏代码；将所述骨架屏代码自动注入到html文件中；进行页面渲染，解析代码时，便可得到骨架屏。其中，所述骨架屏代码也就是颜色块代码，即为本发明中所描述的颜色块，例如灰色区域块代码。可选地，所述将骨架屏代码自动注入到html文件中的步骤中，具体可以采用外部引用Js文件的方式将所述骨架屏代码自动注入到html文件中。

图7示意性地示出了本发明实施中的一种综合资讯的骨架屏的结构；也就是，采用如图5所示的加载有真实数据的综合资讯列表页面，截图并采用OCR识别，最终获得的骨架屏，可见，本申请该实施例中采用加载有真实数据的综合资讯列表页面来自动生成与综合资讯列表页面所对应的骨架屏，可以保证骨架屏结构与页面结构的一致性，而且可以简化骨架屏的开发流程。如图7所示，左侧为与图5对应的文本灰色区域块，右侧为与图5对应的图片灰色区域块。本发明该实施例通过前端js代码动态实现了骨架屏的自动生成，从而简化骨架屏开发流程，简化了骨架屏的使用方式，降低开发和维护成本。

本发明上述实施例中，基于图片识别的骨架屏生成方法结合骨架屏布局简单、样式单一的特点，采用OCR图片识别技术对加载有真实数据的页面进行识别，得到文本和图片的区域坐标信息，然后根据文本和图片的区域坐标信息，得到区域块的宽度和高度，进而自动生成骨架屏，从而保证了骨架屏结构与页面结构的一致性，简化了骨架屏的开发流程，降低了开发和维护成本。

本发明上述实施例中，基于图片识别的骨架屏生成方法大幅度减少了白屏时间，优化了页面加载体验，提升了用户体验。骨架屏的“白屏”时间，是指页面真实内容(动态加载的)到达浏览器之前的这段时间，是网络加载的时间。在相同的网络环境下加载页面时，现有技术白屏时间990毫秒左右，而本发明的白屏时间可缩小至30毫秒，骨架屏显示970毫秒，可见，本发明大幅度减少了白屏时间，提升了用户体验；而且在一些网络较差的环境下，本发明白屏时间短的技术效果相比现有技术更加明显。本发明适用于目前大部分的单页应用项目，html文件中只需要包含上述简单的骨架屏代码，内容较少，加载快。

本发明上述实施例中，基于图片识别的骨架屏生成方法均无需设计师参与，无需开发手工写骨架屏代码，缩短了开发流程和周期。本发明上述实施例中，基于图片识别的骨架屏生成方法均不涉及到对页面代码结构的分析，无需配置，使用方式简单、灵活，适用范围广。

图8示意性地示出了本发明实施例的基于图片识别的骨架屏生成装置的结构。如图8所示，本申请提供的一种基于图片识别的骨架屏生成装置，所述骨架屏生成装置包括：获取单元100、识别单元200、以及生成单元300。

其中，所述获取单元100，用于获取加载有真实数据的页面所对应的截图。

所述识别单元200，用于对所述截图进行OCR识别，得到页面元素对应的区域坐标信息。

所述生成单元300，用于根据所述区域坐标信息，自动生成骨架屏。

在一可选实施例中，所述识别单元200，可以包括：预处理模块、划分模块、以及区域坐标信息获取模块。其中，所述预处理模块，用于执行对截图进行预处理的步骤。可选地，所述预处理模块还可以包括灰度化处理、降噪处理、倾斜校正、以及图像剪裁等子模块。所述划分模块，用于执行对预处理后截图进行版面布局划分，得到各页面元素的区域的步骤。所述区域坐标信息获取模块，用于执行根据所述页面元素区域，获取得到页面元素对应的区域坐标信息的步骤。

在一可选实施例中，所述生成单元300，可以包括：区域块计算模块和骨架屏生成模块。其中，所述区域块计算模块，用于执行根据每个页面元素的区域坐标信息中的点坐标，计算得到区域块的宽度和高度的步骤。所述骨架屏生成模块，用于执行根据区域坐标信息、以及区域块的宽度和高度，自动生成骨架屏的步骤。

可选地，所述骨架屏生成模块，可以包括：转化子模块，注入子模块、以及渲染子模块。所述转化子模块用于执行将给出的区域块样式转化成骨架屏代码的步骤。所述注入子模块用于执行将所述骨架屏代码自动注入到html文件中的步骤。所述渲染子模块用于执行页面渲染，得到骨架屏的步骤。

在一可选实施例中，所述生成单元300，还可以包括定位子模块。所述定位子模块可以用于执行根据左上角点坐标，定位区域块的左边和顶部的步骤；及用于执行根据右下角点坐标，定位区域块的右边和底部的步骤。

本申请上述实施例中，基于图片识别的骨架屏生成装置通过结合骨架屏布局简单、样式单一的特点，采用OCR图片识别技术对加载有真实数据的页面进行识别，得到页面元素，然后根据对应的区域坐标信息，自动生成骨架屏，从而保证了骨架屏结构与页面结构的一致性，简化了骨架屏的开发流程，降低了开发和维护成本；且所生成的骨架屏代码结构非常清晰、合理且体积小；从而大幅度减少了白屏时间，优化了页面加载体验，提升了用户体验；而且，无需设计师参与，无需开发手工写骨架屏代码，缩短了开发流程和周期；均不涉及到对页面代码结构的分析，无需配置，使用方式简单、灵活，适用范围广，适用于目前大部分的单页应用项目，html文件中只需要包含上述简单的骨架屏代码，内容较少，加载快。

图9示意性示出了本发明中电子设备的结构。如图9所示，本发明中，所述电子设备1包括：存储器11、处理器10、总线以及存储在存储器11中并可在所述处理器10上运行的计算机程序，如骨架屏生成程序12等。所述处理器10执行所述计算机程序时实现本发明基于图片识别的骨架屏生成方法的步骤。例如，实现获取加载有真实数据的页面所对应的截图；对所述截图进行OCR识别，得到页面元素对应的区域坐标信息；根据所述区域坐标信息，自动生成骨架屏等步骤。

所述存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、移动硬盘、多媒体卡、卡型存储器(例如：SD或DX存储器等)、磁性存储器、磁盘、光盘等。所述存储器在一些实施例中可以是电子设备1的内部存储单元，例如该电子设备1的移动硬盘。所述存储器11在另一些实施例中也可以是电子设备1的外部存储设备，例如电子设备1上配备的插接式移动硬盘、智能存储卡(Smart Media Card，SMC)、安全数字(Secure Digital，SD)卡、闪存卡(Flash Card)等。进一步地，所述存储器11还可以既包括电子设备1的内部存储单元也包括外部存储设备。所述存储器11不仅可以用于存储安装于电子设备1的应用软件及各类数据，例如骨架屏生成程序12的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。

所述处理器10在一些实施例中可以由集成电路组成，例如可以由单个封装的集成电路所组成，也可以是由多个相同功能或不同功能封装的集成电路所组成，包括一个或者多个中央处理器(Central Processing unit，CPU)、微处理器、数字处理芯片、图形处理器及各种控制芯片的组合等。所述处理器10是所述电子设备1的控制核心(Control Unit)，利用各种接口和线路连接整个电子设备1的各个部件，通过运行或执行存储在所述存储器11内的程序或者模块，以及调用存储在所述存储器11内的数据，以执行电子设备1的各种功能和处理数据。

所述总线可以是外设部件互连标准(peripheral component interconnect，简称PCI)总线或扩展工业标准结构(extended industry standard architecture，简称EISA)总线等。该总线可以分为地址总线、数据总线、控制总线等。所述总线被设置为实现所述存储器11以及至少一个处理器10等之间的连接通信。

本领域技术人员可以理解的是，具有上述部件的电子设备1并不构成对所述电子设备1的限定，可以包括更少或者更多的部件，或者组合某些部件，或者不同的部件布置。例如，尽管未示出，所述电子设备1还可以包括给各个部件供电的电源(比如电池)，优选地，电源可以通过电源管理装置与所述至少一个处理器10逻辑相连，从而通过电源管理装置实现充电管理、放电管理、以及功耗管理等功能。电源还可以包括一个或一个以上的直流或交流电源、再充电装置、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。所述电子设备1还可以包括多种传感器、蓝牙模块、Wi-Fi模块等，在此不再赘述。

进一步地，所述电子设备1还可以包括网络接口，可选地，所述网络接口可以包括有线接口和/或无线接口(如WI-FI接口、蓝牙接口等)，通常用于在该电子设备1与其他电子设备之间建立通信连接。

可选地，所述电子设备1还可以包括用户接口，用户接口可以是显示器(Display)、输入单元(比如键盘(Keyboard))，可选地，用户接口还可以是标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在电子设备1中处理的信息以及用于显示可视化的用户界面。

应该了解，所述实施例仅为说明之用，在专利申请范围上并不受此结构的限制。

所述电子设备1中的所述存储器11存储的骨架屏生成程序12是多个指令的组合，在所述处理器10中运行时，可以实现方法中各步骤，例如：实现获取加载有真实数据的页面所对应的截图；对所述截图进行OCR识别，得到页面元素对应的区域坐标信息；根据所述区域坐标信息，自动生成骨架屏等步骤；或者可以实现各单元和/或模块的功能，例如，实现所述获取单元100，用于获取加载有真实数据的页面所对应的截图的功能；所述识别单元200，用于对所述截图进行OCR识别，得到页面元素对应的区域坐标信息的功能。所述生成单元300，用于根据所述区域坐标信息，自动生成骨架屏的功能。

本发明中，所述电子设备1集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。其中，所述计算机可读存储介质可以是任何包含或存储程序或指令的有形介质，其上存储有可以被执行的计算机程序，该计算机程序被处理器10执行时，通过存储的程序指令相关的硬件实现本发明基于图片识别的骨架屏生成方法中各步骤或***中各单元/模块的功能。例如，实现获取加载有真实数据的页面所对应的截图；对所述截图进行OCR识别，得到页面元素对应的区域坐标信息；根据所述区域坐标信息，自动生成骨架屏等步骤。所述计算机可读介质，例如可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)。

在本发明所提供的几个实施例中，应该理解到，所揭露的设备和装置，可以通过其它的方式实现。以上所描述的***实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能模块的形式实现。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。

因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附关联图标记视为限制所涉及的权利要求。

此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。装置权利要求中陈述的多个单元或模块也可以由一个单元或模块通过软件或者硬件来实现。第二等词语用来表示名称，而并不表示任何特定的顺序。

最后应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。

Claims (10)

1.一种基于图片识别的骨架屏生成方法，其特征在于，所述方法包括：

获取加载有真实数据的页面所对应的截图；

对所述截图进行OCR识别，得到页面元素对应的区域坐标信息；

根据所述区域坐标信息，自动生成骨架屏。

2.根据权利要求1所述的基于图片识别的骨架屏生成方法，其特征在于，所述的对所述截图进行OCR识别，得到页面元素对应的区域坐标信息的步骤中，包括：

对所述截图进行预处理；

对预处理后截图进行逻辑区域划分，得到逻辑区域；其中，所述逻辑区域包括标题栏、左分栏、右分栏、上分栏和下分栏；

对所述逻辑区域进行细划分，得到页面元素；

根据像素特征，判断出所述页面元素的形状轮廓，得到所述页面元素对应的区域坐标信息。

3.根据权利要求1所述的基于图片识别的骨架屏生成方法，其特征在于，所述的根据所述区域坐标信息，自动生成骨架屏的步骤中，包括：

根据每个页面元素的区域坐标信息中的点坐标，计算得到每个页面元素对应的区域块的宽度和高度；

根据区域坐标信息、以及区域块的宽度和高度，自动生成骨架屏。

4.根据权利要求3所述的基于图片识别的骨架屏生成方法，其特征在于，所述的根据区域坐标信息以及区域块的宽度和高度，自动生成骨架屏的步骤中，包括：

根据左上角点坐标，定位区域块的左边和顶部；

根据右下角点坐标，定位区域块的右边和底部；

根据所述区域块的宽度和高度，给出区域块样式，并自动生成骨架屏。

5.根据权利要求4所述的基于图片识别的骨架屏生成方法，其特征在于，所述的给出区域块样式，并自动生成骨架屏的步骤中，包括：

给出区域块样式并转化成骨架屏代码；

将所述骨架屏代码自动注入到html文件中；

进行页面渲染，得到骨架屏。

6.根据权利要求5所述的基于图片识别的骨架屏生成方法，其特征在于，所述骨架屏代码采用外部引用Js文件的方式自动注入到html文件中。

7.根据权利要求1所述的基于图片识别的骨架屏生成方法，其特征在于，所述真实数据是呈现给用户的真实的页面数据；所述页面元素包括文本和图片；所述区域坐标信息包括页面元素类型和页面元素的点坐标。

8.一种基于图片识别的骨架屏生成装置，其特征在于，包括：

获取单元，用于获取加载有真实数据的页面所对应的截图；

识别单元，用于对所述截图进行OCR识别，得到页面元素对应的区域坐标信息；

生成单元，用于根据所述区域坐标信息，自动生成骨架屏。

9.一种电子设备，其特征在于，所述电子设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如权利要求1至7中任一项所述的基于图片识别的骨架屏生成方法中的各步骤。

10.一种计算机可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现1至7中任一项所述的基于图片识别的骨架屏生成方法中的各步骤。

Images