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