无法使用 Express Application Framework 初始化画布元素答案

【问题标题】：Could not initialize canvas element using Express Application Framework无法使用 Express Application Framework 初始化画布元素
【发布时间】：2017-01-15 15:26:07
【问题描述】：

只是在这个上旋转我的轮子。我正在尝试进入 node.js/fabric/express 世界，但似乎无法越过“无法初始化画布元素”的这堵墙。

我使用生成器创建了一个新的 express.js 应用程序： https://expressjs.com/en/starter/generator.html

下面是一个简单的工作示例，说明了我试图在我的 express 应用程序框架中完成的工作： https://jsfiddle.net/6dcgakb6/

除了为客户端 javascript 添加 jquery 和 public/javascripts/myApp.js 文件外，我还没有触及大多数自动生成的文件。在这个文件中，我认为我遇到了问题，或者我不理解基本原则。

我按顺序在我的 HTML 布局的<head> 中包含脚本 jquery.js、fabric.js 和 myApp.js。我将路由添加到 routes/index.js 以便我可以使用 <script src="fabric/fabric.js"> 包含它们。

router.get('/jquery/jquery.js', function(req, res, next) {
  res.sendFile(path.resolve(appDir + '/../node_modules/jquery/dist/jquery.min.js'));
});

router.get('/fabric/fabric.js', function(req, res, next) {
  res.sendFile(path.resolve(appDir + '/../node_modules/fabric/dist/fabric.js'));
});

正文只包含一个<canvas id="c"></canvas> 元素。

然后，在 myApp.js 中：

$(document).ready(function(){ 
    var canvas = new fabric.Canvas('c');                                                                                                                                                            
    var rect = new fabric.Rect({                                                                                                                                                  
      left: 100,                                                                                                                                                                  
      top: 100,
      fill: 'red',
      width: 20,                                                                                                                                                                  
      height: 20,                                                                                                                                                                 
      angle: 45                                                                                                                                                                   
    });                                                                                                                                                                           

    canvas.add(rect);
});

访问页面时，我收到错误消息：

jquery.js:2 Uncaught Error: Could not initialize `canvas` element
    (anonymous function) @ fabric.js:5989
    (anonymous function) @ fabric.js:7633

玩了一会儿，我确实发现我可以运行var canvasEl = fabric.document.createElement('canvas')而没有任何错误。我也可以毫无错误地运行var canvas = new fabric.Canvas();（注意缺少的构造函数参数值'c'）。

我真的很感激在这方面的一些帮助。同样，我想知道我是否遗漏了使用 express 框架包含和初始化客户端 JavaScript 的关键设计原则，或者我是否遗漏了其他一些非常简单的东西。

我一直在寻找解决方案，但没有成功。以下是我在此过程中发现的一些有趣的链接，以防它们对其他人有所帮助。

https://github.com/kangax/fabric.js/issues/573 https://groups.google.com/forum/#!topic/fabricjs/Qix_Z-2AJ2o

【问题讨论】：

标签： node.js express canvas fabricjs

【解决方案1】：

面部护理

好吧，这是一个类型-o。我写了<cavnas id="c"> 而不是<canvas id="c">。

【讨论】：