UPDATE June 3rd, 2015
I found that these instructions don’t always work for every distribution of Linux. I have an alternative set of instructions for installing NodeJS on Linux that has been reliable for two different Linux distributions so far.
Over the past few months I’ve been working with the HTML5 Canvas to build a product configurator that allows for multiple images, multiple text elements, a background color or pattern (image), and for one product multiple surfaces.
To implement this, I’m using the Javascript library FabricJS to make working with the Canvas a bit easier.
Contents
The Problem:
In my first iteration of the project, I implemented this so that the clients browser would use FabricJS to generate the final output high resolution image and send that to my server for saving and production. This worked great in my testing. Until I got random orders that just weren’t right… they looked so odd there was no way a customer would want to order that.
After some research I realized what was happening. The Canvas was an average size for the browser – say 300px x 200px. Big enough for the customer to do their work and get an accurate representation of what they will receive. But what I need for print production on the backend is more like a 2500px x 1600px image. And Canvas / FabricJS will output this just fine. The problem is that large image has such a large file size that I was hitting a memory limit of the clients browser – namely iOS devices. I don’t have any hard proof that Android devices were doing the same as I have limited access to them for testing at this time, but I’m assuming they have the same issue.
The Solution:
Ok, so we’ve identified a huge problem in the implementation of this…. now what? What is the solution? To be honest, it was there in the Fabric documentation all along and I kinda chose to ignore it… Kangax (the creator of FabricJS) talks about how to run your Fabric app on NodeJS towards the end of his tutorial.
How It Works:
NodeJS is a server side scripting language based on Javascript. It’s a very robust language actually and has a large number of installable modules to extend it’s capability. So the the setup works like this:
- The user uses the configurator using the HTML5 Canvas and FabricJS on the clients machine, using a lower resolution canvas (say 300px x 200px)
- The low resolution canvas is exported as a JSON object on the clients machine
- The JSON object is passed to the NodeJS server via AJAX – which is also running FabricJS via Fabric for Node
- The JSON object is upscaled to the larger output size (say 2500px x 1600px) and processed to an image file per your business needs
- NodeJS sends a response back to the client machine
This article is not going to be a full tutorial on how to do that entire process. I can’t give away all of my code! But what I will do, is provide you with the setup procedure for NodeJS and Fabric for Node. I’ve also implemented a NodeJS module called GraphicsMagick for further image manipulation within NodeJS.
Installation Notes
- I am using Ubuntu 12.04 precise.
- I’m using the command line for the installation instructions below.
- I installed the NodeJS modules globally using the -g flag. This means that ANY NodeJS script I run can access these modules. Alternatively, you could install the modules locally to each project/script you do. This allows for multiple versions, or keeping all files for a project encapsulated. More information can be found here in the NodeJS documentation.
NOTE: If you are installing NodeJS on Debian, please refer to these instructions for installing NodeJS on Debian Squeeze.
Installation Procedure
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
#Change to installation directory cd /usr #Install dependancies sudo apt-get update sudo apt-get install python-software-properties python g++ make #Get the NodeJS codebase sudo add-apt-repository ppa:chris-lea/node.js sudo apt-get update #Install NodeJS sudo apt-get install nodejs #Update NPM registry npm config set registry http://registry.npmjs.org/ #Install Canvas dependancies sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++ #Install Graphics Magick (https://www.npmjs.org/package/gm) apt-get install graphicsmagick npm install -g gm #Install Canvas (https://www.npmjs.org/package/canvas) npm install -g canvas #Install Fabric (https://www.npmjs.org/package/fabric) npm install -g fabric #Install Forever (https://www.npmjs.org/package/forever) npm install forever -g |
Assuming that everything went smooth and you didn’t get any errors, you’re all set! Now lets test it and ensure that this worked as expected.
Testing:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#Change to the NodeJS modules folder cd /usr/lib/node_modules/ #Test GraphicsMagick gm display #Expected Output: # gm display: Unable to open X server (). #Test NodeJS node #Expected Output: #This will enter you into the NodeJS terminal mode # > |
|
1 2 3 4 5 6 7 8 9 |
<span style="line-height: 1;">#Test the Canvas within NodeJS typeof require('canvas'); #Expected Output: # 'function' </span><span style="line-height: 1;"> #Test Fabric for Node typeof require('fabric'); #Expected Output: # 'object'</span> |
Good To Know Details:
- I found that the version of NodeJS to be critical in this process. I’d suggest using only stable releases. The procedure mentioned above should do that (for now), but over time as development advances you may need to modify this procedure slightly to ensure you are using a version compatible with Fabric for Node. I used 0.10.26. N is a NodeJS version management module you can use to switch between NodeJS versions. NVM is another management option.
- Custom fonts in Fabric for NodeJS take a few lines of code to setup. You need to provide the actual font file for it to work. I won’t explain the details since you can find them in the FabricJS tutorials.
- NodeJS is installed into your Linux system. If you are on a shared hosting plan, you may or may not have access to Linux to do the configuration. Work with your hosting provider to determine if this setup is compatible with your server configuration.
- Despite the name being NodeJS, it is typically referenced as just node within Linux and other documentation through out the internet
Limitations:
I’m sure there is a bigger list, but at this time I really have only found one real limitation
- Drop shadow on images in node.js does NOT work. FabricJS for the client browser works great. I tried to carry this into Fabric for Node and found it didn’t work. This is a known issue and actually to my understanding is a limitation in Cairo – the 2d rendering engine that Fabric for Node uses in NodeJS. See this conversation in GitHub for more information.
Resources:
- NodeJS Installation Instructions
http://darrenma.wordpress.com/2013/06/05/how-to-install-current-stable-nodejs-on-ubuntu/ - Installation instructions from Fabric.js – Note the link from that page to the page to install node.js is out of date – it installs a non-stable version and Fabric doesn’t operate on it.
http://fabricjs.com/fabric-intro-part-4/#node - Information about N and NVM – Node version management software (Wasn’t used in these instructions)
http://www.mattpalmerlee.com/2013/03/23/installing-and-switching-between-multiple-versions-of-node-js-n-vs-nvm/
I hope this guide helps someone out there in their setup. FabricJS and NodeJS are both very powerful tools that help us to take the internet into a very cool direction and are helpful in replacing some of what the boggy Flash did for us in the past. Documentation exists on the internet, but it’ll never hurt to have more!