Nodejs 在 Windows 下成功安装 node-canvas

Nodejs 在 Windows 下成功安装 node-canvas

最近项目需要用到 node-canvas 这个图形模块, 但是在Windows下其安装颇费周折, 经过一天试探,终于搞定了, 下面分享给大家:

1.先安装 Python; 通过Python 官网 http://www.python.org/getit/ 下载并安装最新版本. 然后将Python 的安装目录(如: C:\Program Files\Python) 添加到PATH环境变量中;

2.安装node-gyp 或将 npm 升级到内含 node-gyp 的版本 (nodejs v0.6.13以上的 npm 已内置了node-gyp, 则此步可以略过);

3.再安装 Visual C++ 2010 Express; 因为需要用到其中的MSBuild 用以编译 cairo 类库到本地代码; 微软官方获取: http://www.microsoft.com/visualstudio/en-us/products/2010-editions/visual-cpp-express (VC++下载和安装的过程很漫长,需要耐心等待);

4.还要下载包含 cairo 图形处理库的GTK包: http://cairographics.org/download/ , 选gtk±bundle_2.24.10-20120208_win32 或最新版,

5.将下载的GTK包解压到 C:\GTK\ 目录(必须是这个目录名,否则接下来的MSBuild编译可能通不过),

6.在Windows环境变量PATH 后添加 C:\GTK\bin 目录 (需要注销Windows重新登录才能全局生效), 以供 canvas 运行时调用cairo的动态链接库 libcairo-2.dll 等;

7.最后 npm install canvas , 期间将自动运行MsBuild 编译生成 canvas.node 本地目标库, 生成的目标库位于 path\to\node_modules\canvas\build\Release\canvas.node;

8.DOS命令行下: CD 进入 canvas\build\Release\ 这个目录, 运行 node 测试canvas是否安装成功: C:\path\to\node\node_modules\canvas\build\Release> node.exe

var canvas = require(’./canvas’);

若显示 undefined , 而不是错误信息 ,应该就安装成功了. 若显示Unable to load shared library 则可能是 GTK\bin 目录未在PATH路径中,添加上即可.

参考说明: https://github.com/LearnBoost/node-canvas/wiki/Installation—Windows


22 回复

Nodejs 在 Windows 下成功安装 node-canvas

最近项目需要用到 node-canvas 这个图形模块，在Windows下其安装颇为复杂，经过一天的探索，终于搞定。下面是详细的步骤分享给大家：

1. 安装 Python

首先，需要安装 Python。可以通过Python官网下载并安装最新版本。安装完成后，将Python的安装目录（例如：C:\Program Files\Python）添加到系统的PATH环境变量中。

# 示例：添加Python路径到系统环境变量
setx PATH "%PATH%;C:\Program Files\Python"

2. 安装 node-gyp

确保你已经安装了node-gyp或更新npm到包含node-gyp的版本。对于nodejs v0.6.13以上版本，npm已经内置了node-gyp，因此这一步可以省略。

npm install -g node-gyp

3. 安装 Visual C++ 2010 Express

由于需要使用MSBuild来编译cairo类库到本地代码，因此需要安装Visual C++ 2010 Express。可以从微软官方网站下载并安装。

# 微软官方下载地址
https://visualstudio.microsoft.com/visual-cpp-express/

4. 下载并安装 GTK 包

下载包含cairo图形处理库的GTK包。从官方网站下载，并选择合适的版本（例如：gtk±bundle_2.24.10-20120208_win32）。

# 下载地址
https://www.cairographics.org/download/

5. 解压GTK包

将下载的GTK包解压到 C:\GTK\ 目录（必须是这个目录名）。

# 解压命令
tar -xf gtk±bundle_2.24.10-20120208_win32.zip -C C:\GTK\

6. 配置环境变量

在Windows环境变量PATH后面添加 C:\GTK\bin 目录。需要注销Windows重新登录才能使全局生效。

# 添加GTK路径到系统环境变量
setx PATH "%PATH%;C:\GTK\bin"

7. 安装 node-canvas

最后，通过npm安装 node-canvas 模块。期间将自动运行MSBuild编译生成 canvas.node 本地目标库。

npm install canvas

8. 测试安装

在DOS命令行下，进入 canvas\build\Release\ 目录，运行node测试canvas是否安装成功。

cd path\to\node\node_modules\canvas\build\Release
node.exe

在node命令行中输入以下代码：

var canvas = require('./canvas');
console.log(canvas);

如果输出 undefined 而没有错误信息，则说明安装成功。如果出现 Unable to load shared library 错误，则检查 GTK\bin 目录是否在PATH路径中。

参考文档

更多详细信息可以参考：

希望这些步骤能帮助你在Windows下顺利安装 node-canvas！


果然麻烦

再问下，用这个东东生成验证码，不需要html5吧？

注意 node-canvas 是运行在 node 环境下的噢

  1. 后台使用canvas生成验证码图片需要html5支持，node-canvas无障碍；
  2. 客户端只需请求该图片资源即可，一般png无障碍；

大神，终于把这篇文章发出来了。我想问个问题，如果我是把项目部署在云端服务器，这个怎么装呢？ 另外我还有个想问一下，canvas是为了解决一系列问题qs，您有什么想法不用canvas，又能解决qs呢？

这个canvas是为了在服务器侧生成和处理图片, 对于我们主要是生成验证码图形, 目的呢就是为了防止SPAM. 你说的qs是不是SPAM?

windows安装canvas报之下错误，求帮忙解决下！enter image description here

有没有人用过ImageMagick

我还是打算 改用 ImageMagick 了，canvas安装太麻烦了。

ImageMagick可以生成验证码吗？

想知道是否每次重装系统都要这样安装一次.如果不需要那么搂主是否可以吧安装好的文件夹打包提供.我们也好省下好多力气

在Windows下使用 canvas 太蛋疼了……

这么麻烦…

OSX下安装node-canvas失败，能否帮忙看下原因？ brew list后 autojump gettext libpng pkg-config xvid bash-completion glib mongodb texi2html xz cairo imagesnap nginx tree yasm faac lame pcre wget ffmpeg libffi pixman x264

几个需要的都装了

最后错误 Imgur

Windows环境变量PATH修改后,不需要注销或者重新登录的,只要把已经打开的cmd窗口关掉,再打开就可以了

装homebrew了吗？用brew先把cairo装上 用port也行， 装上cairo就行了

我在win7环境下安装，提示：无法打开输入文件“C:\GTK\lib\libpng.lib”错误，gtk 64位的下载文件的确没有libpng.lib这个文件，这个问题怎么解决呢？

不能你编译好,供大家使用吗

收藏

没成功，蛋疼

为了在 Windows 下成功安装 node-canvas，你需要确保所有必要的依赖项都已经正确安装。以下是详细的步骤：

  1. 安装 Python：

    • 访问 Python 官方网站 并下载最新版本。
    • 安装时勾选 “Add Python to PATH” 选项，以便将 Python 添加到系统路径中。

  2. 安装 Node.js：

    • 如果你还没有安装 Node.js，请访问 Node.js 官方网站 并下载安装。确保你的 Node.js 版本高于 0.6.13，这样会自带 node-gyp。

  3. 安装 Visual C++ 2010 Express：

    • 访问 Visual C++ 2010 Express 官方页面 并下载安装。虽然官方页面上没有直接提供 2010 版本，但你可以选择其他版本，比如 2019 或 2022，并确保安装 C++ 构建工具。

  4. 安装 GTK：

    • 访问 GTK 官方下载页面 并下载适用于 Windows 的 GTK+ 包。
    • 将下载的文件解压到 C:\GTK\ 目录。

  5. 配置环境变量：

    • 打开“系统属性 -> 高级系统设置 -> 环境变量”。
    • 在“系统变量”的 Path 中添加 C:\GTK\bin。

  6. 安装 node-canvas：

    npm install canvas

  7. 测试安装： 创建一个简单的测试脚本 test.js：

    const { createCanvas } = require('canvas');
const canvas = createCanvas(200, 100);
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 100);
console.log(canvas.toBuffer().length);

    在命令行中运行：

    node test.js

如果输出是一个数字（表示生成的图像数据长度），则说明 node-canvas 安装成功。

回到顶部