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库。下载适用于Win32Win64的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库。下载适用于Win32Win64的GTK 2软件包。在解压缩的内容C:\GTK

注意:

  • GTK和Node.js都需要64位或32位编译成功。
  • 下载GTK 2,而不是GTK 3,它缺少所需的libpng。如果你得到链接器错误,你很可能选择了错误的包。
  • 如果您使用的位置不是C:\GTK,请将GTK_Root参数添加到npm installnode-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.exelibjpeg-turbo-1.5.1-vc64.exe),并安装到其默认位置(C:\libjpeg-turbo如果是32位或C:\libjpeg-turbo6464位)。

注意:

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

4.安装node-canvas

所有的依赖后设置,npm install canvasyarn add canvas


可能遇到的错误

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

error

1. EPERM: operation not permitted.

Error : EPERM: operation not permitted.
在不知道哪个Issues里面找到的 , 就是 degrade npm 来解决的 ,我的原Npm是5.4版本,然后通过 npm i -g npm@5.3 解决了.
如果 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</relative-time>]
(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('<img src="' + canvas.toDataURL() + '" />');

运行 node app

image.png

over

成功

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容