Fabric.JS 与 Node.JS - 导出为 PNG/JPEG

Posted 2023-03-25

【中文标题】Fabric.JS 与 Node.JS - 导出为 PNG/JPEG

【英文标题】：Fabric.JS with Node.JS - Exporting as PNG/JPEG

【发布时间】：2018-10-24 20:47:09

【问题描述】：

所以我只是在弄乱 Fabric.JS 用于 Node.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)
)

---

//Causes a crash
canvas.createJPEGStream().on("data", function (chunk) 
  fs.createWriteStream(__dirname + "/output.jpeg").write(chunk)
)

Error:
C:\Users\me\Documents\my project\node_modules\canvas\lib\jpegstream.js:44
    canvas[method](options.bufsize, options.quality, options.progressive, function(err, chunk)
                  ^

TypeError: canvas[method] is not a function
    at C:\Users\me\Documents\my project\node_modules\canvas\lib\jpegstream.js:44:19
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

---

//Same thing as first try^^, except it's a JPEG
canvas.createJPEGStream(quality: 100).pipe(fs.createWriteStream(__dirname + "/output.jpeg"))

---

//This one makes the PNG file, but when it's opened, its 100% transparent. That's it. The rectangle I added isn't there. Canvas size is correct, however
canvas.createPNGStream().pipe(fs.createWriteStream(__dirname + "/output.png"))

---

注意：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 也可以。任何常见的格式。

【问题讨论】：

检查这个tutorial Node.js 上的Fabric

@Durga 是的，我已经尝试过 PNGStream（问题中的尝试 1）

要创建画布，请使用var canvas = fabric.createCanvasForNode(200, 200);，该教程中有总代码尝试。

@Durga 刚刚编辑了我的问题，在底部有一个关于错误fabric.createCanvasForNode 原因的注释

我明白了，它已被删除，new fabric.StaticCanvas(null, width: 200, height: 200) 这将起作用。将检查其余部分，并让您知道。

【参考方案1】：

找到答案。 canvas.createPNGStream().pipe(fs.createWriteStream(__dirname + "/output.png")) 确实有效。它完全为空的原因是因为它看起来像canvas.add() 不是一个瞬间的动作。我所做的只是在输出文件之前输入setTimeout()。希望这对某人有帮助！

【参考方案2】：

我使用来自node-canvas 的示例代码，它可以工作

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.'))