JavaScript获取图片的主色调
相信很多人應該都知道8月份發生的就希望APP主題顏色隨手機殼自動調整的流血事件，當晚刷爆朋友圈。然而第二天我接到一個需求，設計希望前端自動讀取banner的主題色在圖片上面添加主題色的漸變蒙版，當時我默默的拿出手機播放了前一天晚上刷爆朋友圈視頻，然后再把描述也給UI讀了一遍，是否他就懂了我的意思，轉身就改設計稿去了，這件事也就偶爾被當做笑料談一談。但當時的我竟沒有仔細想一想，沒有研究就果斷的拒絕UI，現在回想起原來被當做笑料的是我自己。。。
需求描述
要求就是達到如下效果，獲取每一個節目單 banner 的主題色彩，然后在banner上加上一層漸變的主題色，因為 banner 為電臺客戶自己上傳，不可控，所以需要開發添加。
實現方案
1、獲取點色
簡單邏輯獲取主色調當然就是直接判斷哪個色彩的RGB值出現次數最多就取哪個顏色了，如果要深入考慮的話當然還有密集度重要因素，這里就不做贅述了，我們就采用簡單粗暴的方案就可解決當前需求。
我們可以通過 canvers 的 getImageData 方法獲取到每一個像素點的 ImageData 對象，ImageData.data 中存儲著我們需要的具體數據，方法如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <canvas id="canvas" width="300" height="300"></canvas>
9 </body>
10
11 <script type="text/javascript">
12 let img = new Image()
13 let canvas = document.getElementById('canvas')
14 let ctx = canvas.getContext('2d')
15
16 img.onload = function() {
17 ctx.drawImage(img, 0, 0)
18 img.style.display = 'none'
19 let imgData = (ctx.getImageData(0, 0, img.width, img.height)).data
20 }
21
22 img.src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=182623993,1093186456&fm=27&gp=0.jpg"
23 img.crossOrigin="anonymous"
24 </script>
25 </html>
如果你對 canvers 的 getImageData 方法不勝了解，請點擊這里
問題：
Ⅰ、這里因為 canvers 有安全監測機制，所以 img 的地址不能使用本地的圖片，會涉及跨域的問題，當然如果你比較皮，非要使用本地圖片作為測試數據，那也不是沒辦法，這里提供兩個方案：
① 寫成本地圖片后頁面使用 Firefox 打開，不會報錯
② 借助第三方中轉，隨便找個網址注冊，上傳測試圖片作為頭像后將頭像地址拿過來，就OK
Ⅱ、canvers img 如果使用網絡地址還會觸發另一個問題，就是地址得以 https 協議傳輸，否則同樣報錯。如果你對 http、https 不勝了解，請單擊這里
2、數據處理
我們拿到點色數據后接下來的工作當然就是對二維色點數組的 RGB 值做處理，這里就需要一定的算法來支撐。
要注意的是顏色是有三個值來控制的(RGB)，如果取單值來統計的話就顯得粗漏，所以就需要分別對R、G、B的值進行統計。
主要的一些算法有 顏色量化法 → 八叉樹算法、中位切分法，聚類→KMeans 算法，色彩建模 等方法，如果你想了解一下，請點擊這里
這里我們選取八叉樹算法來處理數據，八叉樹顧名思義共八層，每層每個節點都有八個子節點(葉子節點除外)
總結
以上是生活随笔為你收集整理的JavaScript获取图片的主色调的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 利用Kotlin扩展函数实现任意View
- 下一篇： 福昕PDF阅读器的图章妙用