本公開的實(shí)施例涉及計(jì)算機(jī)，具體涉及圖片背景色自適應(yīng)方法和裝置。

背景技術(shù)：

1、在活動頁面開發(fā)迭代中，頁面上通常會有一張主活動圖片，由設(shè)計(jì)師設(shè)計(jì)好后上傳到后臺，前端獲取圖片展示。頁面上除了圖片區(qū)域，通常會由設(shè)計(jì)師提供跟主活動圖適配的背景顏色，前端開發(fā)寫到代碼中，以達(dá)到主活動圖片與背景色統(tǒng)一的效果。這樣會帶來一個問題，當(dāng)圖片風(fēng)格變化時，比如由a主色調(diào)變化成b主色調(diào)，背景色不能自動根據(jù)圖片顏色變化?，F(xiàn)有技術(shù)通常是將圖片和背景色都做到后臺配置中，當(dāng)重新調(diào)整圖片時，需要同時將背景色配置更新。

技術(shù)實(shí)現(xiàn)思路

1、本公開的實(shí)施例提出了圖片背景色自適應(yīng)方法和裝置。

2、第一方面，本公開的實(shí)施例提供了一種圖片背景色自適應(yīng)方法，包括：將頁面中的圖片加載到畫布中；通過所述畫布的渲染上下文對象接口獲取所述圖片的像素數(shù)據(jù)；根據(jù)所述像素數(shù)據(jù)確定所述圖片的主色調(diào)；根據(jù)所述主色調(diào)調(diào)整所述頁面的背景色。

3、在一些實(shí)施例中，所述將頁面中的圖片加載到canvas畫布中，包括：創(chuàng)建canvas畫布；創(chuàng)建canvas畫布的上下文；獲取所述圖片的寬度和高度；根據(jù)所述寬度和所述高度將所述圖片繪制到所述canvas畫布中。

4、在一些實(shí)施例中，所述根據(jù)所述像素數(shù)據(jù)確定所述圖片的主色調(diào)，包括：根據(jù)所述圖片的像素數(shù)據(jù)進(jìn)行顏色聚類，得到至少一個顏色簇；從所述至少一個顏色簇中選擇數(shù)量最多的顏色作為主色調(diào)。

5、在一些實(shí)施例中，所述根據(jù)所述圖片的像素數(shù)據(jù)進(jìn)行顏色聚類，得到至少一個顏色簇，包括：將所述圖片的像素數(shù)據(jù)分成多個顏色盒子；通過中位切割法，將所述多個顏色盒子切割成更小的盒子；重復(fù)切割過程，直到達(dá)到預(yù)定的盒子數(shù)量；從每個盒子中選擇數(shù)量最多的顏色，得到至少一個顏色簇。

6、在一些實(shí)施例中，所述根據(jù)所述圖片的像素數(shù)據(jù)進(jìn)行顏色聚類，得到至少一個顏色簇，包括：將所述圖片劃分成多個子圖；根據(jù)每個子圖中像素數(shù)據(jù)的顏色分布統(tǒng)計(jì)成一個直方圖；將每個直方圖中出現(xiàn)頻率最高的顏色作為一個顏色簇。

7、在一些實(shí)施例中，所述獲取所述圖片的像素數(shù)據(jù)，包括：獲取所述圖片中每個像素的紅色通道數(shù)據(jù)、綠色通道數(shù)據(jù)、藍(lán)色通道數(shù)據(jù)和透明度通道數(shù)據(jù)；從所述圖片中查找出透明度通道數(shù)據(jù)大于第一預(yù)定值，且紅色通道數(shù)據(jù)、綠色通道數(shù)據(jù)和藍(lán)色通道數(shù)據(jù)均不大于第二預(yù)定值的目標(biāo)像素，作為所述圖片的像素數(shù)據(jù)。

8、第二方面，本公開的實(shí)施例提供了一種圖片背景色自適應(yīng)裝置，包括：加載單元，被配置成將頁面中的圖片加載到畫布中；獲取單元，被配置成通過所述畫布的渲染上下文對象接口獲取所述圖片的像素數(shù)據(jù)；確定單元，被配置成根據(jù)所述像素數(shù)據(jù)確定所述圖片的主色調(diào)；調(diào)整單元，被配置成根據(jù)所述主色調(diào)調(diào)整所述頁面的背景色。

9、在一些實(shí)施例中，所述加載單元進(jìn)一步被配置成：創(chuàng)建canvas畫布；創(chuàng)建canvas畫布的上下文；獲取所述圖片的寬度和高度；根據(jù)所述寬度和所述高度將所述圖片繪制到所述canvas畫布中。

10、在一些實(shí)施例中，所述確定單元進(jìn)一步被配置成：根據(jù)所述圖片的像素數(shù)據(jù)進(jìn)行顏色聚類，得到至少一個顏色簇；從所述至少一個顏色簇中選擇數(shù)量最多的顏色作為主色調(diào)。

11、在一些實(shí)施例中，所述確定單元進(jìn)一步被配置成：將所述圖片的像素數(shù)據(jù)分成多個顏色盒子；通過中位切割法，將所述多個顏色盒子切割成更小的盒子；重復(fù)切割過程，直到達(dá)到預(yù)定的盒子數(shù)量；從每個盒子中選擇數(shù)量最多的顏色，得到至少一個顏色簇。

12、在一些實(shí)施例中，所述確定單元進(jìn)一步被配置成：將所述圖片劃分成多個子圖；根據(jù)每個子圖中像素數(shù)據(jù)的顏色分布統(tǒng)計(jì)成一個直方圖；將每個直方圖中出現(xiàn)頻率最高的顏色作為一個顏色簇。

13、在一些實(shí)施例中，所述獲取單元進(jìn)一步被配置成：獲取所述圖片中每個像素的紅色通道數(shù)據(jù)、綠色通道數(shù)據(jù)、藍(lán)色通道數(shù)據(jù)和透明度通道數(shù)據(jù)；從所述圖片中查找出透明度通道數(shù)據(jù)大于第一預(yù)定值，且紅色通道數(shù)據(jù)、綠色通道數(shù)據(jù)和藍(lán)色通道數(shù)據(jù)均不大于第二預(yù)定值的目標(biāo)像素，作為所述圖片的像素數(shù)據(jù)。

14、第三方面，本公開的實(shí)施例提供了一種電子設(shè)備，包括：一個或多個處理器；存儲裝置，其上存儲有一個或多個計(jì)算機(jī)程序，當(dāng)所述一個或多個計(jì)算機(jī)程序被所述一個或多個處理器執(zhí)行，使得所述一個或多個處理器實(shí)現(xiàn)如第一方面或第二方面中任一項(xiàng)所述的方法。

15、第四方面，本公開的實(shí)施例提供了一種計(jì)算機(jī)可讀介質(zhì)，其上存儲有計(jì)算機(jī)程序，其中，所述計(jì)算機(jī)程序被處理器執(zhí)行時實(shí)現(xiàn)如第一方面或第二方面中任一項(xiàng)所述的方法。

16、第五方面，本公開的實(shí)施例提供了一種計(jì)算機(jī)程序產(chǎn)品，包括計(jì)算機(jī)程序，所述計(jì)算機(jī)程序在被處理器執(zhí)行時實(shí)現(xiàn)如第一方面或第二方面中任一項(xiàng)所述的方法。

17、本公開的實(shí)施例提供的圖片背景色自適應(yīng)方法和裝置，通過畫布自身的接口獲取圖片的像素數(shù)據(jù)，再結(jié)合顏色聚類算法，提取圖片的主色調(diào)，并應(yīng)用到頁面背景色中，實(shí)現(xiàn)頁面背景色自適應(yīng)圖片主色調(diào)效果，使得畫面更和諧，提升用戶感觀舒適度的同時減少了人工配置的成本，提高了靈活度和適配性。畫布可采用canvas畫布，能夠充分利用canvas畫布的特點(diǎn)，在瀏覽器中直接操作像素，可以在各種瀏覽器上運(yùn)行，并支持多種圖像格式，適合用于創(chuàng)建交互式和動態(tài)的web應(yīng)用。

18、應(yīng)當(dāng)理解，本部分所描述的內(nèi)容并非旨在標(biāo)識本公開的實(shí)施例的關(guān)鍵或重要特征，也不用于限制本公開的范圍。本公開的其它特征將通過以下的說明書而變得容易理解。

技術(shù)特征：

1.一種圖片背景色自適應(yīng)方法，包括：

2.根據(jù)權(quán)利要求1所述的方法，其中，所述將頁面中的圖片加載到畫布中，包括：

3.根據(jù)權(quán)利要求1所述的方法，其中，所述根據(jù)所述像素數(shù)據(jù)確定所述圖片的主色調(diào)，包括：

4.根據(jù)權(quán)利要求3所述的方法，其中，所述根據(jù)所述圖片的像素數(shù)據(jù)進(jìn)行顏色聚類，得到至少一個顏色簇，包括：

5.根據(jù)權(quán)利要求3所述的方法，其中，所述根據(jù)所述圖片的像素數(shù)據(jù)進(jìn)行顏色聚類，得到至少一個顏色簇，包括：

6.根據(jù)權(quán)利要求1所述的方法，其中，所述獲取所述圖片的像素數(shù)據(jù)，包括：

7.一種圖片背景色自適應(yīng)裝置，包括：

8.一種電子設(shè)備，包括：

9.一種計(jì)算機(jī)可讀介質(zhì)，其上存儲有計(jì)算機(jī)程序，其中，所述計(jì)算機(jī)程序被處理器執(zhí)行時實(shí)現(xiàn)如權(quán)利要求1-6中任一項(xiàng)所述的方法。

10.一種計(jì)算機(jī)程序產(chǎn)品，包括計(jì)算機(jī)程序，所述計(jì)算機(jī)程序在被處理器執(zhí)行時實(shí)現(xiàn)根據(jù)權(quán)利要求1-6中任一項(xiàng)所述的方法。

技術(shù)總結(jié)
本公開的實(shí)施例公開了圖片背景色自適應(yīng)方法和裝置。該方法的具體實(shí)施方式包括：將頁面中的圖片加載到畫布中；通過所述畫布的渲染上下文對象接口獲取所述圖片的像素數(shù)據(jù)；根據(jù)所述像素數(shù)據(jù)確定所述圖片的主色調(diào)；根據(jù)所述主色調(diào)調(diào)整所述頁面的背景色。該實(shí)施方式通過畫布并結(jié)合顏色聚類算法，提取圖片的主色調(diào)，并應(yīng)用到背景色中，實(shí)現(xiàn)頁面背景色自適應(yīng)圖片主色調(diào)效果，減少了人工配置的成本，提高了靈活度和適配性。

技術(shù)研發(fā)人員：楊軍
受保護(hù)的技術(shù)使用者：網(wǎng)銀在線（北京）科技有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2025/1/6