Canvas 中不显示字符

Posted 2023-03-14

【中文标题】Canvas 中不显示字符

【英文标题】：Characters are not displayed in Canvas

【发布时间】：2021-05-18 10:22:58

【问题描述】：

当我尝试使用 Canvas 在图片上显示文本时，某些字符和表情符号在 Windows 和 Ubuntu 上显示不正确。 1 个屏幕 - 在 Windows 上，2 个屏幕 - 在 Ubuntu 上。对于任何字体，情况都是如此。在 Windows 上画布，在 Ubuntu 上画布，我刚刚通过 npm install canvas 安装。

窗户

Ubuntu

代码：

const canvas = Canvas.createCanvas(1000,333)
const ctx = canvas.getContext('2d');
        
const background = await Canvas.loadImage('https://i.imgur.com/YzwG7yk.jpeg')
ctx.drawImage(background, 0, 0, canvas.width, canvas.height)
ctx.font = '300 30px "Arial"'
ctx.fillStyle = '#ffffff'
ctx.fillText(`????????????\nマークとニック\nP????????????z????k`, 70, 70)
const attachment = new Discord.MessageAttachment(canvas.toBuffer(), 'xp.png');
return message.channel.send(attachment)

【问题讨论】：

这段代码是什么？它不是在浏览器中运行的东西。

我认为您的问题与默认编码有关；你可以尝试用对应的unicode字符代码替换所有的chatacters（例如????变成\u1f497）

@mplungjan，我在 discord js 中使用它

@secan，没有帮助

【参考方案1】：

您需要在服务器上安装能够呈现这些字形的字体。 如果您无法控制服务器上的字体，您可以使用registerFont 加载网络字体

Live example.

【讨论】：

我知道registerFont，但现在问题不同了

现在问题怎么样了？实际上，如果问题不同，这个问题是固定的，打开一个新问题。

如果我使用默认字体，这里是 registerFont 吗？即使我使用 registerFont，问题仍然存在。也许有些字体不会出现这样的问题？

@Mokcemka 您需要注册将处理这些字形的字体，就像答案中写的一样。检查链接的glitch example，我在其中加载了 Adob​​e 的 EmojiOneColor 字体。如果没有registerFont 行，心形字形将无法呈现。在您的情况下，您还需要为片假名和平假名字形注册一种字体，故障的默认设置已经有一个系统范围。

regiserFont 有效，但仍不能显示所有字符。我也试过你的字体，但没有帮助。我还看到您使用了“Arial”字体并且它有效。我为自己发现了一个新奇事物，在 Windows 上它显示所有符号的默认字体“Tahoma”，但是当我尝试在 Ubuntu 上使用这种字体时，它也没有显示所有符号。在你看来可能是什么问题？或者也许我不完全理解某些东西？我将 Canvas 用于 discord-js