NodeJs Canvas 没有出现答案

【问题标题】：NodeJs Canvas does not appearNodeJs Canvas 没有出现
【发布时间】：2020-11-06 10:35:18
【问题描述】：

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

npm install canvas --save

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

const { createCanvas } = require('canvas')
const width = 1200
const height = 600

const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')

context.fillStyle = '#fff'
context.fillRect(0, 0, width, height)

【问题讨论】：

您好，您正在使用的包的npm 页面的示例代码中写的内容不止于此。在示例代码中，我看到它将过程保存到 jpg 文件中。 npmjs.com/package/canvas
``` loadImage('examples/images/lime-cat.jpg').then((image) => { ctx.drawImage(image, 50, 0, 70, 70); 控制台.log('') }) ```
我想知道是否需要一个 HTML 文件来显示图像

标签： javascript node.js node-canvas

【解决方案1】：

这个包为我们提供了一个基于 Node.js 的 Canvas API 实现，我们在浏览器中了解并喜爱它。

除了从<canvas> HTML 元素中获取 Canvas 实例，我们加载库，从中获取函数 createCanvas。

例子：

const { createCanvas, loadImage } = require('canvas')
const canvas = createCanvas(200, 200)
const ctx = canvas.getContext('2d')

ctx.rotate(0.1)
ctx.fillText('Awesome!', 50, 100)
 
// Draw line under text
var text = ctx.measureText('Awesome!')
ctx.strokeStyle = 'rgba(0,0,0,0.5)'
ctx.beginPath()
ctx.lineTo(50, 102)
ctx.lineTo(50 + text.width, 102)
ctx.stroke()
 
// Draw cat with lime helmet
loadImage('./imgs.jpg').then((image) => {
  ctx.drawImage(image, 50, 0, 70, 70)
 
  console.log('<img src="' + canvas.toDataURL() + '" />')
})

【讨论】：

是的，谢谢你，当我运行这个时，终端中没有任何事情发生我想出现输出窗口。它根本不出现
我已经更新了我的答案！现在检查你会得到base64 of png。

【解决方案2】：

如果您使用的是 Windows，则需要按照其 GitHub 上的安装步骤进行操作：
https://github.com/Automattic/node-canvas/wiki/Installation:-Windows

构建 node-canvas 模块需要：

node-gyp 的全局安装。
GTK 2
对于可选的 JPEG 支持（node-canvas 2.0 及更高版本）：libjpeg-turbo

如果您使用任何其他操作系统，您可以在编译部分的自述文件中找到适用于您操作系统的说明：
https://github.com/Automattic/node-canvas

【讨论】：