Ajustement dynamique de la couleur du texte en fonction de l'image de fond

je travaille sur un produit qui produit des images des utilisateurs et l'information d'image est superposée sur le dessus des images mentionnées ci-dessus. Comme vous pouvez l'imaginer, les images nécessitent des couleurs de texte différentes en raison de la légèreté/obscurité. Y a-t-il un moyen d'y parvenir 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 convertir le JavaScript vanille pour 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;

}
17
demandé sur NetOperator Wibby 2013-06-19 19:51:41

3 réponses

j'ai finalement trouvé quelque chose à faire exactement ce que je veux qu'il fasse! Entrez Brian Gonzalez jquery.adaptive-des arrière-plans.js. Check this out:

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

je viens de commenter le backgroundColor règle et fait un nouveau pour la couleur. Pour un texte blanc, un texte-ombre comme:

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

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

10
répondu NetOperator Wibby 2013-12-15 15:14:46

Ceci est possible en utilisant l'élément canvas. Vous devez créer un canvas element, dessinez l'élément image dans la toile, obtenez les données image de la toile, regardez la partie où le texte est, convertissez ces valeurs en échelle de gris, faites la moyenne, puis comparez-les avec un point à mi-chemin. Quelques exemples 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 les valeurs SX, sY, eX, eY à seulement la zone où votre texte est, sinon vous obtiendrez des résultats insatisfaisants (fonctionnera toujours). Bonne chance!

modifier: 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.

5
répondu rvighne 2013-08-18 17:13:40

Vous pouvez vérifier l'attribut background-image avec jQuery puis ajuster dynamiquement la couleur du texte.

var x = $(body).attr("background-image");
switch(x)
{
  case "something.png":
      // set color here
      break;
}
-1
répondu jappple 2013-06-19 15:57:28