开源协作白板 – 轻量级多用户实时协作白板系统 – 支持多用户绘图、文字编辑、图片处理

项目概述

Whiteboard 是一个基于 Node.js 的轻量级协作白板/画板系统，支持多用户实时协作绘图、文字编辑、图片处理等功能。该项目采用现代化的 Web 技术栈，提供直观的用户界面和丰富的交互功能。

核心特性

🎨 绘图功能

• 多种绘图工具：画笔、直线、矩形、圆形、三角形
• 实时协作：显示远程用户光标和绘图过程
• 撤销/重做：支持每个用户的独立操作历史
• 快捷键支持：完整的键盘快捷键系统

📱 跨平台支持

• 响应式设计：支持 PC、平板和移动设备
• 触摸优化：针对触摸屏设备优化交互体验
• 多浏览器兼容：支持主流浏览器

🔧 高级功能

• 拖拽上传：支持图片和 PDF 文件拖拽上传
• 图片处理：缩放、移动、旋转图片
• 文字编辑：支持文本输入和便签功能
• 保存导出：支持保存为图片和 JSON 格式
• WebDAV 集成：支持直接保存到云存储

技术架构

前端技术栈

// 核心依赖
- Socket.io-client: 实时通信
- Canvas API: 绘图功能
- jQuery: DOM操作
- FontAwesome: 图标系统
- Vanilla-picker: 颜色选择器

后端技术栈

// 服务器架构
- Express.js: Web服务器框架
- Socket.io: WebSocket实时通信
- Formidable: 文件上传处理
- DOMPurify: XSS防护
- WebDAV: 云存储集成

重点实现

实时协作核心 – WebSocket 通信

// 前端连接建立
const signaling_socket = io("", { path: subdir + "/ws-api" });

signaling_socket.on("connect", function () {
  console.log("Websocket connected!");

  // 接收绘图数据
  signaling_socket.on("drawToWhiteboard", function (content) {
    whiteboard.handleEventsAndData(content, true);
  });

  // 加入白板
  signaling_socket.emit("joinWhiteboard", {
    wid: whiteboardId,
    at: accessToken,
    windowWidthHeight: { w: $(window).width(), h: $(window).height() },
  });
});

绘图引擎核心 – Canvas 操作

// 绘图状态管理
const whiteboard = {
  canvas: null,
  ctx: null,
  drawcolor: "black",
  tool: "mouse",
  thickness: 4,
  drawFlag: false,

  // 绘制路径
  drawPath: function (coords, color, thickness, lineCap) {
    this.ctx.strokeStyle = color;
    this.ctx.lineWidth = thickness;
    this.ctx.lineCap = lineCap;
    this.ctx.beginPath();
    this.ctx.moveTo(coords[0].x, coords[0].y);

    for (let i = 1; i < coords.length; i++) {
      this.ctx.lineTo(coords[i].x, coords[i].y);
    }
    this.ctx.stroke();
  },
};

服务器端处理 – 数据广播

// 服务器端Socket处理
io.on("connection", function (socket) {
  socket.on("joinWhiteboard", function (data) {
    socket.join(data.wid);
    socket.whiteboardId = data.wid;
    socket.username = data.username;

    // 广播用户加入信息
    socket.to(data.wid).emit("userJoined", {
      username: data.username,
      socketId: socket.id,
    });
  });

  socket.on("drawToWhiteboard", function (data) {
    // 广播绘图数据给其他用户
    socket.to(data.wid).emit("drawToWhiteboard", {
      coords: data.coords,
      color: data.color,
      thickness: data.thickness,
      tool: data.tool,
      username: socket.username,
    });
  });
});

文件上传处理

// 文件上传API
app.post("/api/upload", function (req, res) {
  const form = new formidable.IncomingForm();
  form.uploadDir = path.join(__dirname, "..", "public", "uploads");

  form.parse(req, function (err, fields, files) {
    if (err) {
      res.status(500).json({ error: "Upload failed" });
      return;
    }

    // 处理上传的文件
    const file = files.file;
    const safePath = getSafeFilePath(file.filepath);

    res.json({
      success: true,
      filepath: "/uploads/" + path.basename(safePath),
    });
  });
});

快捷键系统

// 快捷键配置
const keybinds = {
  "ctrl+z": "undo",
  "ctrl+y": "redo",
  "ctrl+s": "saveImage",
  "ctrl+shift+k": "saveJSON",
  "ctrl+p": "penTool",
  "ctrl+e": "eraserTool",
  "ctrl+l": "lineTool",
  "ctrl+r": "rectangleTool",
  "ctrl+c": "circleTool",
};

// 快捷键处理
keymage(keybinds, function (event, handler) {
  event.preventDefault();
  shortcutFunctions[handler]();
});

部署方式

# 安装依赖
npm install

# 生产环境启动
npm run start:prod

# 开发环境启动
npm run start:dev

项目优势

1. 轻量级：核心代码简洁，依赖少，启动快速
2. 易扩展：模块化设计，便于功能扩展
3. 高性能：Canvas 绘图，实时协作流畅
4. 跨平台：支持多种设备和浏览器
5. 开源免费：MIT 许可证，可自由使用和修改

应用场景

• 在线教育：远程教学、课堂互动
• 团队协作：项目讨论、头脑风暴
• 设计评审：UI/UX 设计反馈
• 会议记录：会议笔记、流程图绘制
• 创意工作：草图绘制、创意表达

技术亮点

• 实时协作：基于 WebSocket 的低延迟通信
• 绘图优化：智能路径平滑和性能优化
• 安全防护：XSS 防护和文件上传安全检查
• 用户体验：直观的界面设计和流畅的交互
• 可定制性：丰富的配置选项和主题支持

---

项目地址: https://github.com/cracker0dks/whiteboard
在线演示: https://cloud13.de/testwhiteboard/