Redmine

function avatarInitials() {

  let objects = document.querySelectorAll(".gravatar, .gravatar-child");

  let buffer = {};

  for (let i = 0; i < objects.length; i++) {

    if (objects[i].tagName.toLowerCase() === "img") {

      if (buffer[objects[i].title] == null) buffer[objects[i].title] = [objects[i]];

      else buffer[objects[i].title].push(objects[i]);

    }

  }

  for (let i = 0; i < Object.keys(buffer).length; i++) {

    let avatarLink = buffer[Object.keys(buffer)[i]][0].src;

    let elements = buffer[Object.keys(buffer)[i]];

    let avatarUsername = buffer[Object.keys(buffer)[i]][0].title;

    buffer[Object.keys(buffer)[i]].avatarURL = avatarLink;

    if (!avatarLink.match("(identicon)|(wavatar)|(monsterid)|(retro)|(mm)")) {

      checkFile(buffer[Object.keys(buffer)[i]][0].src, function(error, response) {

        if (error) {

          let initials = (avatarUsername.match(" ")) ? avatarUsername.split(" ")[0].charAt(0) + avatarUsername.split(" ")[1].charAt(0) : avatarUsername.charAt(0).toUpperCase();

          let extractedMD5 = avatarLink.substring(avatarLink.lastIndexOf("/") + 1, avatarLink.lastIndexOf("?"));

          let md5toHex = (parseInt(parseInt(extractedMD5, 36).toExponential().slice(2,-5),10) & 0xFFFFFF).toString(16);

          for (let i = 0; i < elements.length; i++) {

            elements[i].setAttribute("src", generateAvatarOBJ(elements[i].clientWidth, initials, findForegroundYIQ(md5toHex), "#" + md5toHex));

          }

        }

      });

    }

  }

  function checkFile(url, callback) {

    let request = new XMLHttpRequest();

    request.open('GET', url + "404");

    request.onload = function () {

      if (request.status < 200 || request.status > 299) callback({msg: "Error: Status " + request.status + " on resource " + url, code: request.status});

      else callback(null, request);

    }

    request.send();

  }

  function findForegroundYIQ(color) {

    return ((((parseInt(color.substr(0,2),16)*299) + (parseInt(color.substr(2,2),16)*587) + (parseInt(color.substr(4,2),16)*114))/1000)>=128) ? 'black' : 'white';

  }

  function generateAvatarOBJ(size, text, hexText, hexBg, dataURI) {

    text = text || '';

    size = size || 60;

    canvas = document.createElement('canvas');

    canvas.width = size;

    canvas.height = size;

    context = canvas.getContext("2d");

    context.fillStyle = hexBg;

    context.fillRect(0, 0, canvas.width, canvas.height);

    context.font = Math.round(canvas.width/1.5) + "px Arial";

    context.textAlign = "center";

    context.fillStyle = hexText;

    context.fillText(text, size/2, size/1.35);

    dataURI = canvas.toDataURL();

    canvas = null;

    return dataURI;

  }

}

$(document).ready(avatarInitials);