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="data: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)

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

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

百度图片源码流出~按照颜色搜图片~提取图片主体颜色
百度图片中有一个按照颜色搜图片的功能,其核心算法是提取图片主体颜色法,本文将使用python实现提取图片主体颜色算法. 百度将图片主体颜色归类到如下11中颜色: 颜色代码: label_colors ...
基于python的K-means聚类提取图片主色
基于python+opencv的彩色图片主色提取--利用K-means聚类算法一.K-means聚类算法 1.K-means算法原理 2. K-means聚类算法流程 3.sklearn库中skle ...
基于QT和Node.js的八叉树算法提取图片主题色
资源下载地址:https://download.csdn.net/download/sheziqiong/85883609 资源下载地址:https://download.csdn.net/downl ...
如何对图片主题色进行提取
一起网易云 ???? 网易云音乐想必是大家很熟悉的一款 app 了,毕竟大家在深夜都会网抑云开玩笑了,最近在网易云听歌时,发现了一个很有意思的特效: 就是切换歌曲时,会根据当前封面替换背景色.作为资深 ...
Nodejs提取图片主图色（二）
Nodejs提取图片主图色(一) 如何提高颜色提取的正确率主要是 images.jpeg-js.pngjs 共用,彼此之间并不冲突 // node-pixels.js 'use strict';va ...
python提取图片文字视频教学_用Python提取视频中的图片
小编自己码的通用型函数,支持各种常用视频格式,可满足常用需求,亲测效果和速度都不错. 想获取本文数据和完整代码的下载链接,请关注微信公众号"R语言和Python学堂",并回复发文日 ...
视频直播源码，插入图片、删除图片、设置图片大小、提取图片
视频直播源码,插入图片.删除图片.设置图片大小.提取图片 1.插入图片 Document对象有一个add_paragraph()方法插入图片,只需要传入路径或者字节流即可,实际上它也是调用段落的Run ...
智能系列 - Js动态拾取图片均色，取得相反的色彩。
在现实开发中,经常会遇到根据轮播图等场景,然后设置附近元素背景色来达到界面统一的效果,之前可能是直接取色器取一下,和图片对应好,保存到库里,相当麻烦而且容易出错.本文精心打造了一个智能获取,提供可靠性 ...
【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )
文章目录一.实现效果二.基本 HTML 结构三.设置最外层盒子样式 ( 盒子模型内外边距设置 ) 四.设置标题盒子样式 ( 盒子模型尺寸计算 | 盒子模型水平居中 ) 五.设置列表盒子样式 ( ...

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

1.问题

2.解决方法

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

3.相关API

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

最新文章

热门文章