我看你已经用Canvas完成了视频帧的截图操作，就差最后一步把这张图保存到本地文件夹啦！你的代码已经实现了从视频到Canvas绘制的核心步骤，只需要补充几行代码就能完成保存功能，下面给你两种常用的实现方式：

方法一：创建下载链接让用户手动保存（浏览器端通用） #

因为普通浏览器出于安全限制，不能直接写入本地文件夹，所以最通用的方式是生成一个下载链接，让用户确认保存路径。你可以把sendDataCAPTURE函数修改成这样：

video = document.getElementById('localVideo');
img = document.getElementById('image');
CAPTURE = document.getElementById('Capture');
CAPTURE.onclick = sendDataCAPTURE;
const canvas = document.createElement('canvas');

function sendDataCAPTURE() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0);
  
  // 新增截图保存逻辑
  const dataURL = canvas.toDataURL('image/png'); // 生成PNG格式的base64图片链接，也可替换为image/jpeg
  const downloadLink = document.createElement('a');
  
  downloadLink.href = dataURL;
  downloadLink.download = '视频截图.png'; // 设置下载后的文件名，可自定义
  downloadLink.style.display = 'none'; // 隐藏临时链接
  
  document.body.appendChild(downloadLink);
  downloadLink.click(); // 自动触发下载
  document.body.removeChild(downloadLink); // 下载完成后移除临时元素
  
  // 如需在页面预览截图，保留这行代码
  img.src = dataURL;
}

关键步骤说明： #

• canvas.toDataURL('image/png')：完整生成图片的base64格式链接，补全你之前未写完的格式参数即可
• 临时<a>标签：通过download属性指定文件名，调用click()触发浏览器保存对话框，让用户选择目标文件夹

方法二：桌面应用直接写入文件夹（如Electron） #

如果你是在Electron这类拥有本地文件系统权限的桌面应用中开发，可以直接用Node.js的文件模块写入文件，无需用户手动选择路径：

const fs = require('fs');
const path = require('path');

// 原有元素获取代码
video = document.getElementById('localVideo');
img = document.getElementById('image');
CAPTURE = document.getElementById('Capture');
CAPTURE.onclick = sendDataCAPTURE;
const canvas = document.createElement('canvas');

function sendDataCAPTURE() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0);
  
  // 将base64格式转换为可写入的Buffer
  const dataURL = canvas.toDataURL('image/png');
  const base64Content = dataURL.replace(/^data:image\/png;base64,/, '');
  const imageBuffer = Buffer.from(base64Content, 'base64');
  
  // 指定保存路径，示例为项目下的screenshots文件夹
  const saveDirectory = path.join(__dirname, 'screenshots');
  const savePath = path.join(saveDirectory, '视频截图.png');
  
  // 确保保存文件夹存在，不存在则自动创建
  fs.mkdirSync(saveDirectory, { recursive: true });
  // 写入文件到本地
  fs.writeFileSync(savePath, imageBuffer);
  
  console.log(`截图已成功保存到：${savePath}`);
  img.src = dataURL; // 页面预览截图
}

注意：这种方式仅适用于有文件系统访问权限的环境，普通网页浏览器是不允许直接操作本地文件的哦！

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