node.js - 使用fabric.js在node.js中渲染和操作服务器端 Canvas

Question

我正在尝试将fabric.js(v0.9.21，在ubuntu 12.04上通过npm安装)与node.js一起使用来在服务器上渲染 Canvas (稍后可以在没有客户端交互的情况下进行操作和扩展)。为了进行实验，我在客户端创建了一个简单的 Canvas ，然后使用 canvas.toJSON() 方法将其导出为 JSON。当我尝试仅使用该 JSON 重新加载 Canvas 时，效果很好(利用 canvas.loadFromJSON())。

您可以看到整个示例 in this fiddle .

(如果不起作用，则图像可能已过期 - 替换链接)。

然后我尝试使用这个简单的脚本在服务器端执行完全相同的操作:

var fabric = require('fabric').fabric;
var fs     = require('fs');
var canvas = fabric.createCanvasForNode(570, 600);

fs.readFile('kitty.json', 'utf8', function(err, data) {
  canvas.loadFromJSON(data);
});

当我运行此脚本时，我遇到了奇怪的崩溃(使用 node script.js 或 require('./script.js') 从 Node 内部):

> http.createClient is deprecated. Use `http.request` instead.

/usr/lib/node_modules/fabric/dist/all.js:12429
      ctx.drawImage(
          ^
Error: Image given has not completed loading
    at klass.fabric.Image.fabric.util.createClass._render (/usr/lib/node_modules/fabric/dist/all.js:12429:11)
    at klass.fabric.Image.fabric.util.createClass.render (/usr/lib/node_modules/fabric/dist/all.js:12303:12)
    at klass.(anonymous function) [as render] (/usr/lib/node_modules/fabric/dist/all.js:2405:48)
    at extend._draw (/usr/lib/node_modules/fabric/dist/all.js:5332:16)
    at extend.renderAll (/usr/lib/node_modules/fabric/dist/all.js:5468:16)
    at extend.insertAt (/usr/lib/node_modules/fabric/dist/all.js:5381:37)
    at fabric.util.object.extend._enlivenObjects (/usr/lib/node_modules/fabric/dist/all.js:7694:15)
    at Array.forEach (native)
    at fabric.util.object.extend._enlivenObjects (/usr/lib/node_modules/fabric/dist/all.js:7693:24)
    at onLoaded (/usr/lib/node_modules/fabric/dist/all.js:1995:11)

Canvas 上有一张由 interwebs 的小猫收藏提供的图像和一个文本项。

我对 Node 还很陌生，所以也许我一路上错过了一些东西 - 任何提示都会很棒。谢谢。

Answer 1

我认为问题在于您试图在将图像添加到 Canvas 之前渲染 Canvas 。在我的例子中，在 loadFromJSON() 的回调中调用 renderAll() 解决了这个问题。

canvas.loadFromJSON(JSON.stringify(json),canvas.renderAll.bind(canvas));

或

canvas.loadFromJSON(JSON.stringify(json),canvas.renderAll());

这将确保只有在 json 数据加载到 Canvas 后才渲染 Canvas

var canvas = new fabric.Canvas('mycanvas');
var json = {
  "objects": [{
    "type": "image",
    "left": 300,
    "top": 295,
    "width": 500,
    "height": 375,
    "fill": "rgb(0,0,0)",
    "overlayFill": null,
    "stroke": null,
    "strokeWidth": 1,
    "strokeDashArray": null,
    "scaleX": 1,
    "scaleY": 1,
    "angle": 0,
    "flipX": false,
    "flipY": false,
    "opacity": 1,
    "selectable": true,
    "hasControls": true,
    "hasBorders": true,
    "hasRotatingPoint": false,
    "transparentCorners": true,
    "perPixelTargetFind": false,
    "src": "http://t3.gstatic.com/images?q=tbn:ANd9GcTE0NOJqQ46En2x1T61cZf_S4RwxOTtxcLsmfQUHkSXk5SOx-zaYnPj6jYI",
    "filters": []
  }, {
    "type": "text",
    "left": 300,
    "top": 537,
    "width": 116,
    "height": 57.6,
    "fill": "rgb(0,0,0)",
    "overlayFill": null,
    "stroke": null,
    "strokeWidth": 1,
    "strokeDashArray": null,
    "scaleX": 1,
    "scaleY": 1,
    "angle": 0,
    "flipX": false,
    "flipY": false,
    "opacity": 1,
    "selectable": true,
    "hasControls": false,
    "hasBorders": true,
    "hasRotatingPoint": false,
    "transparentCorners": true,
    "perPixelTargetFind": false,
    "text": "Kitten!",
    "fontSize": 12,
    "fontWeight": 400,
    "fontFamily": "Lato",
    "fontStyle": "",
    "lineHeight": 1.2,
    "textDecoration": "",
    "textShadow": "",
    "textAlign": "center",
    "path": null,
    "strokeStyle": "",
    "backgroundColor": "",
    "textBackgroundColor": "",
    "useNative": true
  }],
  "background": "rgba(0, 0, 0, 0)"
};
canvas.loadFromJSON(JSON.stringify(json), canvas.renderAll.bind(canvas));

#mycanvas {
  border: 1px solid black;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js"></script>
<canvas id="mycanvas" width="570" height="600"></canvas>