记录在【Windows】下安装【node-canvas】遇到的各种问题(无法安装canvas,安装canvas包报错error…)

  • 记录在【Windows】下安装【node-canvas】遇到的各种问题(无法安装canvas,安装canvas包报错error…)已关闭评论
  • 112 次浏览
  • A+
所属分类:Web前端
摘要

好久没更新博客了,因为工作越来越忙,没什么时间去记录一些问题,最近闲下来一点,由于某些原因不得不暂时在Windows下做开发,项目用到了node-canvas处理图片什么的,在安装的时候各种报错,确实让人很抓狂,这里简单记录下:

好久没更新博客了,因为工作越来越忙,没什么时间去记录一些问题,最近闲下来一点,由于某些原因不得不暂时在Windows下做开发,项目用到了node-canvas处理图片什么的,在安装的时候各种报错,确实让人很抓狂,这里简单记录下:

首先说明下,node-canvas

  官方git仓库 https://github.com/Automattic/node-canvas

在没有安装前置依赖之前,直接npm install canvas是一定装不上的,其实网上有很多关于win安装canvas的文章,报错的时候搜了很多,不过最官方的方法在这:

  Installation: Windows · Automattic/node-canvas Wiki (github.com)

官方给出了两种安装依赖的方法,一种是一个一个纯手动安装(不建议,比较麻烦),一种是下载Chocolatey然后一键安装,我的建议是使用Chocolatey 更方便一些

 

下面给出使用Chocolatey方法安装node-canvas的步骤

 

    一、安装Chocolatey

    1)打开终端管理员powershell,运行

Get-ExecutionPolicy

    如果显示 Restricted ,那么要执行

Set-ExecutionPolicy AllSigned

    2)复制如下命令到shell,回车执行

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

      等待一会儿,如果没有报错error的信息,执行下 choco,出现版本信息,那么就应该安装成功了

记录在【Windows】下安装【node-canvas】遇到的各种问题(无法安装canvas,安装canvas包报错error...)

 

 

 

    二、安装canvas前置依赖

    在shell中执行

choco install -y python2 gtk-runtime microsoft-build-tools libjpeg-turbo

    这个过程看网络情况,我这边是会等几分钟

记录在【Windows】下安装【node-canvas】遇到的各种问题(无法安装canvas,安装canvas包报错error...)

     一般情况应该只有一个包 libjpeg-turbo 显示安装错误,其他都是安装成功的,不过没关系,打开C盘看下如果 C:libjpeg-turbo64 文件夹下是这样的,那么就代表成功了(博主在win10、win11装过都是这样滴)

记录在【Windows】下安装【node-canvas】遇到的各种问题(无法安装canvas,安装canvas包报错error...)

    

   三、下载GTK-2

    首先下载安装包,下载完成后,解压到 C:GTK

      -win64

         -win32

    

 

     四安装canvas

    1)在项目根目录下创建 .npmrc 文件(如果已存在就把代码加在下面即可),内容如下

canvas_binary_host_mirror=https://registry.npmmirror.com/-/binary/canvas

     这一步非常的重要,就是给npm安装canvas时换个镜像,博主就是在这步卡了很久,最后发现是默认GitHub的源太慢了,导致总是安装失败,法克鱿!

 

      2)ok到这一步终于可以安装canvas了!

npm install canvas

        没什么问题的话就可以很快安装成功了,good

 

 

    ps:在换源之前我这边是这么报错的,有时候还不一样

> npm install canvas  > canvas@2.11.2 install C:UsersLijiaHouDesktopReactAndVuekoaDemonode_modulescanvas > node-pre-gyp install --fallback-to-build --update-binary  node-pre-gyp ERR! install request to https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v83-win32-unknown-x64.tar.gz failed, reason: connect ETIMEDOUT 20.205.243.166:443 node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and node@14.19.1 (node-v83 ABI, unknown) (falling back to source compile with node-gyp) node-pre-gyp WARN Hit error request to https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v83-win32-unknown-x64.tar.gz failed, reason: connect ETIMEDOUT 20.205.243.166:443 gyp ERR! find VS gyp ERR! find VS msvs_version was set from command line or npm config

 

    应该没有遗漏什么步骤吧,最后希望能帮到朋友们√