Giter Site home page Giter Site logo

sheetjs / js-wmf Goto Github PK

View Code? Open in Web Editor NEW
18.0 3.0 11.0 91 KB

Windows MetaFile (wmf) processor

Home Page: https://oss.sheetjs.com/js-wmf

License: Apache License 2.0

Makefile 0.96% HTML 9.03% JavaScript 7.72% TypeScript 82.28%
wmf javascript canvas image

js-wmf's Introduction

js-wmf

Processor for Windows MetaFile (WMF) files in JS (for the browser and nodejs).

Installation

With npm:

$ npm install wmf

In the browser:

<script src="wmf.js"></script>

The browser exposes a variable WMF.

Usage

The data argument is expected to be an ArrayBuffer, Uint8Array or Buffer

  • WMF.image_size(data) extracts the image offset and extents, returns an Array [width, height] where both metrics are measured in pixels.

  • WMF.draw_canvas(data, canvas) parses the WMF and draws to a Canvas.

Notes

  • The library assumes the global ImageData is available. For nodejs-powered canvas implementations, a shim must be exposed as a global. Using the canvas npm package:
const { createImageData } = require("canvas");
global.ImageData = createImageData;
  • OffscreenCanvas in Chrome and some other Canvas implementations require the dimensions in the constructor:
const size = WMF.image_size(data);
const canvas = new OffscreenCanvas(size[0], size[1]);

Examples

Browser Fetch into canvas (click to show)
// assume `canvas` is a DOM element
(async() => {
  const res = await fetch("url/for/image.wmf");
  const ab = await res.arrayBuffer();
  WMF.draw_canvas(ab, document.getElementById("canvas"));
})();
NodeJS (using `canvas` npm module) (click to show)
const { createCanvas, createImageData } = require("canvas");
global.ImageData = createImageData;

const size = WMF.image_size(data);
const canvas = createCanvas(size[0], size[1]);
WMF.draw_canvas(data, canvas);

License

Please consult the attached LICENSE file for details. All rights not explicitly granted by the Apache 2.0 License are reserved by the Original Author.

References

  • MS-WMF: Windows Metafile Format

js-wmf's People

Contributors

sheetjsdev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

js-wmf's Issues

Support WMF files that start with META_PLACEABLE record

Hi there, according to MS-WMF 2.3.2.3, it seems that WMF files may start with a META_PLACEABLE record before the META_HEADER record. These files currently give a "Header: Type 52695 must be 1 or 2" error with js-wmf.

I think these files could be supported by updating image_size_prepped_bytes() to check for files that start with the META_PLACEABLE signature of 0x9AC6CDD7, and then skipping ahead 22 bytes to get to the actual META_HEADER record.

As for sample files, it looks like most of the "iPres Systems Showcase" WMF files are of this "placeable" variant.

I'm happy to work on a PR if you would like.

Error: the string "Header: Type 52695 must be 1 or 2" was thrown, throw an Error :)

The sample file: BIRD.WMF.zip

The sample code:

var jsEnv = require("browser-or-node");
var canvas = require("canvas");
// eslint-disable-next-line no-undef
global.ImageData = canvas.createImageData;

var data = fs.readFileSync(path.join(__dirname, 'test-data', 'BIRD.WMF'));
var WMF;
if (jsEnv.isNode) {
    WMF = require('wmf/dist/wmf.node');
} else {
    WMF = require('wmf/dist/wmf');
}
console.log(typeof data);
var size = WMF.image_size(data);
console.log(size);

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.