【技術實現步驟摘要】
本公開的實施例涉及計算機，具體涉及圖片背景色自適應方法和裝置。
技術介紹
1、在活動頁面開發迭代中，頁面上通常會有一張主活動圖片，由設計師設計好后上傳到后臺，前端獲取圖片展示。頁面上除了圖片區域，通常會由設計師提供跟主活動圖適配的背景顏色，前端開發寫到代碼中，以達到主活動圖片與背景色統一的效果。這樣會帶來一個問題，當圖片風格變化時，比如由a主色調變化成b主色調，背景色不能自動根據圖片顏色變化。現有技術通常是將圖片和背景色都做到后臺配置中，當重新調整圖片時，需要同時將背景色配置更新。
技術實現思路
1、本公開的實施例提出了圖片背景色自適應方法和裝置。
2、第一方面，本公開的實施例提供了一種圖片背景色自適應方法，包括：將頁面中的圖片加載到畫布中；通過所述畫布的渲染上下文對象接口獲取所述圖片的像素數據；根據所述像素數據確定所述圖片的主色調；根據所述主色調調整所述頁面的背景色。
3、在一些實施例中，所述將頁面中的圖片加載到canvas畫布中，包括：創建canvas畫布；創建canvas畫布的上下文；獲取所述圖片的寬度和高度；根據所述寬度和所述高度將所述圖片繪制到所述canvas畫布中。
4、在一些實施例中，所述根據所述像素數據確定所述圖片的主色調，包括：根據所述圖片的像素數據進行顏色聚類，得到至少一個顏色簇；從所述至少一個顏色簇中選擇數量最多的顏色作為主色調。
5、在一些實施例中，所述根據所述圖片的像素數據進行顏色聚類，得到至少一個顏色簇，包
6、在一些實施例中，所述根據所述圖片的像素數據進行顏色聚類，得到至少一個顏色簇，包括：將所述圖片劃分成多個子圖；根據每個子圖中像素數據的顏色分布統計成一個直方圖；將每個直方圖中出現頻率最高的顏色作為一個顏色簇。
7、在一些實施例中，所述獲取所述圖片的像素數據，包括：獲取所述圖片中每個像素的紅色通道數據、綠色通道數據、藍色通道數據和透明度通道數據；從所述圖片中查找出透明度通道數據大于第一預定值，且紅色通道數據、綠色通道數據和藍色通道數據均不大于第二預定值的目標像素，作為所述圖片的像素數據。
8、第二方面，本公開的實施例提供了一種圖片背景色自適應裝置，包括：加載單元，被配置成將頁面中的圖片加載到畫布中；獲取單元，被配置成通過所述畫布的渲染上下文對象接口獲取所述圖片的像素數據；確定單元，被配置成根據所述像素數據確定所述圖片的主色調；調整單元，被配置成根據所述主色調調整所述頁面的背景色。
9、在一些實施例中，所述加載單元進一步被配置成：創建canvas畫布；創建canvas畫布的上下文；獲取所述圖片的寬度和高度；根據所述寬度和所述高度將所述圖片繪制到所述canvas畫布中。
10、在一些實施例中，所述確定單元進一步被配置成：根據所述圖片的像素數據進行顏色聚類，得到至少一個顏色簇；從所述至少一個顏色簇中選擇數量最多的顏色作為主色調。
11、在一些實施例中，所述確定單元進一步被配置成：將所述圖片的像素數據分成多個顏色盒子；通過中位切割法，將所述多個顏色盒子切割成更小的盒子；重復切割過程，直到達到預定的盒子數量；從每個盒子中選擇數量最多的顏色，得到至少一個顏色簇。
12、在一些實施例中，所述確定單元進一步被配置成：將所述圖片劃分成多個子圖；根據每個子圖中像素數據的顏色分布統計成一個直方圖；將每個直方圖中出現頻率最高的顏色作為一個顏色簇。
13、在一些實施例中，所述獲取單元進一步被配置成：獲取所述圖片中每個像素的紅色通道數據、綠色通道數據、藍色通道數據和透明度通道數據；從所述圖片中查找出透明度通道數據大于第一預定值，且紅色通道數據、綠色通道數據和藍色通道數據均不大于第二預定值的目標像素，作為所述圖片的像素數據。
14、第三方面，本公開的實施例提供了一種電子設備，包括：一個或多個處理器；存儲裝置，其上存儲有一個或多個計算機程序，當所述一個或多個計算機程序被所述一個或多個處理器執行，使得所述一個或多個處理器實現如第一方面或第二方面中任一項所述的方法。
15、第四方面，本公開的實施例提供了一種計算機可讀介質，其上存儲有計算機程序，其中，所述計算機程序被處理器執行時實現如第一方面或第二方面中任一項所述的方法。
16、第五方面，本公開的實施例提供了一種計算機程序產品，包括計算機程序，所述計算機程序在被處理器執行時實現如第一方面或第二方面中任一項所述的方法。
17、本公開的實施例提供的圖片背景色自適應方法和裝置，通過畫布自身的接口獲取圖片的像素數據，再結合顏色聚類算法，提取圖片的主色調，并應用到頁面背景色中，實現頁面背景色自適應圖片主色調效果，使得畫面更和諧，提升用戶感觀舒適度的同時減少了人工配置的成本，提高了靈活度和適配性。畫布可采用canvas畫布，能夠充分利用canvas畫布的特點，在瀏覽器中直接操作像素，可以在各種瀏覽器上運行，并支持多種圖像格式，適合用于創建交互式和動態的web應用。
18、應當理解，本部分所描述的內容并非旨在標識本公開的實施例的關鍵或重要特征，也不用于限制本公開的范圍。本公開的其它特征將通過以下的說明書而變得容易理解。
本文檔來自技高網...【技術保護點】
1.一種圖片背景色自適應方法，包括：
2.根據權利要求1所述的方法，其中，所述將頁面中的圖片加載到畫布中，包括：
3.根據權利要求1所述的方法，其中，所述根據所述像素數據確定所述圖片的主色調，包括：
4.根據權利要求3所述的方法，其中，所述根據所述圖片的像素數據進行顏色聚類，得到至少一個顏色簇，包括：
5.根據權利要求3所述的方法，其中，所述根據所述圖片的像素數據進行顏色聚類，得到至少一個顏色簇，包括：
6.根據權利要求1所述的方法，其中，所述獲取所述圖片的像素數據，包括：
7.一種圖片背景色自適應裝置，包括：
8.一種電子設備，包括：
9.一種計算機可讀介質，其上存儲有計算機程序，其中，所述計算機程序被處理器執行時實現如權利要求1-6中任一項所述的方法。
10.一種計算機程序產品，包括計算機程序，所述計算機程序在被處理器執行時實現根據權利要求1-6中任一項所述的方法。
【技術特征摘要】
1.一種圖片背景色自適應方法，包括：
2.根據權利要求1所述的方法，其中，所述將頁面中的圖片加載到畫布中，包括：
3.根據權利要求1所述的方法，其中，所述根據所述像素數據確定所述圖片的主色調，包括：
4.根據權利要求3所述的方法，其中，所述根據所述圖片的像素數據進行顏色聚類，得到至少一個顏色簇，包括：
5.根據權利要求3所述的方法，其中，所述根據所述圖片的像素數據進行顏色聚類，得到至少一個顏色...
【專利技術屬性】
技術研發人員：楊軍，
申請(專利權)人：網銀在線北京科技有限公司，
類型：發明
國別省市：
還沒有人留言評論。發表了對其他瀏覽者有用的留言會獲得科技券。