jQuery提取影象的主色
阿新 • • 發佈：2018-12-17
圖片主題色在圖片所佔比例較大的頁面中，能夠配合圖片起到很好視覺效果，給人一種和諧、一致的感覺。同時也可用在影象分類，搜尋識別等方面。通常主題色的提取都是在後端完成的，前端將需要處理的圖片以連結或id的形式提供給後端，後端通過執行相應的演算法來提取出主題色後，再返回相應的結果。
但是過程麻煩所以今天分享個外掛直接獲取
需要外掛：
1.jquery.js v1.10.2（高版本會報錯）
2.jquery.adaptive-backgrounds.js
3.waypoints.min.js
JS
$(document).ready(function(){ // Make some selections. var $window = $(window); var $imgWrapper = $('.image-wrapper'); var $imgs = $imgWrapper.find("img"); var $logoBoxes = $('.logo .box'); var $title = $('h1'); $imgs.on('ab-color-found', function(e, data){ console.log(data.color) $('.swatch').text(data.color) }); // Run the A.B. plugin. $.adaptiveBackground.run({ parent: '1' }); $imgWrapper.waypoint(function(direction) { if ( $(this).attr('data-colored') ) return; $(this).css({ background: $(this).attr('data-color') }) .attr('data-colored', 1); }, { offset: '65%' }) })
HTML
<!DOCTYPE html> <html> <head> <title>Demo</title> <link rel="stylesheet" href="styles.css" /> <script src="jquery.js"></script> <script type="text/javascript" src='jquery.adaptive-backgrounds.js'></script> <script type="text/javascript" src='waypoints.min.js'></script> <script type="text/javascript" src='main.js'></script> </head> <body> <div class='image-wrapper slow'> <div class='inner'> <span class='color'> <span class='swatch'></span> </span> <img src="images/1.jpg" data-adaptive-background='1' data-description='grandpa'> </div> </div> </body> </html>
效果
