Javascript Fabric.JS和Node.JS-导出为PNG/JPEG

因此，我只是在Node.JS中使用Fabric.JS，而不是在web中使用，我成功地制作了一个静态画布，并在其上放置了一个矩形。是时候出口了。以下是我创建画布和添加矩形的代码：

var canvas = new fabric.StaticCanvas(null, {width: 200, height: 200})
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 100,
  height: 50,
  fill: "red"
})
canvas.add(rect)

以下是我为导出图像所做的一切：

//Creates a PNG file that isn't generated correctly. It's as if it's corrupt. No program can open it
canvas.createPNGStream().on("data", function (chunk) {
  fs.createWriteStream(__dirname + "/output.png").write(chunk)
})

---

---

---

---

注意：

fabric.Canvas（null，{width:200，height:200}）

在本例中的工作方式似乎与

StaticCanvas

完全相同

注2：此代码：

var canvas = new fabric.createCanvasForNode(200, 200)

导致此错误的原因：

var canvas = new fabric.createCanvasForNode(200, 200)
             ^

TypeError: fabric.createCanvasForNode is not a constructor
    at Client.client.on.message (C:\Users\me\Documents\my project\index.js:31:14)
    at emitOne (events.js:115:13)
    at Client.emit (events.js:210:7)
    at MessageCreateHandler.handle (C:\Users\me\Documents\my project\node_modules\discord.js\src\client\websocket\packets\handlers\MessageCreate.js:9:34)
    at WebSocketPacketManager.handle (C:\Users\me\Documents\my project\node_modules\discord.js\src\client\websocket\packets\WebSocketPacketManager.js:103:65)
    at WebSocketConnection.onPacket (C:\Users\me\Documents\my project\node_modules\discord.js\src\client\websocket\WebSocketConnection.js:330:35)
    at WebSocketConnection.onMessage (C:\Users\me\Documents\my project\node_modules\discord.js\src\client\websocket\WebSocketConnection.js:293:17)
    at WebSocketClient.internalOnMessage (C:\Users\me\Documents\my project\node_modules\uws\uws.js:103:17)
    at native.client.group.onMessage (C:\Users\me\Documents\my project\node_modules\uws\uws.js:57:15)

---

---

这里有我遗漏的东西吗？这些方法似乎都不起作用，这是我在谷歌上能找到的全部。导出图像的正确方法是什么？它可以是PNG或JPEG/JPG，最好是PNG，但JPEG/JPG可以。任何常见的格式都可以。

找到了答案

canvas.createPNGStream（）.pipe（fs.createWriteStream（uu dirname+“/output.png”）

确实有效。它之所以完全为空，是因为它看起来像画布。添加（）不是即时操作。我所做的只是在输出文件之前执行一个

setTimeout（）

。希望这对别人有帮助

我使用

节点画布中的这个示例代码，它可以工作

const fs = require('fs')
const out = fs.createWriteStream(__dirname + '/test.png')
const stream = canvas.createPNGStream()
stream.pipe(out)
out.on('finish', () =>  console.log('The PNG file was created.'))

检查节点上的此结构。js@Durga是的，我已经尝试了PNGStream（问题中的尝试1）来创建canvas use
var canvas=fabric.createCanvasForNode（200200）该教程中有全部代码请尝试。@Durga刚刚编辑了我的问题，在底部有一个关于错误
fabric.createCanvasForNode
原因的注释，我看到了，它被删除了，还有
new fabric.StaticCanvas（null，{width:200，height:200}）
这将起作用。我会检查剩下的，然后告诉你。
var canvas = new fabric.createCanvasForNode(200, 200)

var canvas = new fabric.createCanvasForNode(200, 200)
             ^

TypeError: fabric.createCanvasForNode is not a constructor
    at Client.client.on.message (C:\Users\me\Documents\my project\index.js:31:14)
    at emitOne (events.js:115:13)
    at Client.emit (events.js:210:7)
    at MessageCreateHandler.handle (C:\Users\me\Documents\my project\node_modules\discord.js\src\client\websocket\packets\handlers\MessageCreate.js:9:34)
    at WebSocketPacketManager.handle (C:\Users\me\Documents\my project\node_modules\discord.js\src\client\websocket\packets\WebSocketPacketManager.js:103:65)
    at WebSocketConnection.onPacket (C:\Users\me\Documents\my project\node_modules\discord.js\src\client\websocket\WebSocketConnection.js:330:35)
    at WebSocketConnection.onMessage (C:\Users\me\Documents\my project\node_modules\discord.js\src\client\websocket\WebSocketConnection.js:293:17)
    at WebSocketClient.internalOnMessage (C:\Users\me\Documents\my project\node_modules\uws\uws.js:103:17)
    at native.client.group.onMessage (C:\Users\me\Documents\my project\node_modules\uws\uws.js:57:15)

const fs = require('fs')
const out = fs.createWriteStream(__dirname + '/test.png')
const stream = canvas.createPNGStream()
stream.pipe(out)
out.on('finish', () =>  console.log('The PNG file was created.'))