使用html2canvas生成截图时如何指定图片的本地保存路径

纯浏览器运行的前端代码无法实现自定义文件保存路径的需求，这是浏览器的安全沙箱限制：前端JavaScript没有权限操作用户本地文件系统的目录结构，也无法指定下载文件的存储路径，下载路径完全由浏览器自身的配置决定。
你当前使用的<a>标签download属性仅支持自定义保存的文件名，不支持指定存储路径。

• 方案1：修改浏览器默认下载路径
  打开你使用的浏览器设置，找到下载设置项，将默认下载目录修改为你需要的./Desktop/Project/Assets/Thumbnail路径，同时关闭"下载前询问保存位置"的开关，即可实现每次生成的截图自动存入目标目录，无需修改现有代码。
• 方案2：本地使用场景迁移到Electron环境
  如果你是做本地自用工具，可以将现有页面打包为Electron应用，Electron内置Node.js能力，你可以将html2canvas生成的canvas转为Buffer后，调用Node.js的fs模块直接写入指定路径，示例逻辑如下：

  // 前端侧传数据给Electron主进程
  saveAs(canvas, filename) {
    const dataURL = canvas.toDataURL("image/png");
    // 向主进程发送写入请求
    window.electronAPI.saveThumbnail(dataURL, filename)
  }
  
  // Electron主进程侧逻辑
  import fs from 'fs/promises'
  import { app } from 'electron'
  import path from 'path'
  
  ipcMain.handle('saveThumbnail', async (event, dataURL, filename) => {
    const base64 = dataURL.replace(/^data:image\/png;base64,/, '')
    const buffer = Buffer.from(base64, 'base64')
    // 自定义保存路径
    const targetPath = path.join(app.getPath('desktop'), 'Project/Assets/Thumbnail', filename)
    await fs.writeFile(targetPath, buffer)
  })
  

• 方案3：搭配本地后端服务实现
  本地启动一个简易后端服务，前端将canvas生成的图片Blob数据POST到后端接口，后端接收后直接写入本地目标路径即可。

内容的提问来源于stack exchange，提问作者jizzer