Ajuster dynamiquement la couleur du texte en fonction de l'image d'arrière-plan

Je suis en train de travailler sur un produit qui génère des images par les utilisateurs et les informations de l'image est superposée sur le dessus de ladite images. Comme vous pouvez l'imaginer, les images nécessitent différentes couleurs de texte en raison de luminosité/obscurité. Est-il possible de réaliser cela avec JavaScript?

EDIT: j'ai trouvé une question similaire à la mienne et il y avait une solution donnée dans un jsfiddle (http://jsfiddle.net/xLF38/818). J'utilise jQuery pour mon site. Comment puis-je convertir la vanille JavaScript de 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;
}

source d'informationauteur NetOperator Wibby | 2013-06-19

  1. 9

    J'ai enfin trouvé quelque chose à faire précisément ce que je veux faire! Entrez Brian Gonzalez
    jquery.adaptive-backgrounds.js. Check this out:

    $parent.css({
//backgroundColor: data.color
color: data.color
});

    J'ai juste commenté le backgroundColor la règle et faites une nouvelle couleur. Pour les blancs du texte, un texte de l'ombre comme:

    text-shadow: 0 0 1px rgba($black, 0.3); //using Sass

    devrait être suffisant. Merci à tous pour vos réponses!

  2. 4

    Ceci est possible en utilisant l'élément canvas. Vous devez créer un canvas élément, dessiner l'image de l'élément dans la toile, de la toile de données d'image, regardez la partie où le texte, convertir ces valeurs en niveaux de gris, en moyenne, puis de les comparer avec un point à mi-chemin. Un exemple de code:

    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";

    Je n'ai pas testé ce code, mais il devrait fonctionner. Assurez-vous de changer la sX, sY, eX, eY valeurs de la zone où votre texte est, sinon vous obtiendrez des résultats insatisfaisants (fonctionnera toujours). Bonne chance!

    EDIT:
    Vous n'aurez pas à afficher vos images d'une façon particulière. Assurez-vous que la couleur de l'incrustation est la variable textColor.

  3. -1

    vous pouvez vérifier l'image de fond d'écran de l'attribut avec jQuery puis de régler la couleur du texte de façon dynamique.

    var x = $(body).attr("background-image");
switch(x)
{
case "something.png":
//set color here
break;
}