Skip to main content
Glama

drawing_getCanvasPng

Export the current drawing canvas as a PNG image with base64 encoding for saving or sharing.

Instructions

Get the current drawing canvas as a PNG image (base64 encoded).

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault

No arguments

Implementation Reference

  • Tool handler in handleToolCall switch statement: checks for currentCanvas, calls drawingTool.getCanvasPngBase64, returns ImageContent with base64 PNG data.
    case "drawing_getCanvasPng": // Updated tool name if (!currentCanvas) { return { content: [{ type: "text", text: "Error: No canvas generated. Please use 'drawing_generateCanvas' first.", }], isError: true, }; } try { const base64Png = await drawingTool.getCanvasPngBase64(currentCanvas); // Use getCanvasPngBase64 return { content: [ { type: "text", text: "PNG image of the canvas (base64 encoded):", // Informative text }, { type: "image", // Use 'image' content type data: base64Png, mimeType: "image/png", } as ImageContent, ], isError: false, }; } catch (error) { return { content: [{ type: "text", text: `Failed to get canvas PNG data: ${(error as Error).message}`, }], isError: true, }; }
  • Input schema definition for the tool: no required parameters.
    { name: "drawing_getCanvasPng", // Changed name to reflect PNG output description: "Get the current drawing canvas as a PNG image (base64 encoded).", // Updated description inputSchema: { type: "object", properties: {}, // No input needed to get canvas data required: [], }, },
  • index.ts:286-288 (registration)
    Registers all tools, including drawing_getCanvasPng, via ListToolsRequestSchema handler returning the TOOLS array.
    server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: TOOLS, }));
  • Core PNG generation logic in Canvas class: populates PNG data from pixels and packs to base64 using pngjs.
    async getCanvasPngBase64(): Promise<string> { const png = new PNG({ width: this.width, height: this.height, bitDepth: 8, colorType: 6, // truecolor with alpha inputColorType: 6, }); for (let y = 0; y < this.height; y++) { for (let x = 0; x < this.width; x++) { const pixel = this.pixels[y][x]; const idx = (y * this.width + x) << 2; // Faster than * 4 png.data[idx] = pixel.r; png.data[idx + 1] = pixel.g; png.data[idx + 2] = pixel.b; png.data[idx + 3] = pixel.a; } } return new Promise<string>((resolve, reject) => { const chunks: Buffer[] = []; png.pack() .on('data', function(chunk) { chunks.push(chunk); }) .on('end', function() { const pngBuffer = Buffer.concat(chunks); const base64String = pngBuffer.toString('base64'); resolve(base64String); }) .on('error', function(error) { reject(error); }); }); }
  • Exported wrapper function for getCanvasPngBase64 that validates canvas and delegates to Canvas instance method.
    function getCanvasPngBase64(canvas: Canvas): Promise<string> { if (!(canvas instanceof Canvas)) { throw new Error("Invalid canvas object provided."); } return canvas.getCanvasPngBase64(); }

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/flrngel/mcp-painter'

If you have feedback or need assistance with the MCP directory API, please join our Discord server