根据背景图像动态调整文本颜色
Dynamically adjust text color based on background image
我正在开发一个产品,该产品输出用户的图像,并且图像信息覆盖在上述图像的顶部。可以想象,由于明暗不同,图像需要不同的文本颜色。有一种方法来实现这一点与JavaScript?
编辑:我发现了一个类似的问题,我有一个解决方案,在一个jsfiddle (http://jsfiddle.net/xLF38/818)。我使用jQuery为我的网站虽然。如何将JavaScript转换为jQuery?
var rgb = getAverageRGB(document.getElementById('i'));
document.body.style.backgroundColor = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
function getAverageRGB(imgEl) {
var blockSize = 5, // only visit every 5 pixels
defaultRGB = {
r: 0,
g: 0,
b: 0
}, // for non-supporting envs
canvas = 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 values
rgb.r = ~~ (rgb.r / count);
rgb.g = ~~ (rgb.g / count);
rgb.b = ~~ (rgb.b / count);
return rgb;
}
我终于找到了我想要的东西!布莱恩·冈萨雷斯的jquery.adaptive-backgrounds.js。看看这个:
$parent.css({
// backgroundColor: data.color
color: data.color
});
我只是注释掉了backgroundColor规则,并创建了一个新的颜色规则。对于白色文本,添加文本阴影,例如:
text-shadow: 0 0 1px rgba($black, 0.3); // using Sass
应该足够了。谢谢大家的回答!
可以使用canvas元素。您必须创建一个canvas
元素,将图像元素绘制到画布中,获取画布的图像数据,查看文本所在的部分,将这些值转换为灰度值,取其平均值,然后将它们与中点进行比较。一些示例代码:
var img = document.getElementById('myImage');
var c = document.createElement('canvas');
var ctx = c.getContext('2d');
var w = img.width, h = img.height;
c.width = w; c.height = h;
ctx.drawImage(img, 0, 0);
var data = ctx.getImageData(0, 0, w, h).data;
var brightness = 0;
var sX = 0, sY = 0, eX = w, eY = h;
var start = (w * sY + sX) * 4, end = (w * eY + eX) * 4;
for (var i = start, n = end; i < n; i += 4) {
var r = data[i],
g = data[i + 1],
b = data[i + 2];
brightness += 0.34 * r + 0.5 * g + 0.16 * b;
if (brightness !== 0) brightness /= 2;
}
if (brightness > 0.5) var textColor = "#FFFFFF";
else var textColor = "#000000";
我还没有测试这段代码,虽然它应该可以工作。确保将sX, sY, eX, eY值更改为仅文本所在的区域,否则您将得到令人不满意的结果(它仍然有效)。好运!编辑:您不需要以任何特殊的方式显示您的图像。只需确保叠加文本的颜色为变量textColor.
您可以使用jQuery检查background-image属性,然后动态调整文本颜色。
var x = $(body).attr("background-image");
switch(x)
{
case "something.png":
// set color here
break;
}
相关文章:
- jquery插件或javascript方法自动调整文本输入(而非文本区域)(固定宽度)可变高度的大小
- 如何动态调整文本大小以适应元素以防止拉伸
- 使用jquery调整文本区域的高度
- 如何根据浏览器按比例调整文本大小
- 与我的jquery弹出窗口和自动调整文本区域大小有冲突
- 根据php/mysql变量中的文本行调整文本区域的大小
- 使用keyup键键入时调整文本区域宽度
- 如何使用chrome应用程序窗口动态调整文本区域的大小
- 文本区域在页面加载时未正确调整文本量的大小
- 根据文本行调整文本区域的大小
- 根据内容自动调整文本框的大小
- 如何使用 Angular.js动态调整文本区域值的大小
- 自动调整文本输入框 HTML 的大小
- 如何使用新行调整文本框的大小
- 根据屏幕大小调整文本大小
- 自动调整文本区域大小
- 是否可以根据输入的内容调整文本区域的大小
- 根据内容自动调整文本区域的大小
- 调整文本大小会忽略小数
- 无法调整文本区域高度的大小