在运行命令时，如何为每种可能的颜色（其中 16 + 百万）获得一组图像以显示一个？

Posted 2023-03-14

【中文标题】在运行命令时，如何为每种可能的颜色（其中 16 + 百万）获得一组图像以显示一个？

【英文标题】：How could you get a set of images for every possible colour (16+million of them) to display one upon running a command?

【发布时间】：2021-01-30 07:22:06

【问题描述】：

所以我有一个用于我的机器人的颜色命令。用户将为 args[0] 发送一个十六进制值，并且机器人当前发送一个 MessageEmbed，其中 .setColor() 为 args[0]。这对我来说太小了。我希望它是那种颜色的完整图像。这是我在 colour.ts 中的代码：

import  Message, MessageEmbed  from "discord.js";

export const name = "colour";
export const aliases = [ "color" ];
export function execute(message: Message, args: string[]) 
  const embed = new MessageEmbed();
  try 
    embed.setColor(args[0].toUpperCase());
   catch 
    return message.channel.send("Invalid color!");
  


  message.channel.send(embed);

我想删除嵌入，而是将 URL 发送到包含一堆颜色图像的网站。有人知道任何网站/没有网站我怎么能做到这一点？

【问题讨论】：

另外，请不要从 typescript 更改它，此代码是直接用 TypeScript 而不是 javascript 编写的。

我不确定我是否 100% 理解 - 您是否要创建纯色图像？喜欢canvas？我可以把它写下来作为答案。

@LindaPaiste 是的，这就是我想要的

【参考方案1】：

我们可以使用Canvas API创建纯色图像

这里有一个函数，它获取您的颜色以及宽度和高度，并返回一个纯色 html 画布元素。我们使用fillRect() 为图像填充颜色。

const createColorImage = (hex: string, width: number, height: number): HTMLCanvasElement => 
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  if (ctx) 
    ctx.fillStyle = hex;
    ctx.fillRect(0, 0, width, height);
  
  return canvas;

const element = createColorImage('#FF00FF', 100, 100);

我不确定发布到 discord API 需要什么格式，但画布有许多方法，包括 toBlob() 和 toDataUrl()，您可以使用它们来转换它。

编辑：

我不确定 discord 是否接受数据 URL，但试试这个：

const attachColorImage = (message: Message, hex: string, width: number, height: number) => 
  const embed = new MessageEmbed(
    image: 
      url: createColorImage(hex, width, height).toDataURL(),
      width,
      height
    
  )
  message.channel.send(embed);