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

项目概述

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/

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