Login/Register
how to install node js canvas on windows
Asked Answered
javascriptwindowsnode.jscanvascairo
N

5

15

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

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.

Nereid answered 19/8, 2013 at 9:32 Comment(4)
are you 32 or 64 bit? – Modifier
any solutions to this – Verla
32 bit | no solutions, after some time I gave up (using ubuntu) – Nereid
I have managed to get it working on Windows 8 (see description bellow). I am also sorry that I cant accept any solution, but this question seems to have no "the only right one" answer. – Nereid
N
4

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:

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:

Hope this helps.

Nereid answered 22/8, 2014 at 15:31 Comment(1)
github.com/Automattic/node-canvas/issues/234, combining these posts helped. "Same issue here but was fixed by moving the GTK folder to C:/GTK. I had the folder in a different location and binding.gyp is looking for it in here 'GTK_Root%': 'C:/GTK', # Set the location of GTK all-in-one bundle Also one more thing I had VS2012 installed and so I had to use the --msvs_version=2012 flag" – Vries
N
1

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.

Nariko answered 19/8, 2013 at 9:51 Comment(4)
Thank you. Before I try I have to ask, do I have to create the folders canvas\build\Release? (So I should download canvas module manually as I tried as second approach?) Because as I mentioned, npm removes everything after fail. – Nereid
Not sure. Try it and see what happens. – Nariko
Did not work =(. I downloaded canvas module, unziped and 1) created folders manually and copied the files there, or 2) run node-gyp configure and copied the files there, and then in both cases run eventually node-gyp build, still the same error. (I also tried to create folders, copy the files there and then run npm install canvas) But thank you anyway! If something else comes to your mind, I will appreciate it. – Nereid
Any update or resolution for this? I'm having the same issues right now and am forced to simply create the canvas on the client side and use toDataUrl and download/save each file. Not ideal. – Syncopation
A
1

I ran into trouble with canvas while trying to install paperjs.

Here's what worked for me.

My specifics

GTK

Make sure you read the README. There are necessary instructions here that I overlooked the first time around. For instance:

Run: pkg-config --cflags gtk+-2.0

Run: gtk-demo and verify that it works

Running pkg-config let me know that I needed to have <GTK Directory>\lib\pkgconfig in the PKG_CONFIG_PATH environment variable.

canvas

I used this as a guide: https://github.com/LearnBoost/node-canvas/wiki/Installation---Windows

NOTE: I have Visual Studio 2010, 2012 and 2013 installed on my machine, so I didn't have to deal with MSVC dependencies.

npm install canvas was always failing - and cleaning up after itself (the jerk) - so I grabbed the cached version from the npm-cache: %USERPROFILE%\AppData\Roaming\npm-cache\canvas\1.1.3\package. Copy this directory to your project's node_modules directory and rename it canvas. Enter the newly created canvas directory on the command line.

Run npm install nan.

Before you you can run node-gyp configure successfully, you need to verify your GTK path in binding.gyp

On line 5:

'GTK_Root%': 'C:/GTK', # Set the location of GTK all-in-one bundle

Now you can try node-gyp configure. If this is successful, awesome! Now you can build it: node-gyp build.

That should do it. If you were trying to install paper, now you can. Hooray!

If this doesn't work, or you have something to add, don't be shy! Please comment so we can all benefit.

Affettuoso answered 21/3, 2014 at 13:48 Comment(0)
O
0

You will need cairo library which is bundled in GTK

Obeah answered 23/10, 2013 at 8:44 Comment(0)
N
0

Here is the most up-to-date information I've found on how to install the components required to run node-gyp which is in turn required to compile the code for canvas (and jsdom). I'm going to replicate it here in case the link dies. I have tested these instructions on my Win7 x64 machine and it worked first time.

On Windows XP/Vista/7, node-gyp requires Python 2.7 and Visual Studio 2010

According to the readme file in Microsoft Visual C++ 2010 Service Pack 1 Compiler Update for the Windows SDK 7.1, to ensure that your system has a supported configuration, uninstall the following products and then reinstall them in the order listed:

  1. Visual Studio 2010
  2. Windows SDK 7.1 Note: If you get error on installation, maybe this link will help you.
  3. Visual Studio 2010 SP1
  4. Visual C++ 2010 SP1 Compiler Update for the Windows SDK 7.1

On x64 environments, the last update in the list fixes errors about missing compilers and error MSB4019: The imported project "C:\Microsoft.Cpp.Default.props" was not found.

Nariko answered 14/6, 2014 at 12:15 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.