js提取图片主体色设置为盒子的背景色

此处用到了jquery.adaptive-backgrounds.js插件

1.问题

因为产品提出需求要将头像的主体色设置为父元素背景色，所以找到了好用的jquery.adaptive-backgrounds插件

2.解决方法

引入jQuery.js和jquery.adaptive-backgrounds.js

引入文件之后,按照下面这样即可完成一个简单的demo：

$(document).ready(function(){
  $.adaptiveBackground.run();
});

在img标签中添加 data-adaptive-background属性

<img src="image.jpg" data-adaptive-background>

也可以通过提取盒子的背景图片设置其背景色，给相应的盒子添加 data-ab-css-background 属性，代码如下：

<style>
div{
    background:url(image.png)no-repeat center/1px;
}
</style>
<div  data-adaptive-background data-ab-css-background></div>

3.相关API

var defaults      = {
  selector: '[data-adaptive-background="1"]',//理想情况下，此选择器将以img开头，以确保我们只抓取并尝试处理实际图像
  parent: null,//CSS选择其表示该父应用背景颜色。默认情况下，颜色应用于DOM树上的父级,也可以通过选择器进行设置，eg:'.father'/'#father'
  exclude: [ 'rgb(0,0,0)', 'rgba(255,255,255)' ],
  shadeVariation:   false,
  shadePercentage: 0,
  shadeColors:  {
    light: 'rgb(255,255,255)',
    dark: 'rgb(0,0,0)' 
  },
  normalizeTextColor: false,  //如果背景颜色太暗或太亮,正常化父文字的颜色,以便文字能够看清楚
  normalizedTextColors:  {
    light: "#fff",
    dark: "#000"
  },
  lumaClasses:  {
    light: "ab-light",
    dark: "ab-dark"
  },
  transparent: null
};
$.adaptiveBackground.run(defaults)

我的个人博客,有空来坐坐