node-canvas Windows安装全网最强排坑指南

依赖

构建node-canvas模块需要：

1. node-gyp的全局安装。
2. GTK 2
3. 对于可选的JPEG支持（node-canvas 2.0和更高版本）：libjpeg-turbo

安装依赖的两种方法

一、安装chocolatey

所有的依赖可以与Windows的包管理器Chocolatey一起安装。

1. choco install -y python2 gtk-runtime microsoft-build-tools libjpeg-turbo （可能需要sudo / Administrator）。
2. 您将需要捆绑在GTK中的cairo库。下载适用于Win32或Win64的GTK 2软件包。在解压缩的内容C:\GTK。
3. npm install canvas或者yarn add node-canvas。

二、手动安装

1.安装node-gyp

按照这里的说明：https：//github.com/nodejs/node-gyp#on-windows

2.安装GTK 2

您将需要捆绑在GTK中的cairo库。下载适用于Win32或Win64的GTK 2软件包。在解压缩的内容C:\GTK。

注意：

• GTK和Node.js都需要64位或32位编译成功。
• 下载GTK 2，而不是GTK 3，它缺少所需的libpng。如果你得到链接器错误，你很可能选择了错误的包。
• 如果您使用的位置不是C:\GTK，请将GTK_Root参数添加到npm install或node-gyp rebuild。例如：node-gyp rebuild --GTK_Root=C:\somewhere\GTK。

3.安装libjpeg-turbo（可选，支持JPEG; node-canvas 2.0及更高版本）

下载适用于Visual C ++的最新libjpeg-turbo SDK（当前libjpeg-turbo-1.5.1-vc.exe或libjpeg-turbo-1.5.1-vc64.exe），并安装到其默认位置（C:\libjpeg-turbo如果是32位或C:\libjpeg-turbo6464位）。

注意：

• libjpeg-turbo和Node.js都需要64位或32位编译成功。
• 如果您使用其他位置，请将jpeg_root参数添加到npm install或node-gyp rebuild。例如：node-gyp rebuild --jpeg_root=C:\somewhere\libjpeg-turbo。

4.安装node-canvas

所有的依赖后设置，npm install canvas或yarn add canvas。

---

可能遇到的错误

我刚开始是手动安装，然后各种报错，差点怀疑人生，索性改成用chocolatey，依然报错。跑不通

error

1. EPERM: operation not permitted.

Error : EPERM: operation not permitted.
在不知道哪个Issues里面找到的 , 就是 degrade npm 来解决的 ,我的原Npm是5.4版本,然后通过 npm i -g [email protected] 解决了.
如果 5.3不行就继续降
有人降到5.0.3就可以了,也有人降到4.x的版本...
看你用的module兼容性吧...

2. qos.h 文件缺失

找到一篇说是要安装windows kits 8.1 的库 ,(我的系统是windows10 1703)

### 
**[Akudrevatykh](https://github.com/Akudrevatykh) 
**commented [datetime="2015-02-27T00:45:28Z" title="2015年2月27日 GMT+8 上午8:45" >on 27 Feb 2015]
(https://github.com/erikdubbelboer/node-sleep/issues/18#issuecomment-76309396)

Since this is one of the top links on Google for "Cannot open include file: 'qos.h'"
In a fresh Windows 8.1 environment you need to install Windows Software Development Kit (SDK) for Windows 8.1
(https://msdn.microsoft.com/en-us/library/windows/desktop/bg162891.aspx)

然后又是下载安装
specify location 选择默认的

然后勾上了这两个,第四个不知道有没有用,可选

image.png

装完之后终于搞定:

image.png

3. Fix ‘node-gyp rebuild’ error on windows

这个我没有碰到，如果你碰到了可以尝试一下：
https://www.robertkehoe.com/2015/03/fix-node-gyp-rebuild-error-on-windows/

4. 缺少VCBuilder

重新在服务器安装了一次,再次跪了好久
又碰到了一个错误:缺少VCBuilder
让我安装 Windows SDK for Windows 2008 和 .Net Framework 3.5 , 或者安装Visual studio 2008.
。我选择了前者，谁没事在服务器上装vs那么大，下载了之后安装。发现.net3.5早已经存在。
此时再进行安装
cnpm i -g canvas@next
继续同样的报错

不少人在这里碰到同样的问题: https://github.com/nodejs/node-gyp/issues/307

实际有用的已经帮你们挑出来了

npm install --global --production windows-build-tools

然而我安装的时候居然无端端重启了服务器??

5. node.lib :fatal error LNK1106: invalid file or disk full:cannot seek to 0x1F84E8

在服务器上部署新项目的时候,需要升级node.js以支持async/await,但噩梦又出现了
升级完之后 , 装不了canvas . 报错:

image.png

然后我以为错误是 msbuild.exe的问题 ,一直跟vsbuildingtool死磕 , 半天过去了
从 .Net 2.0 / .Net3.5 /.Net.4.5 /.Net.4.6 和 Vs 2017 都装了又装，特别是装vs2017的时候还老说失败,缺少 ChocolateyInstall.ps1 , 没办法,找到本机的顶上 .

可依然没有用:

image.png

然后柳暗花明又一村 , 把安装步骤读了几十次 , 眼神最后落在了 yarn add canvas上边 ,抱着最后死马当活马医的念头 ,安装 yarn , 最后神奇地解决了:

image.png

---

接下来测试一下

要注意的是，成功装完东西后,你得重新开一个 cmd / powershell , 不然你会一直报之前的错.
这个我卡了多久已经不记得了

cnpm i -g canvas@next

(文档有2.0Alpha 和 1.x 的版本 , 注意一下)

app.js

var Canvas = require('canvas'),
    Image = Canvas.Image,
    canvas = new Canvas(200, 200),
    ctx = canvas.getContext('2d');

// Write "Awesome!"
ctx.font = '30px Impact'
ctx.rotate(0.1)
ctx.fillText('Awesome!', 50, 100)

var te = ctx.measureText('Awesome!');
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
ctx.beginPath();
ctx.lineTo(50, 102);
ctx.lineTo(50 + te.width, 102);
ctx.stroke();

console.log('');

运行 node app

image.png

over

成功