問題背景來自於這篇文章《如何搞定Banner背景自動換色的功能？》- https://mp.weixin.qq.com/s/c3lv_OjSsUl8365WepOMhw
一、CSS 提取圖片主題色功能探索
一種純 CSS 實現的方案。在《小技巧！CSS 提取圖片主題色功能探索 - https://www.cnblogs.com/coco1s/p/14754188.html》這篇文章中，介紹了通過 filter: blur() 和 transform: scale() 來獲取圖片的主題色。具體的實現效果如下圖所示：
在線實例可以看這個：https://codepen.io/Chokcoco/pen/poRBQGg
這種方案實現起來並不會復雜，但會存在以下的問題：
（1）只能大致拿到圖片的主題色，而且結果並不是很精確；
（2）模糊濾鏡比較消耗性能，如果在頁面上大量使用的話，可能會對應用的性能造成影響。
（3）只能通過 背景圖 模糊來做背景，肯定不合適。我們需要的是直接拿 顏色值 來做背景色。
很明顯 CSS 方案雖然實現起來比較簡單，但並不是最好的方案。
但是比如當設計是一個大底圖模糊，再加一個小圖清晰這種設計的話，使用這種方式就很合適咯。而且原圖大底圖模塊 + 原圖小圖清晰再加其他描述信息，也是設計師比較喜歡設計的一種亮化方式，比如我APP上首頁直播活動的提醒，就是采用的這種方式。
二、color-thief 工具庫提取
color-thief 項目：https://github.com/lokesh/color-thief，10.3K star，使用簡單方便，很nice。
該項目通過 JS 實現了從圖片中獲取調色板的功能，同時支持瀏覽器和 Node.js 環境。
上圖是 color-thief 項目提供的在線示例，提取圖片調色板的效果，圖中的 Dominat Color 表示圖片的主題色。經過一番測試，發現該庫提取圖片調色板的功能還是挺不錯的。
1、從圖像中獲取主色調
var colorThief = new ColorThief(); colorThief.getColor(sourceImage); // getColor 方法
getColor(sourceImage[, quality]) returns {r: num, g: num, b: num}
2、從圖像構建調色板：在本例中，我們構建了一個8色調色板。
var colorThief = new ColorThief(); colorThief.getPalette(sourceImage, 8); // getPalette() 方法
getPalette(sourceImage[, colorCount, quality]) returns [ [num, num, num], [num, num, num], ... ]
三、對象存儲的智能多媒體服務提供圖片處理功能
比如七牛雲、阿里雲、華為雲等一般都有提供很多圖片處理的功能，一般都是在圖片資源后面拼接參數即可。比如直接在七牛雲圖片資源后面添加 imageAve 查詢參數即可，成功請求之后就會以 JSON 的形式返回圖片的 RGB 信息：{ "RGB": "0x85694d" }。