Динамически меняющийся цвет текста в зависимости от фонового изображения

Question

прямо сейчас я пишу небольшое расширение хром. расширение захватывает изображение Bing дня и устанавливает его как фоновое изображение тела, а затем расширение также захватывает погоду, время, дату и т. д. Проблема в том, что иногда изображение дня, например, яркое на одном боковой и темной - с другой. Таким образом, независимо от цвета текста, некоторые из них неразборчивы. Как я могу определить, какой цвет должен иметь каждый текст в зависимости от цвета фонового изображения за конкретным текстом? Спасибо заранее.

Answer 1

Вы можете использовать функцию attr() jQuery. Например, если вы IMG тег имеет атрибут идентификатор 'my_image':.

<img id="my_image" src="first.jpg"/> 

Jquery $ ("# my_image") атр ("ЦСИ", "second.jpg");

Answer 2

У меня есть что-то для работы ... Это своего рода временное, но не надежное, но я нашел сценарий, который вычисляет общую яркость, что позволяет сценарию решить, должен ли он отображать черный или белый текст. Кажется, хорошо работает, на данный момент. Вот оно:

function getImageBrightness(imageSrc) { 
    var img = document.createElement("img"); 
    img.src = imageSrc; 
    img.style.display = "none"; 
    document.body.appendChild(img); 
    var colorSum = 0; 
    img.onload = function() { 
     // create canvas 
     var canvas = document.createElement("canvas"); 
     canvas.width = this.width; 
     canvas.height = this.height; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(this, 0, 0); 
     var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
     var data = imageData.data; 
     var r, g, b, avg; 

     for (var x = 0, len = data.length; x < len; x += 4) { 
      r = data[x]; 
      g = data[x + 1]; 
      b = data[x + 2]; 

      avg = Math.floor((r + g + b)/3); 
      colorSum += avg; 
     } 

     brightness = Math.floor(colorSum/(this.width * this.height)); 
     console.log(brightness); 
     if (brightness < 150) { 
      $(".contrast").css("color", "white"); 
     } else { 
      $(".contrast").css("color", "black"); 
     } 
    } 
} 

кредит: https://jsfiddle.net/s7Wx2/