图片主题色在图片所占比例较大的页面中，能够配合图片起到很好视觉效果，给人一种和谐、一致的感觉。同时也可用在图像分类，搜索识别等方面。通常主题色的提取都是在后端完成的，前端将需要处理的图片以链接或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>效果
完整代码：https://download.csdn.net/download/qq_42396791/10744505
