正确安装后，fabric JS 未在节点上运行

Posted 2023-03-25

【中文标题】正确安装后，fabric JS 未在节点上运行

【英文标题】：fabric JS not running on node after installing correctly

【发布时间】：2018-07-27 22:43:09

【问题描述】：

我想在节点服务器上使用 fabric js 来生成 SVG 图像。我按照说明在 mac 环境中的节点上运行 fabric js。我正在尝试从 nodejs 示例下的结构 js 文档中运行 hello world 结构应用程序。

如果我在节点 shell 中运行 typeof require('canvas');。根据fabricjs documentation，它应该返回“功能” 运行typeof require('fabric'); 也应该返回object。我很确定我正确安装了依赖项，但不完全确定为什么代码没有按预期运行。

但是，运行代码会导致此错误：TypeError: fabric.createCanvasForNode is not a function

这是我要运行的代码。

我将我的 python 版本更改为 2.7 并且节点是 v 9.2.0 。感谢所有帮助！

var fs = require('fs'),
    fabric = require('fabric').fabric,
    out = fs.createWriteStream(__dirname + '/helloworld.png');

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

var text = new fabric.Text('Hello world', 
  left: 100,
  top: 100,
  fill: '#f55',
  angle: 15
);
canvas.add(text);

var stream = canvas.createPNGStream();
stream.on('data', function(chunk) 
  out.write(chunk);
);

【参考方案1】：

Dez 的回答几乎让我满意，但这不是一个完全有效的例子。至少对我来说不是。这是我在深入研究该主题后得到的结果：

const  fabric  = require("fabric");
const canvas = new fabric.Canvas(null, width: 500, height: 500);

const fs = require("fs");
const stream = canvas.createPNGStream();
const out = fs.createWriteStream("test.png");

var text = new fabric.Text("Hello world", 
  left: 100,
  top: 100,
  fill: "#f55",
  angle: 15
);

canvas.add(text);

canvas.renderAll();

stream.on('data', function(chunk) 
  out.write(chunk);
);

【讨论】：

获取“无法在 klass._setImageSmoothing 处读取属性 'imageSmoothingEnabled' 的 null ”...

您使用的是哪个版本的节点画布？确保使用 1.6.x，而不是 2。

我认为是 2。但最近的 fabric.js 需要 node-canvas 2，不是吗？

不，遗憾的是它仍然需要您使用 node-canvas 1.6.x。您可以通过检查 package.json 文件来检查版本。

【参考方案2】：

看到您遇到的问题，我知道您使用的是 2.0.0 以上的版本，并且自从上述版本以来，他们似乎已经弃用了 createCanvasForNode 方法。 您可以通过评估 fabric 导入轻松确认这一点，并看到该方法不再可用。

从现在开始，您可以使用fabric.Canvas 或fabric.StaticCanvas。

var fs = require('fs'),
    fabric = require('fabric').fabric,
    out = fs.createWriteStream(__dirname + '/helloworld.png');

var canvas = new fabric.Canvas(200, 200);
// or either var canvas = new fabric.StaticCanvas(200, 200);

var text = new fabric.Text('Hello world', 
  left: 100,
  top: 100,
  fill: '#f55',
  angle: 15
);
canvas.add(text);

var stream = canvas.createPNGStream();
stream.on('data', function(chunk) 
  out.write(chunk);
);

参考1：https://github.com/kangax/fabric.js/issues/3885

参考2：https://github.com/kangax/fabric.js/issues/4586

【讨论】：

嘿！感谢您的答复。应用您的更改让我进入了函数调用，但在 fabric.js:6840 this.contextContainer = this.lowerCanvasEl.getContext('2d'); TypeError: this.lowerCanvasEl.getContext is not a function 失败了知道为什么会发生这种情况吗？

也许你应该看看如何使用新的库版本，如果仍然有问题，请打开一个新问题。如果库发生了巨大变化，您将无法遵循相同的路径。