本方法仅适用用于window系统

安装canvas需要当前工作环境拥有python环境,且只能适用python2.7版本,v3.x.x版本会造成系统报错

1.在管理员权限下 使用choco install -y python2 gtk-runtime microsoft-build-tools libjpeg-turbo

自动安装python2.7,c++环境;如果本机未安装choco,可以使用以下npm命令安装

npm i -g windows-build-tools来安装所有的环境

到当前界面才算成功,安装vs工具的时候耗时比较长,需要确保电脑存在 .Net Framework 的框架,如果不存在工具会出现安装失败。

在网上查找了一下解决办法,直接进入链接下载并安装.Net 4.6:https://www.microsoft.com/en-us/download/details.aspx?id=48137

如下所示:

下载完成后,得到一个EXE文件:

双击EXE文件进行安装:

也可以手动安装vs工具,执行上面脚本后,vs工具安装文件地址:C:\Users\Administrator\.windows-build-tools中的vs_BuildTools.exe

vs工具下载慢的处理方式:

原因

目前国内大多数地区都开通了ipv6, 而当你的电脑能接通ipv6时VS自动使用ipv6下载扩展组件, 这导致下载速度很慢

解决方案

在VS安装或升级扩展时禁用电脑的ipv6

如果禁用ipv6没用,就在做下面的配置

修改系统:C:/windows/system32/drivers/etc的hosts文件
改host : 在host最后一行加上: 110.53.72.104 download.visualstudio.microsoft.com
然后 : cmd 刷一下dns,命令: ipconfig /flushdns
最后可以ping 一下: ping download.visualstudio.microsoft.com

2.安装node-gyp

安装node-gyp需要配置系统环境,如下操作

(1)npm install -g node-gyp 安装node-gyp

(2)npm config set msvs_version 2015 配置node-gyp

(3)npm config set python C:\\Python27

(4)如果(2),(3)配置之后有报错,可使用以下方法:

node-gyp configure

node-gyp configure --msvs_version=2015

node-gyp build

3.安装GTK2,必须是GTK2,不能是GTK3,

下载GTK2之后,直接解压至C:\GTK

注意:下载GTK压缩包时,应下载与node操作系统相同的版本,32位或者64位,否则将会报错;

32位的下载地址:http://ftp.gnome.org/pub/GNOME/binaries/win32/gtk+/2.24/gtk+-bundle_2.24.10-20120208_win32.zip
64位的下载地址:http://ftp.gnome.org/pub/GNOME/binaries/win64/gtk+/2.22/gtk+-bundle_2.22.1-20101229_win64.zip

4.安装libjpeg-turbo(可选,用于JPEG支持; node-canvas 2.0及更高版本)
下载适用于Visual C ++的最新libjpeg-turbo SDK(当前为libjpeg-turbo-2.0.0-vc.exe或libjpeg-turbo-2.0.0-vc64.exe)并安装到其默认位置(C:\libjpeg-turbo如果是32位或C:\libjpeg-turbo6464位)。

Visual C ++的下载地址:http://sourceforge.net/projects/libjpeg-turbo/files/

笔记:

libjpeg-turbo和Node.js都必须为64位或32位才能成功编译。
如果使用其他位置,请jpeg_root向npm install或添加参数node-gyp rebuild。例如:node-gyp rebuild --jpeg_root=C:\somewhere\libjpeg-turbo。

5.在普通cmd下使用npm install -g canvas 安装canvas

6.如果依旧报错

在node-gyp根目录下创建binding.gyp文件

我的是在这个目录中创建

C:\Program Files (x86)\nodejs\node_modules\npm\node_modules\node-gyp

binding.gyp文件描述了建立你的模块,在类JSON格式的配置。gyp适合构建Node.js插件的准系统文件可能如下所示:

{
"targets": [
{
"target_name": "binding",
"sources": [ "src/binding.cc" ]
}
]
}

完成之后,在管理员权限下运行npm i -g windows-build-tools来安装所有的环境

然后就可以在普通的cmd下运行

npm install -g canvas

canvas安装成功

附上node-canvas安装网址

https://github.com/Automattic/node-canvas/wiki/Installation---Windows

安装canvas的更多相关文章

  1. base64 convert to file

    var fs= require('fs') var imageFile = dataUrl.replace(/^data:image\/\w+;base64,/, ""); var ...

  2. nodejs 生成验证码

    此方法需要nodejs 安装canvas 扩展 准备工作 以Linux为例 1.服务器gcc版本需4.8以上 2.安装所需扩展 yum install cairo cairo-devel cairom ...

  3. Fabric.js的使用

    最近项目有一个绘制的功能,搜了一圈发现fabric.js口碑不错,但是文档稀缺,于是东看看西搜搜的把项目的需求都给实现了,想分享一下. 篇幅有点长,但看完后可以轻松驾驭fabric.我的项目是基于VU ...

  4. HTML5 学习总结(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  5. canvas

    1. 画布可以通过两只手指上下移动,画布大小默认为屏幕大小的2倍,通过自定义View,嵌套scollview实现. Y 2. 通过处理手指触摸事件,一根手指时,使用Canvas绘制移动路径,产生直线: ...

  6. canvas简介

    一.canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆 ...

  7. Python爬虫进阶二之PySpider框架安装配置

    关于 首先,在此附上项目的地址,以及官方文档 PySpider 官方文档 安装 1. pip 首先确保你已经安装了pip,若没有安装,请参照 pip安装 2. phantomjs PhantomJS ...

  8. canvas绘图、WebGL、SVG

    目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML ...

  9. 帆布指纹识别(canvas fingerprinting)

    广告联盟或许网站运营者都希望能够精准定位并标识每一个个体,通过对用户行为的分析(浏览了哪些页面?搜索了哪些关键字?对什么感兴趣?点了哪些按钮?用了哪些功能?看了哪些商品?把哪些放入了购物车等等),为用 ...

随机推荐

  1. 探究HashMap1.8的扩容

    扩容前 扩容后 机制 else { // preserve order Node<K,V> loHead = null, loTail = null;//低指针 Node<K,V&g ...

  2. 最小生成树(一)kruskal

    今天写一篇关于最小生成树的番外篇,以前写最小生成树总是用的prim,关于kruskal只是知道一些原理,一直也没有时间去学,今天偶然看了一些并查集,才想起了这个算法 会想起刚刚(预)学过的数据结构,来 ...

  3. Junit单元测试案例(测试语言Java)

    # 二.单元测试案例##### 1. 首先我们先创建一个Operation类,在类中我们写几个方法,分别为加.减.乘.除.这些方法都不加边界值与判断.如下图所示:![在这里插入图片描述](https: ...

  4. BZOJ2038 小Z的袜子(莫队之源)

    题意+思路: 给你m个区间询问,问每个区间内的$\displaystyle \frac{\sum x^2-(R-L+1)}{(R-L)(R-L+1)} $,其中x为每种数字的个数,用cnt存储: 所以 ...

  5. wireshark抓包思维导图---新手推荐

  6. JS代码格式化时间戳

    一.[24小时制]yyyy-MM-dd HH:mm:ss new Date().toJSON() // 2019-12-13T13:12:32.265Z 通过上面的方法,基本就可以将日期格式化,然后稍 ...

  7. golang 运算符

    /* 算术运算符 : + - * / % ++ -- 关系运算符 : == != > < >= <= 逻辑运算符 : && || ! 赋值运算符 : = += ...

  8. H5监听浏览器滚动条scrollbar

    监听滚动条scrollbar(适配手机) 1. document.documentElement.scrollHeight:整个html的高度,含被隐藏界面高度 2. window.pageYOffs ...

  9. vertical-align和line-height的理解及实例

    line-height 字符实际大小和font-size的关系: 下图中不同字体font-size都是100px 测量了一下每个 span 的高度:Helvetica 115px,Gruppo 97p ...

  10. vue项目中出现cannot get/的解决办法

    webpack-dev-server没有配置网站根目录造成找不到可以显示的首页 配置根目录即可:   devServer: { contentBase:path.resolve(__dirname,& ...