如何在 Node Canvas 中向图像添加文本？

Question

所以我一直在查看 discord.js 文档并尝试制作带有图像处理的个人资料卡，但由于某种原因，文本显示为小方框。这是代码：


      if (message.content === `-profile`) {\
        const Canvas = require(`canvas`);
        const canvas = Canvas.createCanvas(700, 250);
        const ctx = canvas.getContext('2d');

        const background = await Canvas.loadImage('./image.png');
        ctx.drawImage(background, 0, 0, canvas.width, canvas.height);

        ctx.strokeStyle = '#74037b';
        ctx.strokeRect(0, 0, canvas.width, canvas.height);

        ctx.font = '100px sans-serif';
        // Select the style that will be used to fill the text in
        ctx.fillStyle = '#34ebc9';
        // Actually fill the text with a solid color
        ctx.fillText(message.author.displayName, canvas.width / 2.5, canvas.height / 1.8);

        ctx.beginPath();
        ctx.arc(125, 125, 100, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.clip();

        const avatar = await Canvas.loadImage(message.author.displayAvatarURL({ format: 'jpg' }));
        ctx.drawImage(avatar, 25, 25, 200, 200);

        const attachment = new Discord.MessageAttachment(canvas.toBuffer(), 'welcome-image.png');

        message.channel.send(`Your profile, ${message.author}!`, attachment);
    }

图像和我的个人资料照片都显示了，但由于某种原因，文字要么没有显示，要么全乱了。请帮忙

Answer 1

您的设备可能没有 Canvas 正在寻找的任何默认文件。你需要自己手动安装这些字体，你可以从Google Fonts.

获得一些

将您安装的字体导入您的文件并使用registerFont()注册和使用字体

//Assume you imported your font in your main folder
const { registerFont, createCanvas } = require('canvas')
registerFont('./comicsans.ttf', { family: 'Comic Sans' })

const canvas = createCanvas(500, 500)
const ctx = canvas.getContext('2d')

ctx.font = '12px "Comic Sans"'
ctx.fillText('Everyone hates this font :(', 250, 10)

如何在 Node Canvas 中向图像添加文本？

How do I add text to a image in Node Canvas?

image-manipulation

discord.js