項目概述
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/
?開源協作白板 - 輕量級多用戶實時協作白板系統 - 支持多用戶繪圖、文字編輯、圖片處理 - 高質量源碼分享平臺-免費下載各類網站源碼與模板及前沿技術分享
指南)
