使用fabric.js渲染和操作node.js中的服务器端canvas
我试图在node.js上使用fabric.js（v0.9.21，通过npm在Ubuntu 12.04上安装）来渲染服务器上的canvas（稍后可以在没有客户端交互的情况下进行操作和扩展）。 为了进行实验，我在客户端创build了一个简单的canvas，然后使用canvas.toJSON()方法将其导出到JSON。 当我尝试使用那个JSON重新加载canvas时，它工作得很好（利用canvas.loadFromJSON() ）。
你可以在这个小提琴中看到整个例子。
（如果它不起作用，那么图像可能已过期 – replace链接）。
然后我尝试使用这个简单的脚本在服务器端做同样的事情：
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') from inside 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的小猫收集礼貌，和一个文本项目。
我对节点相当陌生，所以也许我错过了一些东西 – 任何提示都会很棒。 谢谢。
我认为这个问题是，你正试图在图像被添加到canvas之前渲染canvas。 在我的情况下调用renderAll（）在loadFromJSON（）的callback中解决了这个问题。
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>