安装canvas
本方法仅适用用于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的更多相关文章
- base64 convert to file
var fs= require('fs') var imageFile = dataUrl.replace(/^data:image\/\w+;base64,/, ""); var ...
- nodejs 生成验证码
此方法需要nodejs 安装canvas 扩展 准备工作 以Linux为例 1.服务器gcc版本需4.8以上 2.安装所需扩展 yum install cairo cairo-devel cairom ...
- Fabric.js的使用
最近项目有一个绘制的功能,搜了一圈发现fabric.js口碑不错,但是文档稀缺,于是东看看西搜搜的把项目的需求都给实现了,想分享一下. 篇幅有点长,但看完后可以轻松驾驭fabric.我的项目是基于VU ...
- HTML5 学习总结(四)——canvas绘图、WebGL、SVG
一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...
- canvas
1. 画布可以通过两只手指上下移动,画布大小默认为屏幕大小的2倍,通过自定义View,嵌套scollview实现. Y 2. 通过处理手指触摸事件,一根手指时,使用Canvas绘制移动路径,产生直线: ...
- canvas简介
一.canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆 ...
- Python爬虫进阶二之PySpider框架安装配置
关于 首先,在此附上项目的地址,以及官方文档 PySpider 官方文档 安装 1. pip 首先确保你已经安装了pip,若没有安装,请参照 pip安装 2. phantomjs PhantomJS ...
- canvas绘图、WebGL、SVG
目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML ...
- 帆布指纹识别(canvas fingerprinting)
广告联盟或许网站运营者都希望能够精准定位并标识每一个个体,通过对用户行为的分析(浏览了哪些页面?搜索了哪些关键字?对什么感兴趣?点了哪些按钮?用了哪些功能?看了哪些商品?把哪些放入了购物车等等),为用 ...
随机推荐
- 探究HashMap1.8的扩容
扩容前 扩容后 机制 else { // preserve order Node<K,V> loHead = null, loTail = null;//低指针 Node<K,V&g ...
- 最小生成树(一)kruskal
今天写一篇关于最小生成树的番外篇,以前写最小生成树总是用的prim,关于kruskal只是知道一些原理,一直也没有时间去学,今天偶然看了一些并查集,才想起了这个算法 会想起刚刚(预)学过的数据结构,来 ...
- Junit单元测试案例(测试语言Java)
# 二.单元测试案例##### 1. 首先我们先创建一个Operation类,在类中我们写几个方法,分别为加.减.乘.除.这些方法都不加边界值与判断.如下图所示:
题意+思路: 给你m个区间询问,问每个区间内的$\displaystyle \frac{\sum x^2-(R-L+1)}{(R-L)(R-L+1)} $,其中x为每种数字的个数,用cnt存储: 所以 ...
- wireshark抓包思维导图---新手推荐
- JS代码格式化时间戳
一.[24小时制]yyyy-MM-dd HH:mm:ss new Date().toJSON() // 2019-12-13T13:12:32.265Z 通过上面的方法,基本就可以将日期格式化,然后稍 ...
- golang 运算符
/* 算术运算符 : + - * / % ++ -- 关系运算符 : == != > < >= <= 逻辑运算符 : && || ! 赋值运算符 : = += ...
- H5监听浏览器滚动条scrollbar
监听滚动条scrollbar(适配手机) 1. document.documentElement.scrollHeight:整个html的高度,含被隐藏界面高度 2. window.pageYOffs ...
- vertical-align和line-height的理解及实例
line-height 字符实际大小和font-size的关系: 下图中不同字体font-size都是100px 测量了一下每个 span 的高度:Helvetica 115px,Gruppo 97p ...
- vue项目中出现cannot get/的解决办法
webpack-dev-server没有配置网站根目录造成找不到可以显示的首页 配置根目录即可: devServer: { contentBase:path.resolve(__dirname,& ...