script.js

var img = new Image();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
img.src = imageUrl;

img.onload = function () {
  canvas.width = img.width;
  canvas.height = 100;
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';

  var result = 0,
    mediumValue = 0,
    bright,
    pixelCount = 0;

  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = imageData.data;
  for (var i = 0; i < data.length; i += 4 * 10) {
    mediumValue = (data[ i ] + data[ i + 1 ] + data[ i + 2 ]) / 3;
    result += mediumValue;
    pixelCount++;
  }
  bright = result / pixelCount;
  if (bright > 200) {
    $('header').addClass('header_gray');
  } else {
    if ($('header').hasClass('header_gray')) {
      $('header').removeClass('header_gray');
    }
  }
};