NodeJs Canvas未显示

yc0p9oo0  于 2023-04-20  发布在  Node.js
关注(0)|答案(3)|浏览(126)

我正在使用以下代码安装node js canvas 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)
5fjcxozz

5fjcxozz1#

这个包为我们提供了一个基于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() + '" />')
})
mf98qq94

mf98qq942#

如果你使用的是Windows,你需要按照他们的GitHub上的安装步骤:
https://github.com/Automattic/node-canvas/wiki/Installation:-Windows
构建node-canvas模块需要:

  1. node-gyp的全局安装。
  2. GTK 2
    1.对于可选的JPEG支持(node-canvas 2.0及更高版本):libjpeg-涡轮
    如果你正在使用任何其他操作系统,你可以在编译部分的自述文件中找到你的操作系统的说明:
    https://github.com/Automattic/node-canvas
mm9b1k5b

mm9b1k5b3#

我回复这个帖子是2岁,但我知道答案
我相信你想要一个PNG输出(一个简单的照片)。你做了正确的图像,但你忘记了导出它。下面是如何:

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

//choose here were your file must be saved
let imagepath = "images/photo.png"

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

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

//here is the new part that saves the image to a path
const out = fs.createWriteStream(imagepath),
stream = canvas.createPNGStream();
stream.pipe(out);

这个简单的脚本将保存在images/photo.png下您想要的照片。

相关问题