Как раскрасить текст специально для строки?

Question

Я создаю конечную точку генерации изображения, где она GET представляет информацию о статистике пользователя сервера Minecraft. Извините, если это сбивает с толку, но я сделаю все возможное.

Я пытаюсь сделать так, чтобы цвет текста соответствовал hive.modernRank.human JSON ключу объекта. Так, например:

• Если hive.modernRank.human возвращает значение как Ultimate Premium, оно будет окрашено в розовый цвет или
• Если hive.modernRank.human вернет значение как изумрудное, оно будет окрашено Зеленый

et c.

В настоящее время это просто черный текст, потому что я не уверен, как это реализовать, и поэтому я начинаю с создания конечной точки.

Код:

   try {       
   Canvas.registerFont(resolve(join(__dirname, '../assets/RifficFree-Bold.ttf')), 'Riffic');  
   Canvas.registerFont(resolve(join(__dirname, '../assets/GothamMedium.ttf')), 'GothamMedium');

const { body: hive } = await get(`http://api.hivemc.com/v1/player/${req.query.player}`)
    const { body: template } = await get(`https://i.imgur.com/XccpQSv.png`)
    const { width, height } = await loadImage(template); 

          let canvas = new Canvas(width, height)
    .addImage(template, 0, 0, width, height)
    .setColor("#000000")
    .setTextFont(`30px Riffic`)
    .addText(hive.username, 20, 40)
    .setTextFont(`14px GothamMedium`)

    .setColor(`#`)
    .addText(hive.modernRank.human, 20, 60)
  /*  .setColor("#ffffff")
    .setTextFont(`20px GothamMedium`)*/
  /*  .addText(`
XP: ${hide.xp}
Hider Kills: ${hide.hider_kills} • Seeker Kills: ${hide.seeker_kills}
Played: ${hide.played} • Wins: ${hide.victories} • Deaths: ${hide.deaths}
W/L: ${wlratio}% • HK/D: ${hdratio} • SK/D: ${sdratio}
First Played: ${date}
`, 20, 89)*/

    .toBuffer();

    res.contentType('image/png');
    res.end(canvas)
     } catch (e) { 
    return res.send({"error": "404 Not Found", "message": "The Hive Bedrock player you tried to request was not found. Make sure the player username was spelt correct."});     
        }

Снимки экрана: https://imgur.com/a/k8VHxYF

Обратите внимание, что проект выполняется с маршрутизацией express. js. Скриншоты для вашей информации. Я спрашиваю здесь, потому что я не хочу в конечном итоге написать еще 300 строк дублированного кода только для ранга цвета.

Answer 1

Использование .setColor отлично работает для меня ...
См. Код ниже. Я случайным образом выбираю цвет (красный или зеленый), который будет применен ко второму тексту:

const { Canvas } = require("canvas-constructor");
const express = require("express");
const app = express();

app.get("/", (req, res) => {
  let color = "#FF0000";
  if (Math.random() > 0.5) {
    color = "#00FF00";
  }

  let canvas = new Canvas(200, 200)
    .setColor("#000000")
    .addText("Hello", 20, 40)
    .setColor(color)
    .addText("World", 20, 60);

  res.contentType("image/png");
  res.end(canvas.toBuffer());
});

const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log("Service running PORT:" + PORT);
});

В вашем случае оператор if будет проверять значение modernRank

Вот что в действии:
https://codesandbox.io/s/bold-snow-exxdr?file= / server. js