Fabric.JS с Node.JS - экспорт в формате PNG / JPEG - PullRequest
Новая
       16

Fabric.JS с Node.JS - экспорт в формате PNG / JPEG

0 голосов
/ 15 мая 2018

Так что я просто возиться с 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 подойдет.Любой распространенный формат на самом деле.

1 Ответ

0 голосов
/ 15 мая 2018

Нашел ответ.canvas.createPNGStream().pipe(fs.createWriteStream(__dirname + "/output.png")) действительно работает.Причина, по которой он был совершенно пустым, в том, что похоже, что canvas.add() не мгновенное действие.Все, что я сделал, чтобы выяснить это, было setTimeout() перед выводом файла.Надеюсь, это кому-нибудь поможет!

...