Question

我正在尝试在我的React项目中使用canvas。我已经使用npm install canvas --save

安装了画布

当我尝试启动我的服务器时，我得到了一个奇怪的错误，我无法弄清楚它来自哪里......

TypeError: Cannot set property 'parseFont' of undefined
./node_modules/canvas/lib/context2d.js
node_modules/canvas/lib/context2d.js:49
  46 |  * @api private
  47 |  */
  48 | 
> 49 | var parseFont = exports.parseFont = function(str) {
  50 |   var parsedFont;
  51 | 
  52 |   // Try to parse the font string using parse-css-font.
View compiled
__webpack_require__
/home/lucas/Bureau/test/webpack/bootstrap faf0efc1b256fd6e0167:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
/home/lucas/Bureau/test/webpack/bootstrap faf0efc1b256fd6e0167:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
(anonymous function)
node_modules/canvas/lib/canvas.js:17
  14 | , Canvas = canvas.Canvas
  15 | , Image = canvas.Image
  16 | , cairoVersion = canvas.cairoVersion
> 17 | , Context2d = require('./context2d')
  18 | , PNGStream = require('./pngstream')
  19 | , PDFStream = require('./pdfstream')
  20 | , JPEGStream = require('./jpegstream')
View compiled
./node_modules/canvas/lib/canvas.js
http://localhost:3000/static/js/bundle.js:8904:30
__webpack_require__
/home/lucas/Bureau/test/webpack/bootstrap faf0efc1b256fd6e0167:678

我正在使用Ubuntu 16.04，我在安装canvas时也有一些警告：

> canvas@1.6.7 install /home/lucas/Bureau/test/node_modules/canvas
> node-gyp rebuild

make : on entre dans le répertoire « /home/lucas/Bureau/test/node_modules/canvas/build »
  SOLINK_MODULE(target) Release/obj.target/canvas-postbuild.node
  COPY Release/canvas-postbuild.node
  CXX(target) Release/obj.target/canvas/src/Canvas.o
  CXX(target) Release/obj.target/canvas/src/CanvasGradient.o
  CXX(target) Release/obj.target/canvas/src/CanvasPattern.o
  CXX(target) Release/obj.target/canvas/src/CanvasRenderingContext2d.o
  CXX(target) Release/obj.target/canvas/src/color.o
  CXX(target) Release/obj.target/canvas/src/Image.o
  CXX(target) Release/obj.target/canvas/src/ImageData.o
  CXX(target) Release/obj.target/canvas/src/init.o
  CXX(target) Release/obj.target/canvas/src/FontFace.o
  SOLINK_MODULE(target) Release/obj.target/canvas.node
  COPY Release/canvas.node
make : on quitte le répertoire « /home/lucas/Bureau/test/node_modules/canvas/build »
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules/react-scripts/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ canvas@1.6.7
added 230 packages in 17.478s

我已按照Git说明安装了所说的安装内容，但我无法确定它的来源。

Answer 1

要点：您无法在React应用程序中使用它的原因正是因为

您将无法在浏览器中使用此模块，因为它与其他编译库一起使用C ++构建。

LinusU于2016年1月28日发表评论参考：https://github.com/Automattic/node-canvas/issues/284

深入挖掘：在 canvas / lib / context2d.js 中，Context2d将在浏览器中 undefined 。

我们从Context2d = canvas.CanvasRenderingContext2d和

看到了这一点

自canvas = require('./bindings')和。{ canvas / lib / bindings.js 需要.node文件，特别是 canvas.node ，来自module.exports = require('../build/Release/canvas.node');

它无法在浏览器中正确加载。

......除非有人建造垫片

有人讨论过将一个浏览器字段添加到package.json但是有一个小垫片，我认为还有另一个软件包包装了当前...

与上面相同的Github线程

希望这可以节省一些人用这个问题的时间！

画布和context2d npm

1 个答案: