Merge pull request #44 from pixie-git/feature/PIX-39_image-export

Feature/pix 39 image export

Author: matteosusca

server/package.json

@@ -15,6 +15,7 @@
 		"express": "^4.21.2",
 		"jsonwebtoken": "^9.0.3",
 		"mongoose": "^8.9.5",
+		"pngjs": "^7.0.0",
 		"socket.io": "^4.8.1",
 		"swagger-ui-express": "^5.0.1",
 		"yamljs": "^0.3.0"
@@ -24,6 +25,7 @@
 		"@types/express": "^4.17.21",
 		"@types/jsonwebtoken": "^9.0.7",
 		"@types/node": "^20.10.6",
+		"@types/pngjs": "^6.0.5",
 		"@types/swagger-ui-express": "^4.1.8",
 		"@types/yamljs": "^0.2.34",
 		"nodemon": "^3.1.9",

server/pixie-api.yaml

@@ -175,6 +175,42 @@ paths:
           description: Forbidden (Not the owner)
         '404':
           description: Lobby not found
+  /lobbies/{id}/image:
+    get:
+      summary: Export lobby canvas as PNG
+      description: Export the current lobby canvas as a PNG image.
+      tags:
+        - Lobbies
+      security:
+        - bearerAuth: []
+      parameters:
+        - in: path
+          name: id
+          schema:
+            type: string
+          required: true
+          description: Lobby ID
+        - in: query
+          name: scale
+          schema:
+            type: integer
+            minimum: 1
+            maximum: 10
+            default: 1
+          required: false
+          description: Scale factor (1-10) for the exported image
+      responses:
+        '200':
+          description: Canvas image
+          content:
+            image/png:
+              schema:
+                type: string
+                format: binary
+        '404':
+          description: Lobby not found
+        '500':
+          description: Internal Server Error
   /lobbies/{id}/kick:
     post:
       summary: Kick a user from the lobby

server/src/controllers/lobby.controller.ts

@@ -1,5 +1,6 @@
 import { Request, Response } from 'express';
 import { LobbyService } from '../services/lobby.service.js';
+import { ImageService } from '../services/image.service.js';
 
 export class LobbyController {
 
@@ -185,4 +186,26 @@ export class LobbyController {
       return res.status(500).json({ error: 'Internal Server Error' });
     }
   }
+  // GET /api/lobbies/:id/image
+  static async getLobbyImage(req: Request, res: Response) {
+    try {
+      const { id } = req.params;
+      const lobby = await LobbyService.getById(id);
+
+      if (!lobby) {
+        return res.status(404).json({ error: 'Lobby not found' });
+      }
+
+      const scaleStr = req.query.scale as string;
+      const scale = scaleStr ? parseInt(scaleStr, 10) : 1;
+
+      const png = await ImageService.generateLobbyPng(lobby.name, scale);
+
+      res.setHeader('Content-Type', 'image/png');
+      png.pack().pipe(res);
+    } catch (error) {
+      console.error('[LobbyController] GetLobbyImage Error:', error);
+      return res.status(500).json({ error: 'Internal Server Error' });
+    }
+  }
 }

server/src/routes/api.ts

@@ -22,6 +22,7 @@ router.get("/lobbies/:id", authenticateToken, requireLobbyAccess, LobbyControlle
 router.get("/lobbies/:id/users", authenticateToken, requireLobbyAccess, LobbyController.getUsers)
 router.delete("/lobbies/:id", authenticateToken, requireLobbyOwner, LobbyController.delete)
 router.post("/lobbies/:id/kick", authenticateToken, requireLobbyOwner, LobbyController.kickUser)
+router.get("/lobbies/:id/image", authenticateToken, requireLobbyAccess, LobbyController.getLobbyImage)
 router.post("/lobbies/:id/ban", authenticateToken, requireLobbyOwner, LobbyController.banUser)
 
 export default router

server/src/services/image.service.ts

@@ -0,0 +1,42 @@
+import { PNG } from 'pngjs';
+import { CanvasService } from './canvas.service.js';
+
+export class ImageService {
+  static async generateLobbyPng(lobbyName: string, scale: number = 1): Promise<PNG> {
+    const { width, height, palette, data } = await CanvasService.getState(lobbyName);
+
+    // Validate scale to prevent memory issues
+    const validScale = Math.max(1, Math.min(Math.floor(scale), 10)); // Clamp between 1 and 10
+    const scaledWidth = width * validScale;
+    const scaledHeight = height * validScale;
+
+    const png = new PNG({ width: scaledWidth, height: scaledHeight });
+
+    // Pre-calculate RGB values from hex palette
+    const rgbPalette = palette.map(hex => {
+      const r = parseInt(hex.slice(1, 3), 16);
+      const g = parseInt(hex.slice(3, 5), 16);
+      const b = parseInt(hex.slice(5, 7), 16);
+      return [r, g, b];
+    });
+
+    // Populate PNG buffer with Nearest-Neighbor Scaling
+    for (let y = 0; y < scaledHeight; y++) {
+      const srcY = Math.floor(y / validScale);
+      for (let x = 0; x < scaledWidth; x++) {
+        const srcX = Math.floor(x / validScale);
+
+        const colorIdx = data[srcY * width + srcX];
+        const [r, g, b] = rgbPalette[colorIdx] || [0, 0, 0];
+
+        const pngIdx = (y * scaledWidth + x) << 2;
+        png.data[pngIdx] = r;
+        png.data[pngIdx + 1] = g;
+        png.data[pngIdx + 2] = b;
+        png.data[pngIdx + 3] = 255;
+      }
+    }
+
+    return png;
+  }
+}