Databases
StackOverflow2013
Postsdbo
POUsing fabric.js to render and manipulate server-side canvas in node.js
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing fabric.js to render and manipulate server-side canvas in node.js
    primarykey
    data
    text
    <p>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 <code>canvas.toJSON()</code> method. When I try to reload the canvas using just that JSON, it works great (utilizing <code>canvas.loadFromJSON()</code>). </p> <h3>You can see the entire example <a href="http://jsfiddle.net/4Vgce/" rel="nofollow">in this fiddle</a>.</h3> <p>(if it doesn't work, then the image probably expired - replace the link). </p> <p>I then try to do the exact same thing on the server side using this simple script:</p> <pre><code>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); }); </code></pre> <p>I get a strange crash when I run this script (using <code>node script.js</code> or <code>require('./script.js') from inside node</code>):</p> <pre><code>&gt; 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) </code></pre> <p>The canvas has a single image in it courtesy of interwebs' kitten collection, and one text item.</p> <p>I'm fairly new to node, so perhaps I've missed something along the way - any tips will be great. Thanks.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USsa125
    1. USsa125
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COWhich versions of node and node-canvas do you have? Have you also followed node-canvas installation notes? https://github.com/LearnBoost/node-canvas/wiki/Installation---Ubuntu
      singulars
      1. POUsing fabric.js to render and manipulate server-side canvas in node.js
      1. USkangax
    2. COI'm using canvas 0.13.1, node 0.8.16 and fabric 0.9.21 on Ubuntu 12.04. I followed the instructions and re-installed again just to be sure, and still the same outcome. Are you able to run my code with your setup (assuming same versioning)? thanks!
      singulars
      1. POUsing fabric.js to render and manipulate server-side canvas in node.js
      1. USsa125
    3. COWell, this is pretty bizarre... Narrowed this down to the fact that `http.request` now has a different signature (apparently in Node 0.8.x). I thought we're using 0.8 on production, which makes me wonder how do things still work. Anyway, replacing `request` method with this seems to do it — https://gist.github.com/600934872f28397e6350. I'll look into this a bit more and update Fabric itself.
      singulars
      1. POUsing fabric.js to render and manipulate server-side canvas in node.js
      1. USkangax
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload