Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to install node js canvas on windows

I'm trying to get working canvas on node js. I'm using Windows Vista. After basic approach npm install canvas failed (see error below), I have looked up some tutorials, here is what I have tried:

sources:
installing-node-canvas-for-windows
LearnBoost/node-canvas/wiki/Installation---Windows

  • I have installed older Python (2.7.5) and add it to PATH (and remove Python 3.2. from PATH)
  • I have checked that I do have Microsoft Visual Studio 2010 Professional installed
  • I have downloaded the 'all in one' GTK package from http://ftp.gnome.org/pub/gnome/binaries/win32/gtk+/2.24/gtk+-bundle_2.24.10-20120208_win32.zip, unziped it in C:\GTK\ and add 'C:\GTK\bin' to PATH

log in console (after running npm install canvas in cmd):
log contains several warnings, I don't thing these are the problem - it is mostly something like 'conversion from double to float', and one error marked in red color:

init.cc
d:\pathToApp\node_modules\canvas\src\PNG.h(5): fatal error C1083: Cannot
open include file: 'cairo.h': No such file or directory [d:\pathToApp\n
ode_modules\canvas\build\canvas.vcxproj]

And at the very end of log there is:

gyp ERR! build error
gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe
` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\
npm\node_modules\node-gyp\lib\build.js:267:23)
gyp ERR! stack     at ChildProcess.EventEmitter.emit (events.js:98:17)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:789:
12)
gyp ERR! System Windows_NT 6.0.6002
gyp ERR! command "node" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modu
les\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd d:\pathToApp\node_modules\canvas
gyp ERR! node -v v0.10.16
gyp ERR! node-gyp -v v0.10.9
gyp ERR! not ok
npm ERR! weird error 1
npm ERR! not ok code 0

After that, nothing appeared in node-module folder (no canvas subdirectory, npm after unsuccessful installation removed the subdirectory).

So I have also tried to download canvas module manually from github, unzip it in node-modules and then run node-gyp configure in node-modules/canvas with success, and node-gyp build, which unfortunatelly gave me the same error Cannot open include file: 'cairo.h'.

I have read everything that I found on this carefully. If you can suggest any help, please do it.

like image 254
venca163 Avatar asked Aug 19 '13 09:08

venca163


2 Answers

I have managed to get it working on my new Windows 8 machine, so I want to share some details that can be helpful to others.

I am using:

  • Windows 8.1 (64 bit)
  • Visual Studio 2013 (update 2)
  • Python 2.7.8
  • GTK for Windows 64 bit (http://www.gtk.org/download/win64.php)
  • node 0.10.28
  • node-gyp 1.0.1

Procedure

Be sure to have Python 2 and GTK\bin in your path.

I have downloaded files manualy from https://github.com/Automattic/node-canvas and saved it to node_modules/canvas.

Then I run node-gyp configure build in canvas directory. Errors occured. I had to edit binding.gyp (https://github.com/Automattic/node-canvas/blob/master/binding.gyp) in order to match actual files in GTK folder.

For example:

  • line 59: "(GTK_Root)/lib/libpng.lib" -> "(GTK_Root)/lib/libpng.dll.a"
  • line 34: "(GTK_Root)/bin/libpng14-14.dll" -> "(GTK_Root)/bin/libpng15-15.dll"
  • ...

There can be more, you should be able to read which files are making problems from error log and then edit the names to match files in GTK folder.

After editing binding.gyp, command node-gyp configure build finished successfuly. Although I am not able to work with some jpg files in Canvas (I have not tested it properly), png files work fine.

If node-gyp fails

It can happen to you, that every node-gyp command fails with message (possibly marked in red) similar to:

"...bcrypt_lib.vcxproj(47,46): error MSB4025: Could not load file project. An invalid character for the specified encoding., Line 47, position 46."

It it most probably because you have special character in the name of your user folder. (The fact, that Windows 8 automatically creates the name of your user folder from your first name is the lamest thing about Win 8).

2 quick solutions:

  • create another user with normal (without special characters) name a and run node-gyp configure build from that account
  • use this quick fix (it has worked for me): https://github.com/TooTallNate/node-gyp/pull/366

Hope this helps.

like image 153
venca163 Avatar answered Sep 21 '22 17:09

venca163


I managed to get this working on windows after a long arduous process. I have a last couple of suggestions that you might try that I had on my list.

Copy all the dll files from c:\GTK to the canvas\build\Release folder.

Copy IEShims.dll from c:\program files(x86)\Internet Explorer to the canvas\build\Release folder.

Then run node-gyp build.

Best of luck.

like image 34
Andy Avatar answered Sep 18 '22 17:09

Andy