使用fabric.js渲染和操作node.js中的服务器端画布 [英] Using fabric.js to render and manipulate server-side canvas in node.js

问题描述

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

I'm trying to use fabric.js (v0.9.21, installed via npm on ubuntu 12.04) with node.js to render a canvas on the server (which can later be manipulated and extended without clientside interaction). To experiment, I've created a simple canvas on the clientside, and then exported it to JSON using canvas.toJSON() method. When I try to reload the canvas using just that JSON, it works great (utilizing canvas.loadFromJSON()).

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

(if it doesn't work, then the image probably expired - replace the link).

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

I then try to do the exact same thing on the server side using this simple script:

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')从节点内部)时，出现奇怪的崩溃:/p>

I get a strange crash when I run this script (using node script.js or 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)

该画布上有一张图像是由interwebs的小猫收藏提供的，还有一个文本项.

The canvas has a single image in it courtesy of interwebs' kitten collection, and one text item.

我对Node还是很陌生，所以也许我一路上错过了一些东西-任何技巧都很棒.谢谢.

I'm fairly new to node, so perhaps I've missed something along the way - any tips will be great. Thanks.

推荐答案

我认为问题在于您正在尝试在将图像添加到画布之前渲染画布.以我为例，在回调中调用renderAll()来loadFromJSON()解决了这个问题.

I think the issue is that you are trying to render the canvas before the image is added to the canvas. In my case calling renderAll() in the callback to loadFromJSON() solved the issue.

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

或

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

这将确保仅在将json数据加载到画布中之后才渲染画布

This will ensure that canvas is rendered only after the json data has beed loaded into the 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>

这篇关于使用fabric.js渲染和操作node.js中的服务器端画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！