g21589 / wmf2canvas

Convert WMF/EMF (Windows Metafile) image file to HTML5 canvas by using pure javascript.

wmf2canvas

Convert WMF (Windows Metafile) image file to HTML5 canvas by using pure javascript.

Online Demo

http://g21589.github.io/wmf2canvas

Usage

<input type="file" id="file" accept="image/x-wmf" />
<canvas id="canvas"></canvas>

<script>
let wmf = new WMFConverter();   // new the WMFConverter object
	
let canvas = document.getElementById("canvas");
let file = document.getElementById("file");
	
file.onchange = function() {
	let filename = this.files[0];
	wmf.toCanvas(filename, canvas); // load the wmf file and convert to canvas graph
}
</script>

Version

0.9.1

License

MIT

wmf2canvas's Issues

Uncaught ReferenceError: WMFConverter is not defined

Chrome 版本 70.0.3538.67（64 bit）,http://g21589.github.io/wmf2canvas sample :
let wmf = new WMFConverter(); // Uncaught ReferenceError: WMFConverter is not defined

Change width and height of image drawn on canvas

I need to change the height and width of the the resultant canvas image while drawing it in canvas

EMF support?

Thank you for making your library available.

The project mentions both WMF and EMF, but as far as I can see, there is no actual support for EMF. Am I missing something, or is EMF support just in the planning stages?

not support emf

emf.zip
this is a sample file.

Font "Escapement" (angle)

This affects rotated text (for example, a vertical axis title in a chart)

The META_CREATEFONTINDIRECT record stores the angle in the Escapement field (https://docs.microsoft.com/en-us/openspecs/windows_protocols/ms-wmf/dabb1ed6-e5e8-4243-80ed-e63443e5484f). To be more precise, it stores the angle in tenths of a degree.

To support text angle, the following mantra works:

ctx.save();
ctx.translate(x_offset, y_offset);
ctx.rotate(-(escapement / 10) * Math.PI / 180);
ctx.fillText(text, 0, 0);
ctx.translate(-x_offset, -y_offset);
ctx.restore();