根据背景图片计算文字颜色（实用、赞）

原文出处: https://www.it1352.com/533401.html
延伸阅读：
1、根据背景颜色确定字体颜色
2、根据背景颜色的深浅确定字的颜色
3、Js获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。（Good有代码，计算图片平均色）
4、JavaScript调色器以及取互补色的算法思路
5、有关Color的问题，如何能得到与已知颜色反差最大的颜色（核心是下面一段话）

要计算某种颜色的互补色
首先取得这个颜色的RGB数值
再用255分别减去你现有的RGB值即可

比如纯黄色：r255 g255 b0
那么通过计算 r(255-255) g(255-255) b(255-0)
互补色为：r0 g0 b255
就是纯蓝色

6、 WEB-互补色与对比色的计算与获取。（这个很棒 Good!)
7、JS十六进制颜色（#fff）与RGB, HSL颜色的相互转换（代码）
8、请问各位怎么利用js实现文字与背景反色？(16进制）（代码）
9、RGB和RGBA之间的转换（代码）
10、js 生成颜色相近的两组颜色 (方案）

你得定义一下你设想中的颜色相近具体是如何相近？

#FFFFFF这样的颜色值是有规律可循的，但更好的方式是对比色相、饱和度和亮度。比如说色相相等（或者相差在很小的范围之内，好比5-10）饱和度与亮度相差正负5 这样的颜色算是相近，那只需要在 0-255 这个范围内按照上述规则随机取值就好了。生成的值是 HSL 可以直接返回给 CSS 用，也可以转换为16进制拼出 #xxxxxx 这样的值

11、判断一个颜色值是否接近白色或黑色?

把颜色rgb的3个值分别减255，得出3个差值，如果3个差值都在正负5以内，表示和白色很相近。黑色就减0呗。
当然这个正负5只是一个阀值，你也可以定们10或其它值。
其实利用rgb同时加减一个阀值也可以找出相近颜色

12、JS 生成随机色，避免相近色 (代码，排除过灰和过亮）（改一下阀值就可以成为找相近色）

问题：
页面图片切换后，根据图片主要颜色决定图片上文字的颜色是#000（黑）或#fff（白）。（互补色）
解决办法：
你可以这样做。(使用 Colours.js 和下面的函数)
注意：
这只适用于同一网域的图片和支持HTML5 canvas的浏览器中。

Javascript

function getAverageRGB(imgEl) {var blockSize = 5, // only visit every 5 pixelsdefaultRGB = {r: 0,g: 0,b: 0}, // for non-supporting envscanvas = document.createElement('canvas'),context = canvas.getContext && canvas.getContext('2d'),data, width, height,i = -4,length,rgb = {r: 0,g: 0,b: 0},count = 0;if (!context) {return defaultRGB;}height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;context.drawImage(imgEl, 0, 0);try {data = context.getImageData(0, 0, width, height);} catch (e) {/* security error, img on diff domain */alert('x');return defaultRGB;}length = data.data.length;while ((i += blockSize * 4) < length) {++count;rgb.r += data.data[i];rgb.g += data.data[i + 1];rgb.b += data.data[i + 2];}// ~~ used to floor valuesrgb.r = ~~ (rgb.r / count);rgb.g = ~~ (rgb.g / count);rgb.b = ~~ (rgb.b / count);return rgb;
}var rgb = getAverageRGB(document.getElementById('i')),compliment = +("0x" + Colors.rgb2hex.apply(null, Colors.complement(rgb.r, rgb.b, rgb.g ).a).slice(1));document.body.style.backgroundColor = 'rgb(' + rgb.r + ',' + rgb.b + ',' + rgb.g + ')';
document.getElementById('text').style.color = (compliment > 8388607 ? "#000" : "#fff");

根据背景图片计算文字颜色（实用、赞）相关推荐

android切换字体颜色,Android开发实现按钮点击切换背景并修改文字颜色的方法
本文实例讲述了Android开发实现按钮点击切换背景并修改文字颜色的方法.分享给大家供大家参考,具体如下: 其实原理很简单,用到的是selector,用来设置android:background和an ...
IOS设置导航栏的背景图片和文字
IOS设置导航栏的背景图片和文字 - (void)viewDidLoad {[super viewDidLoad];[self.navigationBar setBackgroundImage:[UI ...
python中mainloop添加背景_Python实例讲解 - tkinter canvas (设置背景图片及文字)
Python实例讲解 -- tkinter canvas (设置背景图片及文字) 先来一个绘图: from Tkinter import * master = Tk() w = Canvas(mast ...
如何实现背景/背景图片透明文字不透明
如何实现背景/背景图片透明文字不透明第一种情况,背景为自定义颜色第二种情况,背景为图片总结: 第一种情况,背景为自定义颜色直接给父级背景颜色设置background:rgba();就可以了: ...
python设置背景图片大全_Python实例讲解 - tkinter canvas (设置背景图片及文字)
Python实例讲解 -- tkinter canvas (设置背景图片及文字) 先来一个绘图: from Tkinter import * master = Tk() w = Canvas(mast ...
python中mainloop添加背景_Python实例讲解 tkinter canvas (设置背景图片及文字)
Python实例讲解 tkinter canvas (设置背景图片及文字) 2018-09-14 Python实例讲解 -- tkinter canvas (设置背景图片及文字) 博客分类:Pytho ...
php 如何给字体加颜色,怎么给字体加背景图片？如何给文字填充图片背景色？怎么给字体加背景图片？文字加背景图...
下了两天的雨,今天终于放晴了,而且还是阴天的天气,有微风,没有热辣的太阳,这让小编不禁感到了一股秋的凉意呢~啊哈哈哈,好啦,还是不说废话了,来看看今天的教程方案吧!平时我们制作纯文字的图片画面,文字的 ...
CSS浮动+背景图片+边框+文字排版+段落设置
一.CSS浮动 1.简介默认的框是上下移动,CSS浮动可以控制浮动的框向左或者向右移动float属性属性值说明 left 元素向左浮动 right 元素向右浮动 none 默认值,元素不浮动浮动意 ...
CSS实现背景图片透明文字不透明效果的两种方法
网页设计中经常要在背景图上放一些文字介绍,这就需要背景图片能有透明效果以便突出显示文字信息,经多方查阅,终于找到了2种有趣的方法. 1.在文字层添加rgba样式实现半透明效果方法: 背景图片层添加样 ...

根据背景图片计算文字颜色（实用、赞）

根据背景图片计算文字颜色（实用、赞）相关推荐

最新文章

热门文章