我正在使用 Fabric.JS 进行 Node.JS 的开发,而不是用在网页上。我已经成功创建了一个静态画布并在上面添加了一个矩形。现在是导出的时候了。以下是我的代码:
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)
我是否遗漏了什么?这些方法似乎都不起作用,这已经是我在Google上找到的所有信息了。导出图像的正确方式是什么?它可以是PNG或JPEG/JPG,最好是PNG,但JPEG/JPG也行。任何常用格式都可以。
var canvas = fabric.createCanvasForNode(200, 200);
教程中有完整的代码,请尝试。 - Durgafabric.createCanvasForNode
错误的注释。 - APixel Visualsnew fabric.StaticCanvas(null, {width: 200, height: 200})
这个会起作用。我会检查剩下的部分,并让你知道。 - Durgafabric.Canvas
的工作方式与StaticCanvas
完全相同。 - APixel Visuals