不能直接用 canvas 模块生成图片，因其需原生编译、依赖 node-gyp 和系统构建工具，在 windows 易报错、mac/linux 因 node 升级易失效；而 sharp 零编译、纯 js、预编译二进制，安装快、启动快、内存低，3 行代码即可生成指定尺寸/颜色占位图，支持多格式与水印，配合 vscode tasks.json 可交互式快速生成。
为什么不能直接用 canvas 模块生成图片？
VSCode 本身不带 Node 图形能力，canvas 模块需要原生编译（依赖 node-gyp 和系统构建工具），在 Windows 上常报 gyp ERR! configure error，Mac/Linux 也容易因 Node 版本升级失效。这不是 VSCode 的问题，而是 canvas 对运行时环境太敏感——Mock 场景下没必要扛这个风险。
用 sharp 替代：零编译、纯 JS、支持流式写入
sharp 是目前最轻量可靠的 Node 图片处理方案，它用 libvips 做底层但提供预编译二进制，安装快、启动快、内存占用低。Mock 图片生成的核心诉求是「快速返回指定尺寸/颜色的占位图」，sharp 完全胜任：
-
npm install sharp后无需额外配置，Node 14+ 直接可用 - 生成 200×150 红色占位图只需 3 行代码，比
canvas少写 80% 样板 - 输出格式灵活：
.png、.jpg、.webp可选，还能加文字水印
示例（保存为 mock-image.js）：
const sharp = require('sharp');
sharp({ width: 300, height: 200, channels: 4, background: { r: 255, g: 100, b: 100, alpha: 1 } })
.png()
.toFile('mock-red.png')
.then(() => console.log('✅ 已生成 mock-red.png'))
.catch(err => console.error('❌', err.message));
VSCode 中一键运行：用 tasks.json 绑定快捷键
每次改尺寸都手动敲 node mock-image.js 太慢。VSCode 的 tasks.json 可以把参数变成可编辑变量，按 Ctrl+Shift+P → 「Tasks: Run Task」选「Generate Mock Image」就能弹出输入框：
- 在项目根目录建
.vscode/tasks.json - 定义
args为["${input:width}", "${input:height}", "${input:color}"] - 配合
inputs配置三个 prompt，用户输入即传参
这样你不用改代码，只输 400、300、00ff00 就能生成绿色图——比开终端快 3 秒以上。
注意 sharp 的默认 alpha 行为和路径权限
常见坑有两个：
-
sharp({ width, height })默认生成透明背景（alpha=0），浏览器里看是黑底，实际是透明。Mock 时若要纯色，必须显式写background: { r, g, b, alpha: 1 } - 输出路径如果含中文或空格（如
./测试/mock.png），sharp会静默失败，错误也不抛出。建议统一用英文路径 +path.resolve(__dirname, 'output', 'mock.png')
生成后记得检查文件大小：正常 1–5KB，若超过 20KB 说明没压缩（漏写了 .png() 或 .jpeg({ quality: 80 })）。
