项目概述
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项目优势
- 轻量级：核心代码简洁，依赖少，启动快速
- 易扩展：模块化设计，便于功能扩展
- 高性能：Canvas 绘图，实时协作流畅
- 跨平台：支持多种设备和浏览器
- 开源免费：MIT 许可证，可自由使用和修改
应用场景
- 在线教育：远程教学、课堂互动
- 团队协作：项目讨论、头脑风暴
- 设计评审：UI/UX 设计反馈
- 会议记录：会议笔记、流程图绘制
- 创意工作：草图绘制、创意表达
技术亮点
- 实时协作：基于 WebSocket 的低延迟通信
- 绘图优化：智能路径平滑和性能优化
- 安全防护：XSS 防护和文件上传安全检查
- 用户体验：直观的界面设计和流畅的交互
- 可定制性：丰富的配置选项和主题支持
项目地址: https://github.com/cracker0dks/whiteboard
在线演示: https://cloud13.de/testwhiteboard/
开源协作白板 - 轻量级多用户实时协作白板系统 - 支持多用户绘图、文字编辑、图片处理 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享
指南)
