windows 环境安装 Node.js 依赖 canvas 出错的解决方案

于 2025-08-13 19:04:03 发布
阅读量605 收藏 10
点赞数 6
CC 4.0 BY-SA版权
分类专栏： 前端开发相关 文章标签： windows node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i042416/article/details/150353366

npm install 出错：


npm error path c:\code\trae\nodejs\snow\node_modules\canvas
npm error command failed
npm error command C:\app\Git20180223\Git20180223\bin\bash.exe -c node-pre-gyp install --fallback-to-build --update-binary
npm error Failed to execute ‘C:\app\node-v22.14.0-win-x64\node.exe C:\app\node-v22.14.0-win-x64\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --update-binary --module=c:\code\trae\nodejs\snow\node_modules\canvas\build\Release\canvas.node --module_name=canvas --module_path=c:\code\trae\nodejs\snow\node_modules\canvas\build\Release --napi_version=10 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v127’ (1)
npm error node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v127-win32-unknown-x64.tar.gz
npm error gyp ERR! find VS
npm error gyp ERR! find VS msvs_version not set from command line or npm config
npm error gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm error gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with ‘–loglevel silly’ for more details.
npm error gyp ERR! find VS
npm error gyp ERR! find VS Failure details: undefined
npm error gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with ‘–loglevel silly’ for more details.
npm error gyp ERR! find VS
npm error gyp ERR! find VS Failure details: undefined
npm error gyp ERR! find VS not looking for VS2017 as it is only supported up to Node.js 21
npm error gyp ERR! find VS not looking for VS2017 as it is only supported up to Node.js 21
npm error gyp ERR! find VS not looking for VS2017 as it is only supported up to Node.js 21
npm error gyp ERR! find VS not looking for VS2015 as it is only supported up to Node.js 18
npm error gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm error gyp ERR! find VS
npm error gyp ERR! find VS **************************************************************
npm error gyp ERR! find VS You need to install the latest version of Visual Studio
npm error gyp ERR! find VS including the “Desktop development with C++” workload.
npm error gyp ERR! find VS For more information consult the documentation at:
npm error gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm error gyp ERR! find VS **************************************************************
npm error gyp ERR! find VS
npm error gyp ERR! configure error
npm error gyp ERR! stack Error: Could not find any Visual Studio installation to use
npm error gyp ERR! stack at VisualStudioFinder.fail (C:\app\node-v22.14.0-win-x64\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:118:11)
npm error gyp ERR! stack at VisualStudioFinder.findVisualStudio (C:\app\node-v22.14.0-win-x64\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:74:17)
npm error gyp ERR! stack at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
npm error gyp ERR! stack at async createBuildDir (C:\app\node-v22.14.0-win-x64\node_modules\npm\node_modules\node-gyp\lib\configure.js:112:18)
npm error gyp ERR! stack at async run (C:\app\node-v22.14.0-win-x64\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js:81:18)
npm error gyp ERR! System Windows_NT 10.0.26100
npm error gyp ERR! command “C:\app\node-v22.14.0-win-x64\node.exe” “C:\app\node-v22.14.0-win-x64\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js” “configure” “–fallback-to-build” “–update-binary” “–module=c:\code\trae\nodejs\snow\node_modules\canvas\build\Release\canvas.node” “–module_name=canvas” “–module_path=c:\code\trae\nodejs\snow\node_modules\canvas\build\Release” “–napi_version=10” “–node_abi_napi=napi” “–napi_build_version=0” "–node_napi_label=node-v127"npm error gyp ERR! cwd c:\code\trae\nodejs\snow\node_modules\canvas
npm error gyp ERR! node -v v22.14.0
npm error gyp ERR! node-gyp -v v11.0.0
npm error gyp ERR! not ok
npm error node-pre-gyp ERR! build error
npm error node-pre-gyp ERR! stack Error: Failed to execute ‘C:\app\node-v22.14.0-win-x64\node.exe C:\app\node-v22.14.0-win-x64\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --update-binary --module=c:\code\trae\nodejs\snow\node_modules\canvas\build\Release\canvas.node --module_name=canvas --module_path=c:\code\trae\nodejs\snow\node_modules\canvas\build\Release --napi_version=10 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v127’ (1)
npm error node-pre-gyp ERR! stack at ChildProcess. (C:\code\trae\nodejs\snow\node_modules@mapbox\node-pre-gyp\lib\util\compile.js:89:23)
npm error node-pre-gyp ERR! stack at ChildProcess.emit (node:events:518:28)
npm error node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1101:16)
npm error node-pre-gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:304:5)
npm error node-pre-gyp ERR! System Windows_NT 10.0.26100
npm error node-pre-gyp ERR! command “C:\app\node-v22.14.0-win-x64\node.exe” “C:\code\trae\nodejs\snow\node_modules\@mapbox\node-pre-gyp\bin\node-pre-gyp” “install” “–fallback-to-build” “–update-binary”
npm error node-pre-gyp ERR! cwd c:\code\trae\nodejs\snow\node_modules\canvas
npm error node-pre-gyp ERR! node -v v22.14.0
npm error node-pre-gyp ERR! node-pre-gyp -v v1.0.11
npm error node-pre-gyp ERR! not ok
npm error A complete log of this run can be found in: C:\Users\I042416\AppData\Local\npm-cache_logs\2025-08-13T04_19_01_618Z-debug-0.log

安装 canvas 在 Windows 上出错，提示找不到预编译二进制，并缺少编译工具。不用担心，这里简明列出可行解决方案：

必要依赖工具，确保提前准备好：

  • Visual Studio Build Tools（含 Desktop development with C++ 工具集）
    可通过 [node-gyp 文档] 安装(Latenode Official Community)。

  • Python（推荐 2.x 或最新版本），并配置环境变量或用 npm config set python "<路径>" 指定(Codefling)。

  • GTK2 和 Cairo：canvas 在 Windows 上依赖 GTK2 下的 Cairo 图形库。可下载所有‐in‐one GTK2 bundle 解压到 C:\GTK，并将 C:\GTK\bin 加入 PATH(GitHub)。

  • （可选）如果需要 JPEG 支持，还需安装 libjpeg-turbo，默认路径为 C:\libjpeg-turbo（或 64 位对应路径），如非默认位置需用 --jpeg_root 参数指定(GitHub)。

快速安装流程：

  1. 安装以上所有依赖。

  2. 用管理员权限打开 PowerShell。运行：

    npm install -g node-gyp
npm install canvas

    或指定 Visual Studio 版本：

    npm install canvas --msvs_version=2022

  3. 如果仍报错无法加载 Cairo 动态库，可手动将 GTK bin 文件复制到 canvas 模块目录：

    C:\GTK\bin\*.dll -> node_modules\canvas\build\Release

    这一步有助于解决部分运行时加载问题(delarre.net)。

社区实战经验：

方案总结对比表

场景／状态建议操作
完整构建依赖齐全直接 npm install canvas，正常成功
无预编译二进制被下载（404）准备完整工具链并按上步骤安装
加载 DLL 失败将 C:\GTK\bin 中 DLL 拷到 build/Release 下
想快速解决安装 windows-build-tools 后再试
希望使用预编译文件可在 GitHub Releases 查找符合 Node ABI 的版本，下载放入项目中手动加载

这样一来，使用 canvas 时的常见坑都清晰明了。愿你的安装顺利，图形渲染畅通无阻！

Windows版本Node.js常见问题及操作解决方式（小白入门必备）
力挽狂澜的POWER
01-27 1604
对于regenerator-runtime/runtime.js，它通常是由于你正在使用一些使用了regenerator的库或代码，例如regenerator-transform。对于svg-baker-runtime/browser-symbol，看起来你正在尝试使用svg-baker来转换SVG文件。你需要安装这个包，但是似乎你提供的位置是不正确的。如果你正在使用vue-loader和vue-style-loader，你需要确保它们都是最新的版本，并且它们的版本是兼容的。
Canvas-lms 开源在线学习管理系统源码部署（生产版）_canvas lms(1)
2303_79055586的博客
04-26 763
在canvas安装根目录执行下面命令即可，执行命令后， 会要求你设置 canvas 默认管理员登录的电子邮件地址 和 登录密码， 还会设置一个登陆后的提示名称， 通常是您的组织名称，最后选择是否向canvas开发团队反馈使用信息：opt_in 所有信息，opt_out 不反馈任何信息 或 匿名反馈。），以及尝试 Docker部署， 整整七天， 做过无数次尝试，遇到过各种错误，几经奔溃边缘， 有解决的也有没解决的， 但幸运的是最终生产版成功了，恭喜各位付出过努力的人！
yarn 安装canvas脚本出错:
06-01
如果在使用 Yarn 安装 Canvas 时出现了错误，可能是由于系统依赖库没有正确安装或者 Node.js 的版本不兼容。以下是可能的解决方案： 1. 确保系统已经安装了 gcc、g++、make 和 Python 2.x。如果没有安装，可以使用...
// app.js 或页面的 js 文件 import * as THREE from '../../miniprogram_npm/three/index.js'; import { GLTFLoader } from '../../libs/GLTFLoader'; Page({ onReady() { wx.createSelectorQuery() .select('#canvas') .node() .exec((res) => { const canvas = res[0].node; // 兼容微信小程序：补充缺失的 addEventListener 方法 if (!canvas.addEventListener) { canvas.addEventListener = function () {}; } // 补充缺失的 style 对象，避免 setSize 时报错 if (!canvas.style) { canvas.style = {}; } // 获取设备窗口尺寸，并手动设置 canvas 的宽高 const sysInfo = wx.getSystemInfoSync(); canvas.width = sysInfo.windowWidth; canvas.height = sysInfo.windowHeight; const renderer = new THREE.WebGLRenderer({ canvas, context: canvas.getContext('webgl'), antialias: true, }); renderer.setSize(canvas.width, canvas.height); // 创建场景、相机与灯光 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, canvas.width / canvas.height, 0.1, 1000 ); camera.position.set(0, 1, 3); scene.add(new THREE.AmbientLight(0xffffff, 0.8)); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(5, 10, 7.5); scene.add(directionalLight); // 加载 glTF 模型 const loader = new GLTFLoader(); loader.load( '/assets/2.glb', // 模型文件路径 (gltf) => { scene.add(gltf.scene); }, undefined, (error) => { console.error('加载模型出错：', error); } ); // 动画循环 function animate() { renderer.render(scene, camera); canvas.requestAnimationFrame(animate); } animate(); }); }, }); 微信小程序开发，这段代码报错如下：WAServiceMainContext.js?t=wechat&s=1741278796614&v=3.7.9:1 ReferenceError: Request is not defin
03-08
</think>### 微信小程序中使用Three.js和GLTFLoader的"Request未定义"解决方案 在微信小程序中使用Three.js的`GLTFLoader`加载模型时，出现`ReferenceError: Request is not defined`错误，是由于小程序环境缺失...
【Auto.js高级应用宝典】：专家带你深入实战解决方案
Auto.js是一个基于JavaScript的Android自动化脚本工具，它允许用户编写脚本来控制和模拟用户的交互动作。本文首先对Auto.js的基本功能和使用方法进行了回顾，然后深入探讨了其在界面自动化、数据处理、脚本性能优化...
Java 8 Stream API 完全指南：优雅处理集合数据
weixin_62938484的博客
08-12 1090
摘要：Java 8的Stream API为集合处理带来了革命性变革，提供声明式的函数式编程方式。文章系统介绍了Stream的核心概念、7种创建方式、中间操作（如filter、map）和终端操作（如collect、reduce），并详解并行流优化技巧。通过电商数据分析等实战案例，展示了Stream在复杂数据处理中的优势，包括代码简洁性、并行处理能力和惰性求值特性。最后给出性能优化建议，并对比传统循环，强调Stream适用于构建数据管道而非完全替代循环。
面试实战 问题二十六 JDK 1.8 核心新特性详解
最新发布
Rockandrollman的博客
08-13 249
面试实战 问题二十六 JDK 1.8 核心新特性详解
集合，完整扩展
倾蝶羽裳，漫雨疏狂
08-12 592
本文梳理了Java集合框架中List和Set接口的核心特点与实现类。List接口有序、可重复、支持索引，包含ArrayList（查询快增删慢）、LinkedList（增删快查询慢）和Vector（线程安全）三种实现；Set接口无序、不可重复，包含HashSet（哈希表去重）、TreeSet（自动排序）和LinkedHashSet（保持插入顺序）三种实现。文章通过代码示例展示了各集合类的典型用法，并给出应用场景建议：有序需求用List，去重要求用Set；查询多用ArrayList，增删多用LinkedList
数据结构与算法p2
2401_83507683的博客
08-13 111
特点：内存不连续，通常常使用动态内存分配的方式来分配内存。数据的关系通常使用指针建立联系。链表 list。
二层业务端口相关配置
2403_87008567的博客
08-13 486
摘要：本文介绍了交换机端口配置、隔离及环路检测的关键技术。在端口配置中，详细说明了Combo端口选择、带宽控制、速率双工模式设置及监控会话的配置要点，并指出不推荐的配置组合。端口隔离功能可实现VLAN内部端口隔离，通过隔离组配置实现特定端口间的通信控制。环路检测则通过监测MAC地址移动发现网络环路，支持告警及自动维护功能，配置时需结合生成树协议确保网络稳定。这些技术共同保障了网络的安全性和可靠性。
【项目设计】高并发内存池
FSRMWK的博客
08-12 705
高并发内存池tcmalloc是谷歌开源的多线程内存管理项目，采用三级缓存架构：ThreadCache（线程局部缓存）、CentralCache（中心缓存）和PageCache（页缓存）。核心设计包括：1）分段内存对齐策略（8B-8KB）减少内碎片；2）定长内存池通过自由链表管理回收内存；3）Span机制以页为单位管理大块内存；4）基数树实现快速地址映射。相比传统malloc，tcmalloc通过线程局部缓存避免锁竞争，采用慢开始算法动态调整批量申请数量，实现高效的多线程内存分配（最大支持256KB），内碎片
LintCode第1526-N叉树的前序遍历
softstarhhy的专栏
08-12 434
/清空访问的结果 对于多次调用preorder是必不可少的。// 清空上次的结果。为保证和递归一样的“从左到右”顺序，这里反向入栈 由于栈有先进后出的特性 所以需要反转。// 前序：先访问自己。// 已访问过就跳过。给定一个 N 叉树，返回其节点值的前序遍历。思路:该题使用递归法或者迭代法。这棵树如下所示（左侧的）
Java常用工具类详解：提升开发效率的利器
vvilkin的学习备忘
08-13 609
Java作为一门成熟的编程语言，提供了丰富的工具类库，这些工具类能够帮助开发者高效完成各种常见任务，避免重复造轮子。本文将详细介绍Java中最常用的工具类，并通过大量示例展示它们的实际应用。
高效解耦：自定义内核链表实现指南（简化版）
acsdnrb的博客
08-12 371
本文介绍了一个自定义内核链表的实现方法，采用模块化设计将通用链表操作与用户数据分离。通用链表模块(kernelList.h/.c)仅处理链表节点的基本操作(初始化、增删)，完全独立于具体数据类型。用户数据模块(data.h/.c)通过宏定义实现从链表节点到数据结构的反向查找。测试代码(main.c)展示了如何使用这两个模块的接口来管理数据链表。这种解耦设计提高了代码复用性，新增数据类型时只需实现对应的数据模块，无需修改链表核心代码，体现了良好的软件工程实践。
10.反射获取静态类的属性 C#例子 WPF例子
S13461120713的博客
08-13 184
这段代码的作用是：遍历类中所有静态且公共的属性。获取每个属性的名称、类型和值。将这些信息用制表符分隔，并存储到一个字符串列表中。
WinForm之TreeView控件
weixin_66547608的博客
08-10 755
摘要：TreeView是WinForm中用于展示层级数据的核心控件，通过TreeNode节点形成父子关系结构。它具有节点管理、交互控制和样式定制功能，支持展开/折叠、选择、编辑及拖拽操作。典型应用包括组织架构展示（公司-部门-员工）、文件目录树等。开发时需注意：1)通过ImageList设置节点图标；2)使用CheckBoxes实现多选；3)采用延迟加载优化大数据性能；4)处理节点拖拽时需校验层级关系。该控件结合右键菜单、事件处理等可实现复杂树形数据管理，但需注意性能优化和交互逻辑的合理性。
如何将新建的Anaconda虚拟环境导入Juputer内核中？
qq_46394486的博客
08-12 131
本文介绍了当Jupyter Notebook无法识别已创建的虚拟环境时的解决方法。首先需要安装ipykernel库，然后通过jupyter kernelspec list查看已有内核。若目标虚拟环境不在其中，使用python -m ipykernel install --user --name=xxx命令手动添加（xxx为虚拟环境名）。文中还提供了删除内核的命令jupyter kernelspec remove yyy（yyy为内核名称）。这些操作可帮助用户灵活管理Jupyter内核。
防火墙双机热备实验
2301_80387628的博客
08-13 740
LSW3]dis stp brief //查看生成树角色。FW1开启会话同步功能。部分接口号不太一样！
spring-ai整合PGVector实现RAG
明教三十四代觉主的博客
08-10 629
本文介绍了如何结合Spring-AI框架与本地部署的Ollama大模型，通过PostgreSQL实现向量存储的RAG方案。主要内容包括：1. 本地部署Ollama平台并下载嵌入模型和生成模型；2. 安装PostgreSQL并编译Vector扩展插件；3. 搭建Spring Boot工程集成相关依赖；4. 实现文本向量化处理和存储功能。文章详细记录了环境搭建过程、向量维度匹配问题等踩坑经验，并提供了完整的代码示例。通过本地模型和向量数据库的结合，实现了基础的检索增强生成(RAG)能力，为AI应用开发提供了可落
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汪子熙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值