根据图片颜色显示背景色

前言：图片下方的横条根据图片的主题色动态设置！！！
两个资源文件，一张图片

index.html

<!DOCTYPE html><html><head><title>Demo</title><style>.cimgbox {width: 160px;height: 120px;border-radius: 10px;cursor: pointer;position: absolute;top: 20px;left: 20px;}.cimgbox img {width: 100%;height: 100%;border-radius: 10px;}.cimgbox i {position: absolute;bottom: -8px;left: 5px;border-radius: 0 0 10px 10px;height: 9px;width: 95%;}.cimgbox b {position: absolute;bottom: -11px;left: 9px;border-radius: 0 0 5px 5px;height: 10px;width: 90%;}</style><script src="jquery.js"></script><script type="text/javascript" src='jquery.adaptive-backgrounds.js'></script><script type="text/javascript" src='main.js'></script></head><body><div class="cimgbox"><i></i><b></b><img src="data:images/77.png" alt="" data-adaptive-background='1' data-description='grandpa' /></div></body></html>

jquery.adaptive-backgrounds.js


/* jshint debug: true, expr: true */;(function($){/* Constants & defaults. */var DATA_COLOR    = 'data-ab-color';var DATA_PARENT   = 'data-ab-parent';var DATA_CSS_BG   = 'data-ab-css-background';var EVENT_CF      = 'ab-color-found';var DEFAULTS      = {selector:             '[data-adaptive-background="1"]',parent:               null,exclude:              [ 'rgb(0,0,0)', 'rgba(255,255,255)' ],normalizeTextColor:   false,normalizedTextColors:  {light:      "#fff",dark:       "#000"},lumaClasses:  {light:      "ab-light",dark:       "ab-dark"}};// Include RGBaster - https://github.com/briangonzalez/rgbaster.js/* jshint ignore:start */!function(n){"use strict";var t=function(){return document.createElement("canvas").getContext("2d")},e=function(n,e){var a=new Image,o=n.src||n;"data:"!==o.substring(0,5)&&(a.crossOrigin="Anonymous"),a.onload=function(){var n=t("2d");n.drawImage(a,0,0);var o=n.getImageData(0,0,a.width,a.height);e&&e(o.data)},a.src=o},a=function(n){return["rgb(",n,")"].join("")},o=function(n){return n.map(function(n){return a(n.name)})},r=5,i=10,c={};c.colors=function(n,t){t=t||{};var c=t.exclude||[],u=t.paletteSize||i;e(n,function(e){for(var i=n.width*n.height||e.length,m={},s="",d=[],f={dominant:{name:"",count:0},palette:Array.apply(null,new Array(u)).map(Boolean).map(function(){return{name:"0,0,0",count:0}})},l=0;i>l;){if(d[0]=e[l],d[1]=e[l+1],d[2]=e[l+2],s=d.join(","),m[s]=s in m?m[s]+1:1,-1===c.indexOf(a(s))){var g=m[s];g>f.dominant.count?(f.dominant.name=s,f.dominant.count=g):f.palette.some(function(n){return g>n.count?(n.name=s,n.count=g,!0):void 0})}l+=4*r}if(t.success){var p=o(f.palette);t.success({dominant:a(f.dominant.name),secondary:p[0],palette:p})}})},n.RGBaster=n.RGBaster||c}(window);/* jshint ignore:end *//*Our main function declaration.*/$.adaptiveBackground = {run: function( options ){var opts = $.extend({}, DEFAULTS, options);/* Loop over each element, waiting for it to loadthen finding its color, and triggering thecolor found event when color has been found.*/$( opts.selector ).each(function(index, el){var $this = $(this);/*  Small helper functions which appliescolors, attrs, triggers events, etc.*/var handleColors = function () {var img = useCSSBackground() ? getCSSBackground() : $this[0];RGBaster.colors(img, {paletteSize: 20,exclude: opts.exclude,success: function(colors) {$this.attr(DATA_COLOR, colors.dominant);$this.trigger(EVENT_CF, { color: colors.dominant, palette: colors.palette });}});};var useCSSBackground = function(){return $this.attr( DATA_CSS_BG );};var getCSSBackground = function(){return $this.css('background-image').replace('url(','').replace(')','');};/* Subscribe to our color-found event. */$this.on( EVENT_CF, function(ev, data){// Try to find the parent.var $parent;if ( opts.parent && $this.parents( opts.parent ).length ) {$parent = $this.parents( opts.parent );}else if ( $this.attr( DATA_PARENT ) && $this.parents( $this.attr( DATA_PARENT ) ).length ){$parent = $this.parents( $this.attr( DATA_PARENT ) );}else if ( useCSSBackground() ){$parent = $this;}else if (opts.parent) {$parent = $this.parents( opts.parent );}else {$parent = $this.parent();}$parent.css({ backgroundColor: data.color });// Helper function to calculate yiq - http://en.wikipedia.org/wiki/YIQvar getYIQ = function(color){var rgb = data.color.match(/\d+/g);return ((rgb[0]*299)+(rgb[1]*587)+(rgb[2]*114))/1000;};var getNormalizedTextColor = function (color){return getYIQ(color) >= 128 ? opts.normalizedTextColors.dark : opts.normalizedTextColors.light;};var getLumaClass = function (color){return getYIQ(color) <= 128 ? opts.lumaClasses.dark : opts.lumaClasses.light;};// Normalize the text color based on luminance.if ( opts.normalizeTextColor )$parent.css({ color: getNormalizedTextColor(data.color) });// Add a class based on luminance.$parent.addClass( getLumaClass(data.color) ).attr('data-ab-yaq', getYIQ(data.color));opts.success && opts.success($this, data);});/* Handle the colors. */handleColors();});},};})(jQuery);

main.js

(function(window, document, $){$(document).ready(function(){// Make some selections.var $window       = $(window);var $imgWrapper   = $('.cimgbox');var $imgs         = $imgWrapper.find("img");var $logoBoxes    = $('.logo .box');var $title        = $('h1');$imgs.on('ab-color-found', function(e, data){$(this).parents('.cimgbox').attr('data-color', data.color);$(this).css({ border: "1px solid " + data.palette[0].replace(')', ",0.25)").replace('rgb', "rgba") });$(this).parents('.cimgbox').find('i').css({ background: data.color,opacity:0.92 })$(this).parents('.cimgbox').find('b').css({ background: data.color,opacity:0.4 })if ( $(this).attr('data-description') == 'grandpa' ){$(this).parents('.cimgbox').css({ background: 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%'
//  })// Tweet button.var twitterTitle  = 'Adaptive Backgrounds - a jQuery plugin to extract dominant colors from <img> tags and apply them to their parent'; var twitterLoc    = 'http://goo.gl/zdw3uQ';$('.button.tweet').on('click', function(e){e.preventDefault();window.open('http://twitter.com/share?url=' + twitterLoc + '&text=' + twitterTitle + '&', 'twitterwindow', 'height=450, width=550, top='+($(window).height()/2 - 225) +', left='+$(window).width()/2 +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');})})})(window, document, jQuery)

最后效果：

根据图片颜色显示背景色相关推荐

如何将图片的背景色去掉？怎样快速去除背景色？
由于工作的需要,我们要将电脑中的某一张图片的背景颜色去掉变成透明底的图片时,应该如何去除图片的底色呢?接下来,小编为大家介绍一款方便快捷的图片制作器(https://www.yasuotu.com/) ...
AI 去掉图片的背景色
下面介绍在 illustrator 中去掉图片的背景色. 1.打开图片 2.选中图片,再点击上面属性栏中的"图像描摹"下拉按钮,弹出菜单选择"高保真度照片" 3 ...
使用photoshop（ps）将图片的背景色变成透明
在前端开发过程中,经常会用到图片(图片背景色是透明色的图片).有时候设计比较忙,自己学习了一下,总结如下: 第一步,打开Photoshop(ps),并在打开要变为透明色的图片.如下图: 第二步,双击右 ...
python怎么换背景颜色_用opencv给图片换背景色的示例代码
图像平滑模糊/平滑图片来消除图片噪声 OpenCV函数:cv2.blur(), cv2.GaussianBlur(), cv2.medianBlur(), cv2.bilateralFilter() ...
如何更改图片的背景色（PS、证件照之星）
如何更改图片的背景色(PS.证件照之星) 如何更改图片的背景色(PS.证件照之星) 1.1 证照之星教你如何给证件照换背景证照之星教你如何给证件照换背景?这个问题困扰很多人,如果你不了解证照之星, ...
【龙芯1B】：LCD显示图片文字背景色前景色、小创语音控制lcd显示、数码管倒计时
项目场景: 闲来无事,写了几个关于嵌入式技能大赛的任务.希望对大家有所帮助.本文开发板由百科荣创的龙芯1b开发板支持,关于嵌入式技能大赛的开发板. LCD显示图片&文字&背景 ...
android在学习——Menu背景图片，背景色的设置
今天研究了一下午,终于整出了,menu的背景图片和背景色的设置.效果如上图,呵呵不太好看啊这我就不管了,只作为参考,你们自己看看吧.代码如下: package com.hooypay.Activit ...
怎样将图片的背景色换成透明的？怎么让白底图片变透明？
想要将图片的背景色换成透明的,该怎么处理呢?其实除了使用ps之外,还有一种比较简单的图片去白底变透明的方法,今天就给大家详细讲解一下图片转化透明底的步骤,使用专业的图片去底色(https://www ...
java rgb透明色_【人像分割】Java给透明图片加背景色
之前在百度AI社区写的人像分割帖子,最近有一些开发者会遇到返回的透明图的base64存图片有问题,还想知道存起来的透明图片如何更改背景色,想快速做个证件照的应用. 此文呢.就从接口返回的透明图片搞起. ...

根据图片颜色显示背景色

根据图片颜色显示背景色相关推荐

最新文章

热门文章