[發明專利]骨架屏頁面的生成方法、裝置、電子設備、介質及產品

在審

• 申請號: 202110650882.6
• 申請日: 2021-06-10
• 公開（公告）號: CN113553523A
• 公開（公告）日: 2021-10-26
• 發明（設計）人: 張宇杰
• 申請（專利權）人: 北京達佳互聯信息技術有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F9/451;G06T7/136;G06T5/00;G06T5/30;G06F8/38
• 代理公司: 北京潤澤恒知識產權代理有限公司 11319
• 代理人: 李娜

本公開關于一種骨架屏頁面的生成方法、裝置、電子設備及存儲介質，所述方法包括：獲取目標頁面的頁面圖片；對所述頁面圖片進行圖像處理，確定所述頁面圖片中的頁面元素；對所述頁面圖片中的頁面元素進行輪廓提取，得到所述頁面元素的輪廓信息；根據所述頁面元素的輪廓信息，生成所述目標頁面的骨架屏頁面。本公開中，先確定目標頁面中的的頁面元素，再提取所述頁面元素的輪廓信息，對該輪廓信息進行復制還原時，不再依據原有目標頁面的結構，而是依據獲取目標頁面的頁面圖片進行復制還原時，不再依據原有目標頁面的結構，而是依據目標頁面的頁面截圖圖片，完全節省骨架屏頁面的制作成本，具有較好的通用性。

技術領域

本公開涉及計算機技術領域，尤其涉及一種骨架屏頁面的生成方法、裝置、電子設備、計算機可讀存儲介質及計算機程序產品。

背景技術

相關技術中，在終端的網頁應用或應用程序的網頁應用中，頁面前端通常會以異步請求的方式獲取網頁數據，由于請求的響應有一定的耗時，為了避免呈現給用戶空白的網頁加載效果，頁面前端在網頁加載完成之前將骨架屏顯示給用戶，以提前告訴用戶網頁的大致輪廓和頁面焦點位置，可以有效的緩解用戶在盲等時產生的煩躁心理。

但是，骨架屏需要和頁面結構保持一致，才能起到以上作用。所以，在網頁開發時，由于每一個頁面都需要有屬于自己的骨架屏，還需要開發一個與網頁對應的骨架屏，這就導致各個頁面的骨架屏無法通用化，給網頁的開發造成了額外的成本。

因此，如何根據各個目標網頁自動生成對應的骨架屏頁面，降低網頁開發的成本，是目前有待解決的技術問題。

發明內容

本公開提供一種骨架屏頁面的生成方法、裝置、電子設備、計算機可讀存儲介質及計算機程序產品，以至少解決相關技術中在不同的網頁開發時，需要分別開發一個與網頁對應的骨架屏頁面，導致開發成本增加的技術問題。本公開的技術方案如下：

根據本公開實施例的第一方面，提供一種骨架屏頁面的生成方法，包括：

獲取目標頁面的頁面圖片；

對所述頁面圖片進行圖像處理，確定所述頁面圖片中的頁面元素；

對所述頁面圖片中的頁面元素進行輪廓提取，得到所述頁面元素的輪廓信息；

根據所述頁面元素的輪廓信息，生成所述目標頁面的骨架屏頁面。

可選的，所述對所述頁面圖片進行圖像處理，確定所述頁面圖片中的頁面元素，包括：

對所述頁面圖片中的所有像素點進行灰度化處理，得到灰度化的頁面圖片；

對所述灰度化的頁面圖片中每個像素點進行閾值化處理，確定構成所述頁面圖片中像素點的頁面元素；

對構成所述頁面圖片中像素點的所述頁面元素進行降噪處理，得到生成所述頁面圖片的骨架屏頁面所需的頁面元素。

可選的，所述對所述灰度化的頁面圖片中的每個像素點進行閾值化處理，確定構成所述頁面圖片中像素點的頁面元素，包括：

當所述灰度化的頁面圖片中每個像素點的色值大于預設色值閾值時，將所述灰度化的頁面圖片中對應像素點的色值重置為白色；

當所述灰度化的頁面圖片中每個像素點的色值不大于預設色值閾值時，將所述灰度化的頁面圖片中對應像素點的色值重置為黑色；

提亮所述灰度化的頁面圖片中重置為黑色的像素點的頁面元素，得到所述頁面圖片中的頁面元素。

可選的，所述對構成所述頁面圖片中像素點的所述頁面元素進行降噪處理，得到生成所述頁面圖片的骨架屏頁面所需的頁面元素，包括：

遍歷所述頁面圖片中的所有像素點；