根据背景图像颜色自动对比文本颜色
我正在寻找一种方法来将文本的颜色更改为＃000或#fff，具体取决于div中名为“banner”的背景图像的主要颜色。 在每页上随机选择背景图像，因此我需要能够自动执行此操作。 我遇到了JavaScript色彩对比，但我很难理解如何正确使用它。 我注意到我发布的链接提供了一个javascript解决方案，我也读到了jquery中可能的解决方案。
我对函数一无所知，所以如果有人能够清楚地解释我是如何实现这一点的，那里我放置函数以及我如何“称它们”（如果这是正确的术语！）使用它我会非常感激。
谢谢你的帮助。
你可以这样做。 （使用Colours.js和这个答案 ）
请注意，这仅适用于同一域和支持HTML5canvas的浏览器中的图像。
'use strict'; var getAverageRGB = function(imgEl) { var rgb = { b: 0, g: 0, r: 0 }; var canvas = document.createElement('canvas'); var context = canvas.getContext && canvas.getContext('2d'); if (Boolean(context) === false) { return rgb; } var height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height; var width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width; canvas.height = height; canvas.width = width; context.drawImage(imgEl, 0, 0); var data; try { data = context.getImageData(0, 0, width, height).data; } catch (e) { console.error('security error, img on diff domain'); return rgb; } var count = 0; var length = data.length; // only visit every 5 pixels var blockSize = 5; var step = (blockSize * 4) - 4; for (var i = step; i < length; i += step) { count += 1; rgb.r += data[i]; rgb.g += data[i + 1]; rgb.b += data[i + 2]; } rgb.r = Math.floor(rgb.r / count); rgb.g = Math.floor(rgb.g / count); rgb.b = Math.floor(rgb.b / count); return rgb; }; var rgb = getAverageRGB(document.getElementById('image')); var avgComplement = Colors.complement(rgb.r, rgb.b, rgb.g); var avgComplementHex = Colors.rgb2hex.apply(null, avgComplement.a); var compliment = parseInt(avgComplementHex.slice(1), 16); document.body.style.backgroundColor = 'rgb(' + [ rgb.r, rgb.g, rgb.b ].join(',') + ')'; var maxColors = 0xFFFFFF; var midPoint = Math.floor(maxColors / 2); document.getElementById('text').style.color = compliment > midPoint ? '#000' : '#fff';
Setting the BODY's background to the average color in the following image and this text to a complimentary colour of black or white: 