{"id":16585,"library":"wmf","title":"Windows MetaFile (WMF) Parser","description":"The `wmf` package, currently at stable version 1.0.2, provides a pure JavaScript parser and renderer for Windows MetaFile (WMF) image files. It enables developers to extract image dimensions and draw WMF content onto HTML Canvas elements in both browser and Node.js environments. Unlike solutions that often require server-side processing or native libraries for WMF parsing, `wmf` offers a client-side or server-side (Node.js) JavaScript-only approach. Its primary purpose is to make a legacy image format accessible within modern web and Node.js applications. The library is specialized for this niche, implying a stable but infrequent release cadence focused on maintaining compatibility and reliability for WMF processing rather than rapid feature expansion. It ships with TypeScript types, facilitating type-safe development.","status":"active","version":"1.0.2","language":"javascript","source_language":"en","source_url":"git://github.com/SheetJS/js-wmf","tags":["javascript","wmf","image","office","word","typescript"],"install":[{"cmd":"npm install wmf","lang":"bash","label":"npm"},{"cmd":"yarn add wmf","lang":"bash","label":"yarn"},{"cmd":"pnpm add wmf","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for server-side WMF rendering in Node.js environments.","package":"canvas","optional":false}],"imports":[{"note":"The primary API is exported as a default. For CJS environments, use `const WMF = require('wmf');`.","wrong":"import { WMF } from 'wmf';","symbol":"WMF","correct":"import WMF from 'wmf';"},{"note":"This is the correct way to import `wmf` in CommonJS modules, primarily for older Node.js versions or specific module setups. Type declarations should still allow ESM import syntax in TypeScript.","wrong":"import WMF from 'wmf';","symbol":"WMF (CommonJS)","correct":"const WMF = require('wmf');"},{"note":"When included via a script tag in the browser, `wmf.js` exposes the `WMF` object directly on the global scope, making module imports unnecessary and non-functional without a module loader.","wrong":"import WMF from 'wmf'; // In browser HTML directly","symbol":"WMF (Browser Global)","correct":"<script src=\"wmf.js\"></script>\n// WMF is now globally available"}],"quickstart":{"code":"import { createCanvas, createImageData } from \"canvas\";\nimport WMF from \"wmf\";\nimport fs from \"fs\";\n\n// Create a dummy WMF buffer for demonstration\n// In a real application, replace this with actual WMF file data\n// This is a minimal, non-functional WMF header placeholder.\n// For actual use, ensure 'image.wmf' exists or generate a valid one.\nconst dummyWmfBuffer = Buffer.from([\n  0xD7, 0xCD, 0xC6, 0x9A, 0x00, 0x00, 0x00, 0x00, // Header magic\n  0x01, 0x00, 0x09, 0x00, 0x00, 0x00, 0x00, 0x00,\n  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,\n  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,\n  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00\n]);\n\n// Use a real WMF file path if available, otherwise use dummy for structure\nconst wmfFilePath = './test_image.wmf'; // Ensure this file exists for actual execution\nlet wmfData: Buffer;\ntry {\n  wmfData = fs.readFileSync(wmfFilePath);\n  console.log(`Using WMF file: ${wmfFilePath}`);\n} catch (error) {\n  console.warn(`Could not read ${wmfFilePath}. Using dummy buffer. For actual rendering, provide a valid WMF file.`);\n  wmfData = dummyWmfBuffer;\n}\n\n// Shim ImageData for Node.js environments, required by wmf\nglobal.ImageData = createImageData;\n\ntry {\n  // Extract image dimensions\n  const size = WMF.image_size(wmfData);\n  console.log(`Detected WMF size: ${size[0]}x${size[1]} pixels`);\n\n  // Create a canvas with the determined dimensions\n  const canvas = createCanvas(size[0], size[1]);\n  const ctx = canvas.getContext('2d');\n\n  // Draw the WMF content onto the canvas\n  WMF.draw_canvas(wmfData, canvas);\n\n  // Save the canvas content to a PNG file\n  const outputPngPath = './output.png';\n  const buffer = canvas.toBuffer('image/png');\n  fs.writeFileSync(outputPngPath, buffer);\n\n  console.log(`WMF content successfully rendered and saved to ${outputPngPath}`);\n} catch (error) {\n  console.error(\"Error processing WMF:\", error);\n}\n","lang":"typescript","description":"This quickstart demonstrates how to parse a WMF file in Node.js, shim the required `ImageData` global, draw its content onto a `node-canvas` instance, and save the result as a PNG image. It covers basic setup for server-side WMF processing."},"warnings":[{"fix":"For Node.js, ensure `global.ImageData = require('canvas').createImageData;` is executed before calling any `wmf` functions.","message":"The `wmf` library depends on a global `ImageData` constructor. In Node.js environments, this browser API must be manually shimmed using a compatible implementation, such as `createImageData` from the `canvas` npm package.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"First, use `WMF.image_size(data)` to get the WMF's dimensions, then create `const canvas = new OffscreenCanvas(width, height);` before passing it to `WMF.draw_canvas(data, canvas);`.","message":"When using `OffscreenCanvas` with `wmf.draw_canvas`, some implementations (like Chrome's) require the canvas dimensions to be passed to its constructor. Failing to do so can result in an uninitialized or incorrectly sized canvas.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"In your Node.js application, add `global.ImageData = require('canvas').createImageData;` (assuming you have `canvas` installed) before initializing or using the `wmf` library.","cause":"The `wmf` library attempts to use the `ImageData` constructor, which is a browser-specific global API, in a Node.js environment without it being shimmed.","error":"ReferenceError: ImageData is not defined"}],"ecosystem":"npm"}