问题标签 [node-canvas]

我正在使用以下代码安装节点 js 画布 API：

我已经编写了用于显示画布的代码，但它没有显示任何内容。该代码在执行时不显示错误：

我想在画布上居中文本。水平看起来不错，但垂直仍然是一个问题：我不知道如何以编程方式做到这一点。

我以前可以用 1 行来做到这一点，但现在我想让它适用于多行文本。

现在的图像如下所示：

文本应该定位得更高一点，还是我弄错了？

这是代码：

应该对齐文本的关键函数drawMultiLineText是这个：

我不在浏览器中，我正在使用 node.js。

我正在为 node.js 使用 canvas 包

它在我的电脑上运行良好，但是每当我将它部署到 heroku 时，我总是会收到一个错误，这就是我得到的

我试过这个教程，但它没有工作 https://github.com/Automattic/node-canvas/wiki/Installation%3A-Heroku

这是我的 package.json

我正在尝试使用https://www.npmjs.com/package/chartjs-node-canvas绘制图表，但标签的字母间距很奇怪，而且看起来间距太大。

下图左侧是在浏览器上使用 chart.js 绘制的图表，右侧是使用 chartjs-node-canvas 绘制的图表。你可以看到标签是唯一真正让你失望的东西。

我在这里发现了一个类似的问题Chart.js 字母间距非常尴尬，但没有关于该问题的答案，所以希望有人有解决方案。

我已经尝试canvas.styles.letterSpacing直接在节点库中调整画布，但到目前为止还没有奏效。

还有其他人有什么想法吗？

首先，这可能措辞很糟糕，因为我不确定如何将我想要的内容表达
出来 假设我有这个画布（我正在使用node-canvas）并且我想让它显示来自用户输入的文本。但是，我这样做的方式将字符数限制为 36-38（不是在寻找解决方案）。因此，我使用正则表达式制作了一个脚本，该脚本textstr.match(/.{1,32}/g)每 32 个字符拆分一次字符串（为了安全起见），计算一个新的画布高度，然后join("\n")在打印字符串时执行此操作。然而，当收到对此的反馈时，我意识到最好沿着字符串中的最后一个空格分割并在那里添加一个换行符，但我很困惑如何做到这一点。
我目前的代码是这样的：

我想知道是否有某种可以使用的正则表达式。任何帮助/反馈/常识表示赞赏

我想在 Node.JS 中生成一些图像，将它们编译成视频并将它们流式传输到 youtube。要生成图像，我正在使用 node-canvas 模块。这听起来很简单，但我想连续生成图像，并实时传输结果。我对这件事很陌生，在阅读了互联网上的大量资源后，我正在考虑做的是：

1. 打开 ffmpeg spawn('ffmpeg', ...args)，将输出设置为目标 rtmp 服务器
2. 在画布中生成图像
3. 将画布的内容转换为缓冲区，通过stdin写入ffmpeg进程
4. 在 Youtube 上享受结果

但事情并没有那么简单，不是吗？我看到人们分享他们的代码，涉及在浏览器上运行的客户端 JS，但我希望它是一个 Node 应用程序，以便我可以从远程 VPS 运行它。有没有办法让我做到这一点，而无需在浏览器中使用 p5 之类的东西并捕获窗口以重新流式传输它？我的思维过程是否足够？现在我并不真正关心性能/资源的使用。提前致谢。

编辑：

我研究了一段时间，但我无法让它工作......这是我的代码：

我没有收到任何错误，也没有从中获得任何视频数据。我已经设置了一个可以连接的 rtmp 服务器，然后使用 VLC 获取流，但我没有得到任何视频数据。难道我做错了什么？我环顾了一段时间，似乎找不到任何人尝试过这个，所以我真的不知道......

编辑 2：显然我走在正确的轨道上，但我的方法只是给了我 2 秒的“好”视频，然后它开始变得块状和混乱。我认为，很可能，我生成图像的方法太慢了。我将尝试使用一些 GPU 加速代码来生成图像，而不是使用画布，这意味着我将一直在做分形，因为我不知道如何用它做任何其他事情。此外，ffmpeg 中更大的缓冲区也可能有帮助

代码：

当我执行生成图像的命令时，机器人给出的图像只有背景可见，而不是来自 w3.org
控制台的 HTML5 徽标没有给出任何错误..

我正在使用节点画布实现 https://github.com/Automattic/node-canvas

我用它把一个时事通讯设计的 jpg 导出切割成切片，并生成一个基于图像的 HTML 模板，该模板对电子邮件友好。本质上，它只是根据我的电子邮件要求从源代码中截取大约 550 像素的切片。

问题是当我加载源 jpg 文件时，我在导出的切片中看到了一些损失。这是一个例子：

源与导出示例

如您所见，右侧的版本（源 - jpg）比节点画布处理的版本更清晰，质量更好。

我已经在我的所有 toDataUrl 调用中以全质量使用导出 jpg，而不是规范中的 0.92。我正在使用节点画布提供的 loadImage 功能，那里可能会失去质量吗？

this.writeImage(canvas.toDataURL('image/jpeg', 1.0), i);

另外，我已经加强了上下文的质量设置：

我在想也许我没有正确使用上面的那些设置？或者，也许，错过了一个？

飞来飞去的想法之一就是将源放大2倍，然后在处理时调整大小，以保持原始jpeg质量。

我的问题是，我能做些什么来防止加工过程中的质量损失？在应用了所有步骤的过程结束时获得较低质量的图像是没有意义的，但是......

非常感谢你，德拉戈斯。

后期编辑：

我实际上问错了问题，我使用的来源实际上是 PNG，正是因为我希望我的 jpeg 导出质量很高。出口显然不如原始 PNG，但我以 JPG 形式获得了源，但与我可能使用的潜在JPG 相比，它仍然有损失，但从技术上讲，我是从 PNG 中删除的。

通常我通过使用将 png 图像导入 Canvas

但是当我尝试导入 webp 图像时，我收到一条错误消息，指出不支持 webp。在对节点画布问题的研究中，我发现了这个问题，导入问题似乎已解决，但我现在不明白如何导入 webp 图像。

我尝试使用问题修复中的 Image, ImageFromBuffer(await fetch(url).buffer()) ，但都给出错误。

我有一个 discord.js 机器人，它在 Heroku 上运行。我刚刚添加了画布，现在机器人无法构建。

这是日志：

我已经按照日志的建议安装了 node-pre-gyp，没有任何改变。这是 package.json：

有谁知道解决这个问题？