Windows MetaFile (WMF) Parser

Common errors

• ReferenceError: ImageData is not defined

  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.
  fix In your Node.js application, add `global.ImageData = require('canvas').createImageData;` (assuming you have `canvas` installed) before initializing or using the `wmf` library.

Warnings

• gotcha 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.
  Fix: For Node.js, ensure `global.ImageData = require('canvas').createImageData;` is executed before calling any `wmf` functions.
• gotcha 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.
  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);`.

Install

• npm install wmf npm
• yarn add wmf yarn
• pnpm add wmf pnpm

Imports

• WMF
  wrong:

  import { WMF } from 'wmf';

  correct:

  import WMF from 'wmf';

  The primary API is exported as a default. For CJS environments, use `const WMF = require('wmf');`.
• WMF (CommonJS)
  wrong:

  import WMF from 'wmf';

  correct:

  const WMF = require('wmf');

  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.
• WMF (Browser Global)
  wrong:

  import WMF from 'wmf'; // In browser HTML directly

  correct:

  <script src="wmf.js"></script>
  // WMF is now globally available

  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.

Quickstart

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.

import { createCanvas, createImageData } from "canvas";
import WMF from "wmf";
import fs from "fs";

// Create a dummy WMF buffer for demonstration
// In a real application, replace this with actual WMF file data
// This is a minimal, non-functional WMF header placeholder.
// For actual use, ensure 'image.wmf' exists or generate a valid one.
const dummyWmfBuffer = Buffer.from([
  0xD7, 0xCD, 0xC6, 0x9A, 0x00, 0x00, 0x00, 0x00, // Header magic
  0x01, 0x00, 0x09, 0x00, 0x00, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
]);

// Use a real WMF file path if available, otherwise use dummy for structure
const wmfFilePath = './test_image.wmf'; // Ensure this file exists for actual execution
let wmfData: Buffer;
try {
  wmfData = fs.readFileSync(wmfFilePath);
  console.log(`Using WMF file: ${wmfFilePath}`);
} catch (error) {
  console.warn(`Could not read ${wmfFilePath}. Using dummy buffer. For actual rendering, provide a valid WMF file.`);
  wmfData = dummyWmfBuffer;
}

// Shim ImageData for Node.js environments, required by wmf
global.ImageData = createImageData;

try {
  // Extract image dimensions
  const size = WMF.image_size(wmfData);
  console.log(`Detected WMF size: ${size[0]}x${size[1]} pixels`);

  // Create a canvas with the determined dimensions
  const canvas = createCanvas(size[0], size[1]);
  const ctx = canvas.getContext('2d');

  // Draw the WMF content onto the canvas
  WMF.draw_canvas(wmfData, canvas);

  // Save the canvas content to a PNG file
  const outputPngPath = './output.png';
  const buffer = canvas.toBuffer('image/png');
  fs.writeFileSync(outputPngPath, buffer);

  console.log(`WMF content successfully rendered and saved to ${outputPngPath}`);
} catch (error) {
  console.error("Error processing WMF:", error);
}