如何将浏览器Canvas捕获的图片上传至Node.js服务器？

我来帮你搞定这个需求！你已经实现了图片下载功能，只需要在前端添加上传逻辑，再配合后端的文件接收代码就能完成上传。下面分前端修改和后端实现两部分来说明：

一、前端代码修改（基于你现有代码扩展） #

在捕获按钮的点击事件里新增上传调用，再实现一个专门的上传函数，把Canvas内容转成高效的Blob格式后通过FormData发送到后端：

(function(){
  var video=document.getElementById('video'),
      canvas = document.getElementById('canvas'),
      vendorUrl = window.URL || window.webkitURL;
      context = canvas.getContext('2d');

  navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

  navigator.getMedia({
    video: true,
    audio: false
  }, function(stream){
    video.srcObject=stream;
    video.play();
  }, function(error){
    console.error('获取摄像头失败:', error);
  });

  document.getElementById('capture').addEventListener('click',function(){
    context.drawImage(video,0,0,400,300);
    // 保留原有的下载功能
    download();
    // 新增上传逻辑
    uploadCanvasImage();
  });

})();

function download() {
  var download = document.getElementById("capture");
  var image = document.getElementById("canvas").toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
  download.setAttribute("href", image);
  download.setAttribute("download","archive.png");
}

// 新增的图片上传函数
function uploadCanvasImage() {
  const canvas = document.getElementById('canvas');
  // 将Canvas内容转为PNG格式的Blob（比base64更适合文件传输）
  canvas.toBlob(function(blob) {
    const formData = new FormData();
    // 把Blob包装成FormData，参数分别是字段名、Blob对象、自定义文件名
    formData.append('image', blob, 'captured-image.png');
    
    // 使用fetch发送POST请求到后端的/upload接口
    fetch('/upload', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      console.log('上传成功:', data);
      alert('图片上传成功！');
    })
    .catch(error => {
      console.error('上传失败:', error);
      alert('图片上传失败，请检查服务器状态');
    });
  }, 'image/png');
}

二、Node.js后端实现（接收上传的图片） #

我们用Express框架配合Multer中间件来处理文件上传，这是最常用且稳定的方案：

1. 初始化项目并安装依赖 #

创建一个新文件夹，打开终端执行以下命令：

npm init -y
npm install express multer cors

（cors用来处理跨域问题，如果前端和后端在同一域名下可以不用，但建议加上避免不必要的麻烦）

2. 编写服务器代码（新建server.js文件） #

const express = require('express');
const multer = require('multer');
const cors = require('cors');
const app = express();
const port = 3000;

// 启用CORS，允许跨域请求
app.use(cors());

// 配置Multer：指定文件存储路径和唯一文件名规则
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    // 请手动创建uploads文件夹，否则会报错
    cb(null, './uploads/');
  },
  filename: function (req, file, cb) {
    // 生成唯一文件名，避免重复覆盖
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, `captured-${uniqueSuffix}.png`);
  }
});

const upload = multer({ storage: storage });

// 处理上传请求的接口，upload.single('image')对应前端FormData里的'image'字段
app.post('/upload', upload.single('image'), (req, res) => {
  if (!req.file) {
    return res.status(400).json({ message: '未检测到上传的文件' });
  }
  // 返回上传成功的信息和文件详情
  res.json({
    message: '图片上传成功',
    filePath: req.file.path,
    fileName: req.file.filename
  });
});

// 托管前端静态文件（把你的HTML页面放在public文件夹里）
app.use(express.static('public'));

// 启动服务器
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

3. 整理项目结构 #

把你的前端HTML页面放在新建的public文件夹里，同时手动创建uploads文件夹用来存储上传的图片：

你的项目文件夹/
├─ public/
│  └─ index.html （包含video、canvas、capture按钮的页面）
├─ uploads/ （手动创建）
└─ server.js

三、运行测试 #

1. 在终端执行node server.js启动服务器
2. 打开浏览器访问http://localhost:3000
3. 点击捕获按钮，图片会同时下载到本地，并且上传到服务器的uploads文件夹里

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