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

项目概述

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/

开源协作白板 - 轻量级多用户实时协作白板系统 - 支持多用户绘图、文字编辑、图片处理 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享

相关推荐
lypzcgf6 小时前
Coze源码分析-API授权-删除令牌-后端源码
数据库·人工智能·后端·系统架构·开源·go·安全架构
AI码上来8 小时前
再见 K8s!3款开源的云原生部署工具
云原生·kubernetes·开源
FIT2CLOUD飞致云8 小时前
学习笔记 | 如何将MaxKB应用对外发布为MCP服务?
人工智能·开源
ajassi20008 小时前
开源 C++ QT Widget 开发(十)IPC进程间通信--共享内存
linux·c++·qt·开源
Github项目推荐10 小时前
你的测试又慢又不可靠-因为你测错了东西
程序员·开源
前端老鹰12 小时前
Node.js 命令行交互王者:inquirer 模块实战指南
后端·node.js
CoderJia程序员甲13 小时前
GitHub 热榜项目 - 日榜(2025-08-30)
ai·开源·大模型·github·ai教程
Cdlblbq13 小时前
使用原生excel方式导入excel
node.js
GitCode官方13 小时前
直播预告 | Excelize 跨语言实战
开源·excel·gitcode