NodeJS 为什么@napi-rs/canvas不能像它应该的那样呈现文本?

juud5qan  于 2023-05-06  发布在  Node.js
关注(0)|答案(1)|浏览(242)

我一直在试图找出如何解决这个问题约3小时,如果任何人可以帮助,这将是很好的。
这是一个使用@napi-rs/canvas的discord.js项目。出于某种原因,@napi-rs/canvas根本没有呈现任何文本。
当代码运行时,它给出this image.
我正在使用railway.app在线运行此代码

client.on("guildMemberAdd", async function(member){
  if (member.guild.id != guildId) return
    const canvas = Canvas.createCanvas(800, 500);
    const context = canvas.getContext('2d');
    const pfp = await Canvas.loadImage(member.displayAvatarURL({format: "png"}))
    const bg = await Canvas.loadImage('./joinbg.png')
    const uname = member.user.username
    const dcrim = member.user.discriminator
    console.log(uname+"#"+dcrim+" has joined! sending join img + verification!")
    
    context.drawImage(bg, 0, 0, canvas.width, canvas.height)
    context.strokeStyle = "#ffffff"
    //context.strokeRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = 'rgba(255,255,255,1)'
    context.font = '50px sans-serif'
    context.fillText(""+uname, 200, 100)
    //context.fillText(text, 0, 0)
    context.fillStyle = 'rgba(155, 155, 155, 1)'
    context.font = '30px sans-serif'
    context.fillText("#" + dcrim, 200, 140)
    //context.fillText(text2, 0, 0)
    // Pick up the pen
    context.beginPath();

    // Start the arc to form a circle
    context.arc(106.5, 105.5, 92.5, 92.5, Math.PI * 1, true);

    // Put the pen down
    context.closePath();

    // Clip off the region you drew on
    context.clip();
    context.drawImage(pfp, 14, 13, 185, 185)

    const a = new ActionRowBuilder()
    .addComponents(
        new ButtonBuilder()
        .setCustomId('tos')
        .setLabel('View ToS')
        .setStyle(ButtonStyle.Secondary),
    )

    const newimg = new AttachmentBuilder(await canvas.encode('png'), { name: uname+'#'+dcrim+'-joined.png' })
    client.guilds.fetch("" + process.env.guildid) .then((guild) => {
      guild.channels.fetch("" + process.env.welcomechannelid) .then((channel) => {
        channel.send({ files: [newimg] })
        member.send({
          content: "**Welcome to Plot Block [LIFESTEAL]!**\n\nWe hope you have a good time here!\nPlease click on the button below to begin the first step of the verification process!",
          components: [a]
        })
      })
    })
})

我尝试恢复到旧版本的@napi-rs/canvas(具体来说是^0.1.30)
如果你能帮上忙,请帮忙。如果你需要更多的信息,我可以提供。
我试图做一个连接图像,以前工作得很好,但现在壮观的不工作,当我试图使一个新的。由于某种原因,文本将不会呈现。

r3i60tvu

r3i60tvu1#

我刚刚遇到了完全相同的问题,但我能够渲染的话后,我的修复。
问题似乎出在

context.font = '50px sans-serif'

其中显然短语sans-serif不再被支持。软件包无法从该短语中选择正确的字体,导致没有呈现任何单词。
要修复此问题,可以首先执行

console.log(GlobalFonts.families);

它允许您查看本地支持的字体的完整列表。它应该看起来像这样:

[
  {
    family: 'Arial',
    styles: [ [Object], [Object], [Object], [Object], [Object] ]
  },
  { family: 'Bahnschrift', styles: [ [Object] ] },
  {
    family: 'Calibri',
    styles: [ [Object], [Object], [Object], [Object], [Object], [Object] ]
  },
  {
    family: 'Cambria',
    styles: [ [Object], [Object], [Object], [Object] ]
  },
  {
    family: 'Candara',
    styles: [ [Object], [Object], [Object], [Object], [Object], [Object] ]
  },
  { family: 'Code39AzaleaNarrow1', styles: [ [Object] ] },
  { family: 'Code39AzaleaNarrow2', styles: [ [Object] ] },
  { family: 'Code39AzaleaNarrow3', styles: [ [Object] ] },
  { family: 'Code39AzaleaRegular1', styles: [ [Object] ] },
  { family: 'Code39AzaleaRegular2', styles: [ [Object] ] },
  { family: 'Code39AzaleaRegular3', styles: [ [Object] ] },
  { family: 'Code39AzaleaWide1', styles: [ [Object] ] },
  { family: 'Code39AzaleaWide2', styles: [ [Object] ] },
  { family: 'Code39AzaleaWide3', styles: [ [Object] ] },
  {
    family: 'Comic Sans MS',
    styles: [ [Object], [Object], [Object], [Object] ]
  },
  {
    family: 'Comic Neue',
    styles: [ [Object], [Object], [Object], [Object] ]
  },
  {
    family: 'Consolas',
    styles: [ [Object], [Object], [Object], [Object] ]
  },
  {
    family: 'Constantia',
    styles: [ [Object], [Object], [Object], [Object] ]
  },
  {
    family: 'Corbel',
    styles: [ [Object], [Object], [Object], [Object], [Object], [Object] ]
  },
  {
    family: 'Courier New',
    styles: [ [Object], [Object], [Object], [Object] ]
  },
  { family: 'Ebrima', styles: [ [Object], [Object] ] },
  { family: 'Franklin Gothic Medium', styles: [ [Object], [Object] ] },
  { family: 'Gabriola', styles: [ [Object] ] },
  { family: 'Gadugi', styles: [ [Object], [Object] ] },
  { family: 'GenSenRounded TW', styles: [ [Object], [Object] ] },
  {
    family: 'Georgia',
    styles: [ [Object], [Object], [Object], [Object] ]
  },
  { family: 'Microsoft Himalaya', styles: [ [Object] ] },
  { family: 'HoloLens MDL2 Assets', styles: [ [Object] ] },
  { family: 'Impact', styles: [ [Object] ] },
  { family: 'Ink Free', styles: [ [Object] ] },
  { family: 'Javanese Text', styles: [ [Object] ] },
  { family: 'DFKai-SB', styles: [ [Object] ] },
  { family: 'Leelawadee UI', styles: [ [Object], [Object], [Object] ] },
  {
    family: 'Latin Modern Roman',
    styles: [ [Object], [Object], [Object], [Object] ]
  },
  { family: 'Lucida Console', styles: [ [Object] ] },
  { family: 'Lucida Sans Unicode', styles: [ [Object] ] },
  { family: 'Malgun Gothic', styles: [ [Object], [Object], [Object] ] },
  { family: 'Marlett', styles: [ [Object] ] },
  { family: 'Microsoft Sans Serif', styles: [ [Object] ] },
  { family: 'MingLiU', styles: [ [Object] ] },
  { family: 'MingLiU-ExtB', styles: [ [Object] ] },
  { family: 'Myanmar Text', styles: [ [Object], [Object] ] },
  { family: 'Mongolian Baiti', styles: [ [Object] ] },
  { family: 'MS Gothic', styles: [ [Object] ] },
  {
    family: 'Microsoft JhengHei',
    styles: [ [Object], [Object], [Object] ]
  },
  {
    family: 'Microsoft YaHei',
    styles: [ [Object], [Object], [Object] ]
  },
  { family: 'Microsoft Yi Baiti', styles: [ [Object] ] },
  { family: 'MV Boli', styles: [ [Object] ] },
  {
    family: 'Myriad Pro',
    styles: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object]
    ]
  },

  ...

请注意每个条目中的family字段。我从这个字段中输入了一个值,文本可以正确呈现。
例如,可以通过以下语句设置字体:

context.font = "50px Comic Sans MS";    // `Comic Sans MS` is a value of the `family` field in `GlobalFonts`

我们最喜欢的字体的文本将呈现在最终图像上。

相关问题