azerothcore-armory/static/js/emblems.js

function waitForEmblemImages($emblem) {
  return Promise.all(
    $emblem.find('.images img').map((idx, img) => {
      return new Promise((res, rej) => {
        if (img.complete) {
          res();
        } else {
          img.addEventListener('load', res);
          img.addEventListener('error', rej);
        }
      });
    }),
  );
}

function createGuildEmblem(emblem, el) {
  const $emblem = $(el);
  const canvas = $emblem.find('canvas')[0];
  const ctx = canvas.getContext('2d');

  const imgUrl = (type, section, value, value2) =>
    `${handlebarsData.websiteRoot}/img/guild-emblems/${type}_${value}${value2 ? '_' + value2 : ''}_T${section}_U.PNG`;

  const $images = $('<div>').addClass('images').appendTo($emblem);
  const bgUpper = $('<img>').attr('src', imgUrl('Background', 'U', emblem.background)).appendTo($images)[0];
  const bgLower = $('<img>').attr('src', imgUrl('Background', 'L', emblem.background)).appendTo($images)[0];
  const iconUpper = $('<img>').attr('src', imgUrl('Emblem', 'U', emblem.icon, emblem.iconColor)).appendTo($images)[0];
  const iconLower = $('<img>').attr('src', imgUrl('Emblem', 'L', emblem.icon, emblem.iconColor)).appendTo($images)[0];
  const borderUpper = $('<img>').attr('src', imgUrl('Border', 'U', emblem.border, emblem.borderColor)).appendTo($images)[0];
  const borderLower = $('<img>').attr('src', imgUrl('Border', 'L', emblem.border, emblem.borderColor)).appendTo($images)[0];

  const drawEmblemLayer = (ctx, layer) => {
    const [upper, lower] = layer;

    const w = upper.width / 2;
    const uh = upper.height;
    const lh = lower.height;

    ctx.drawImage(upper, 0, 0, w, uh, w, 0, w, uh);
    ctx.drawImage(lower, 0, 0, w, lh, w, upper.height, w, lh);
    ctx.save();
    ctx.scale(-1, 1);
    ctx.drawImage(upper, 0, 0, w, uh, 0, 0, -w, uh);
    ctx.drawImage(lower, 0, 0, w, lh, 0, upper.height, -w, lh);
    ctx.restore();
  };

  waitForEmblemImages($emblem).then(() => {
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(26, 0);
    ctx.lineTo(64, 28);
    ctx.lineTo(102, 0);
    ctx.lineTo(128, 0);
    ctx.lineTo(128, 96);
    ctx.lineTo(0, 96);
    ctx.closePath();
    ctx.clip();
    drawEmblemLayer(ctx, [bgUpper, bgLower]);
    drawEmblemLayer(ctx, [iconUpper, iconLower]);
    drawEmblemLayer(ctx, [borderUpper, borderLower]);
  });
}

function createArenaEmblem(teamSize, emblem, el) {
  const $emblem = $(el);
  const canvas = $emblem.find('canvas')[0];
  const ctx = canvas.getContext('2d');

  const imgUrl = (teamSize, type, value) =>
    `${handlebarsData.websiteRoot}/img/arena-banners/PVP-Banner${teamSize ? '-' + teamSize : ''}${type ? '-' + type : ''}${
      value ? '-' + value : ''
    }.PNG`;

  const $images = $('<div>').addClass('images').appendTo($emblem);
  const banner = $('<img>').attr('src', imgUrl(teamSize)).appendTo($images)[0];
  const bannerCrop = $('<img>').attr('src', imgUrl(teamSize, 'Crop')).appendTo($images)[0];
  const border = $('<img>').attr('src', imgUrl(teamSize, 'Border', emblem.border)).appendTo($images)[0];
  const icon = $('<img>').attr('src', imgUrl(undefined, 'Emblem', emblem.icon)).appendTo($images)[0];

  const colorToHex = (color) => '#' + parseInt(color).toString(16).substring(2);

  waitForEmblemImages($emblem).then(() => {
    const srcH = 224;
    const h = 128;
    const w = (banner.width / srcH) * h;
    const iconW = icon.width * 0.35;
    const iconH = icon.height * 0.35;
    ctx.drawImage(banner, 0, 0, banner.width, srcH, 0, 0, w, h);
    ctx.drawImage(tintImage(bannerCrop, colorToHex(emblem.background)), 0, 0, banner.width, srcH, 0, 0, w, h);
    ctx.drawImage(tintImage(border, colorToHex(emblem.borderColor)), 0, 0, border.width, srcH, 0, 0, w, h);
    ctx.drawImage(tintImage(icon, colorToHex(emblem.iconColor)), w * 0.385 - iconW / 2, h * 0.325 - iconH / 2, iconW, iconH);
  });
}

const tintCanvas = document.createElement('canvas');
const tintContext = tintCanvas.getContext('2d');
function tintImage(image, color, opacity = 1.0) {
  const ctx = tintContext;

  ctx.canvas.width = image.width;
  ctx.canvas.height = image.height;

  // First draw the image to the buffer
  ctx.drawImage(image, 0, 0);

  // Multiply with a rectangle of the specified color
  ctx.fillStyle = color;
  ctx.globalCompositeOperation = 'multiply';
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  // Finally, fix masking issues and globalAlpha
  ctx.globalAlpha = opacity;
  ctx.globalCompositeOperation = 'destination-in';
  ctx.drawImage(image, 0, 0);

  return ctx.canvas;
}