precompiled packages targeting electron are not available

[ranasaria]

I have developed and tested a package using node-canvas. Everything worked fine. Now I am trying to use my package in another project that is targetting electron environment. Here the download of the canvas package fails because pre-built packages targeting that environmet are not available.

Issue or Feature

Need support for pre-built binaries for electron.

Steps to Reproduce

Use the Canvas package from package.json dependencies section on a project that targets electron environment.

error:
error D:\src\azuredatastudio\extensions\integration-tests\node_modules\canvas: Command failed.
Exit code: 1
Command: node-pre-gyp install --fallback-to-build
Arguments:
Directory: D:\src\azuredatastudio\extensions\integration-tests\node_modules\canvas
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using node-pre-gyp@0.11.0
node-pre-gyp info using node@10.15.3 | win32 | x64
node-pre-gyp WARN Using request for node-pre-gyp https download
node-pre-gyp info check checked for "D:\src\azuredatastudio\extensions\integration-tests\node_modules\canvas\build\Release\canvas.node" (not found)
node-pre-gyp http GET https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.0/canvas-v2.6.0-electron-v4.2-win32-unknown-x64.tar.gz
node-pre-gyp http 404 https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.0/canvas-v2.6.0-electron-v4.2-win32-unknown-x64.tar.gz
node-pre-gyp WARN Tried to download(404): https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.0/canvas-v2.6.0-electron-v4.2-win32-unknown-x64.tar.gz
node-pre-gyp WARN Pre-built binaries not found for canvas@2.6.0 and electron@4.2.9 (electron-v4.2 ABI, unknown) (falling back to source compile with node-gyp)
node-pre-gyp http 404 status code downloading tarball https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.0/canvas-v2.6.0-electron-v4.2-win32-unknown-x64.tar.
gz

D:\src\azuredatastudio\extensions\integration-tests\node_modules\canvas>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\....
\node_modules\node-gyp\bin\node-gyp.js" clean ) else (node "" clean )
gyp info it worked if it ends with ok
gyp info using node-gyp@3.8.0
gyp info using node@10.15.3 | win32 | x64
gyp info ok

D:\src\azuredatastudio\extensions\integration-tests\node_modules\canvas>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\....
\node_modules\node-gyp\bin\node-gyp.js" configure --fallback-to-build --module=D:\src\azuredatastudio\extensions\integration-tests\node_modules\canvas\build\Release\canvas.node -
-module_name=canvas --module_path=D:\src\azuredatastudio\extensions\integration-tests\node_modules\canvas\build\Release --napi_version=3 --node_abi_napi=napi --napi_build_version
=0 --node_napi_label=electron-v4.2 ) else (node "" configure --fallback-to-build --module=D:\src\azuredatastudio\extensions\integration-tests\node_modules\canvas\build\Release\c
anvas.node --module_name=canvas --module_path=D:\src\azuredatastudio\extensions\integration-tests\node_modules\canvas\build\Release --napi_version=3 --node_abi_napi=napi --napi_b
uild_version=0 --node_napi_label=electron-v4.2 )

Your Environment

• Version of node-canvas (output of npm list canvas or yarn list canvas):
  $ npm list canvas
  adstest@0.0.3 D:\src\adstest
  -- chartjs-node-canvas@2.4.0 -- canvas@2.5.0

• Environment (e.g. node 4.2.0 on Mac OS X 10.8):
  $ node -v
  v10.15.3

Windows Version 1903 (OS build 18362.239)

[Sakari369]

Is there any easy way to include node-canvas with Electron, without having to figure out rebuilding the node-canvas package and relocating the dynamic libraries ?

Could you perhaps provide a version prebuilt for Electron ?

[andyTsing]

I also encountered this problem, but, by directly under ... \ node_modules \ canvas,

1. $ node-gyp configure
2. $ node-gyp build
   Then test, some functions can be used, as follows:
3. You can use:
   / ** Defaults to PNG image. * /
   toDataURL (): string
   toDataURL (mimeType: 'image / png'): string
   toDataURL (mimeType: 'image / jpeg', quality ?: number): string
4. Contains callback functions, such as: toDataURL (cb: (err: Error | null, result: string) => void): void, are all unavailable, manifested in no error, no response;
5. createPNGStream is not a function, so are createJPEGStream and toBuffer;
   4.var lImage = new Image (); typeerror: image is not a constructor.
   ============================================================
   Works in non-election environment...

[Sakari369]

Well I got the package working on macOS at least, what I did was install the official canvas prebuilt npm package, not built for electron, copied all the libraries include within it (under the installed package there is a group of prebuilt library binaries included, ligjpeg etc), copied all those to a separate temporary directory.

Then I rebuild the node-canvas module manually against local development libraries installed with macports, with node-gyp inside the electron node_modules directory.

After this, I copied the previously copied library binaries inside the re-build node-canvas, and wrote this script to relocate the libraries from /opt/local/lib to the location inside the node_modules/canvas directory.

#!/bin/bash

libs="libcairo-gobject.2.dylib libcairo.2.dylib libcroco-0.6.3.dylib libffi.6.dylib libfontconfig.1.dylib libfreetype.6.dylib libfribidi.0.dylib libgdk_pixbuf-2.0.0.dylib libgio-2.0.0.dylib libglib-2.0.0.dylib libgmodule-2.0.0.dylib libgobject-2.0.0.dylib libgraphite2.3.2.1.dylib libharfbuzz.0.dylib libintl.8.dylib libpango-1.0.0.dylib libpangocairo-1.0.0.dylib libpangoft2-1.0.0.dylib libpcre.1.dylib libpixman-1.0.dylib libpng16.16.dylib"
old_loc="/opt/local/lib"
new_loc="@loader_path"
tool="install_name_tool"
tool_opts="-change"
bin="electron/node_modules/canvas/build/Release/canvas.node"

echo "Fixing node canvas libraries ..."

names=($libs)
for lib in "${names[@]}"
do
	old_str="${old_loc}/${lib}"
	new_str="${new_loc}/${lib}"
	${tool} ${tool_opts} ${old_str} ${new_str} ${bin}
done

echo "... done!"⏎                       

So you can maybe adapt this to your use, this works on macOS only though, have to figure out what the required tools are in windows to relocate the library locations.

[cosmosified]

Well I got the package working on macOS at least, what I did was install the official canvas prebuilt npm package, not built for electron, copied all the libraries include within it (under the installed package there is a group of prebuilt library binaries included, ligjpeg etc), copied all those to a separate temporary directory.

Then I rebuild the node-canvas module manually against local development libraries installed with macports, with node-gyp inside the electron node_modules directory.

After this, I copied the previously copied library binaries inside the re-build node-canvas, and wrote this script to relocate the libraries from /opt/local/lib to the location inside the node_modules/canvas directory.

#!/bin/bash

libs="libcairo-gobject.2.dylib libcairo.2.dylib libcroco-0.6.3.dylib libffi.6.dylib libfontconfig.1.dylib libfreetype.6.dylib libfribidi.0.dylib libgdk_pixbuf-2.0.0.dylib libgio-2.0.0.dylib libglib-2.0.0.dylib libgmodule-2.0.0.dylib libgobject-2.0.0.dylib libgraphite2.3.2.1.dylib libharfbuzz.0.dylib libintl.8.dylib libpango-1.0.0.dylib libpangocairo-1.0.0.dylib libpangoft2-1.0.0.dylib libpcre.1.dylib libpixman-1.0.dylib libpng16.16.dylib"
old_loc="/opt/local/lib"
new_loc="@loader_path"
tool="install_name_tool"
tool_opts="-change"
bin="electron/node_modules/canvas/build/Release/canvas.node"

echo "Fixing node canvas libraries ..."

names=($libs)
for lib in "${names[@]}"
do
	old_str="${old_loc}/${lib}"
	new_str="${new_loc}/${lib}"
	${tool} ${tool_opts} ${old_str} ${new_str} ${bin}
done

echo "... done!"⏎                       

So you can maybe adapt this to your use, this works on macOS only though, have to figure out what the required tools are in windows to relocate the library locations.

Interestting. the dylibs that ship with the prebuilts are all setup to link against @loader_path and against existing system binaries only? I tried to do what you did, but i got something saying one of the libraires was too old:

node_modules/canvas/build/Release/canvas.node\n Reason: Incompatible library version: canvas.node requires version 6401.0.0 or later, but libgobject-2.0.0.dylib provides version 6201.0.0\n

[Sakari369]

Interestting. the dylibs that ship with the prebuilts are all setup to link against @loader_path and against existing system binaries only? I tried to do what you did, but i got something saying one of the libraires was too old:

No, not the system libraries. But the libraries provided with the canvas prebuilt package, that is where the @loader_path is referring to. But you should be able to compile Electron compatible versions of those libraries and relocate inside your own project, then change the library reference paths with the above command.

node_modules/canvas/build/Release/canvas.node\n Reason: Incompatible library version: canvas.node requires version 6401.0.0 or later, but libgobject-2.0.0.dylib provides version 6201.0.0\n

Yeah don't know what versions you are compiling with. I'm using Macports and the canvas rebuilt fine against those.

[nullxx]

I tried to get all the lastest versions but inside all dylibs there is other links to /opt/local/lib ...

2020-05-22 00:05:11.559] [error] Uncaught Error: dlopen(/Applications/Tichnology.app/Contents/Resources/app/node_modules/canvas/build/Release/canvas.node, 1): Library not loaded: /usr/local/lib/libpixman-1.0.dylib
  Referenced from: /Applications/Tichnology.app/Contents/Resources/app/node_modules/canvas/build/Release/libcairo.2.dylib
  Reason: image not found

[Sakari369]

Hey finally found a good solution for fixing this build, at least on macOS.
Maybe this works on Linux too with some adaptation. I think the Windows build is easier to create, as you can just copy the .lib files to C:\GTK and expect them to have everything in them.

Anyway, this is how I did it:

• Install latest version of node-canvas module
• Configure the binding.gyp file inside node_modules/canvas/binding.gyp and set jpeg_support and gif_support to false, if you don't need those, I did not. Wanted to minimize the bundled in libraries, as these are big.
• Rebuild the canvas module with electron-rebuild
• Fix the library dependencies using https://github.com/auriamg/macdylibbundler

Key point is here fixing the .dylib dependencies. You can do it with this macdylibbundler tool listed above.
The command to fix the libraries and bundle together in the same directory as the canvas.node is

dylibbundler -x canvas.node -d ./ -p @loader_path -b

This needs to be run inside the node_modules/canvas/build/Release directory after building the module with electron-rebuild.
This tool with these commands will calculate all the dependencies required for node.canvas (it's a .dylib after all), fix the paths to @loader_path (which means same path as canvas.node is loaded from) and copy the required libraries to specified directory with -d ./ which means the same directory as canvas.node resides in.

This will find out all the library dependencies and fix the paths in them also, resulting in a bunch of library files on your build/Release directory. For me, with SVG support builtin, this comes to a total whopping of about 70 megabytes of libraries ..

Anyway, hope this helps you out there! Maybe this tool can be ported to Linux also if needed, not sure.
I have tested this setup on my build machine with macOS 10.13.6, using development libraries required by node installed from macports at least.

[Sakari369]

Also here is a tool you can view library dependencies in recursive manner in macOS, to help fixing these and confirming: https://github.com/kwin/macdependency