Howto: Export JSXGraph constructions

You created a wonderful mathlet and now you want to include it into a static environment like a pdf document. To do so you have to export the construction into a format that can be processed by e.g. your word processor. Based on the rendering techniques used in JSXGraph to display the graphics you have the choice between SVG and PNG. In this post we will describe several methods how you can extract a JSXGraph construction into either a SVG or PNG encoded static image.

Regardless of the export format the results always show almost every element present on the board. One exception are text elements. This is because JSXGraph is using HTML text elements to display all kinds of texts like element labels and text elements. But HTML texts won’t show up in the exported image (except the screenshot method) so we have to set the text display to internal before we initialize the board with JXG.JSXGraph.initBoard():

JXG.Options.text.display = 'internal';

But texts with the display property set 'internal' can’t process HTML entities and tags.

Screenshot (quick’n’dirty)

Make a screenshot and crop the resulting image if necessary. The advantage of this approach is that you do not lose the text elements if the text display type is set to ‘html’. There are plenty of instructions about how to make a screenshot for your favorite operating system so we won’t cover it here as it is not in the scope of this article.

PNG

One of the rendering techniques JSXGraph uses is the canvas element. This element allows the user to save the current display as a png file. See this table to make sure your browser supports the canvas element. To enforce the canvas renderer we set

JXG.Options.renderer = 'canvas';

before initializing the board with JXG.JSXGraph.initBoard(). To save the construction as a PNG file right click on the board and choose “Save image as”. To access the png data from JavaScript use the toDataURL() method of the canvas element:

var board = JXG.JSXGraph.initBoard(...);
...
board.renderer.canvasRoot.toDataURL();

The result is a Base64 encoded PNG file with a Data URI scheme prefix.

This method also works with node.js if the canvas package is installed. To store the image directly into a file you can use createPNGSTream()

var fs = require('fs'),
    out = fs.createWriteStream(__dirname + '/mathlet.png'),
    stream = board.renderer.canvasRoot.createPNGStream();
    
stream.on('data', function(chunk){
  out.write(chunk);
});

SVG

To export a JSXGraph mathlet to SVG you need to make sure that the renderer used is in fact the SVG renderer (which is the default renderer). You can do this by looking at

board.renderer.type

which should equal 'svg', or by enforcing the SVG renderer by setting JXG.Options.renderer to 'svg'. Check this table to see if your browser supports SVG.

To export the mathlet to SVG we are going to use the XMLSerializer:

var svg = new XMLSerializer().serializeToString(board.renderer.svgRoot);

This will get you the whole SVG tree you can save in a .svg file.

PNG from SVG rendered mathlet

If we set the xmlns attribute of the SVG root element

board.renderer.svgRoot.setAttribute("xmlns", "http://www.w3.org/2000/svg");

and export it to an SVG string using the method described above, we can copy the mathlet onto a canvas and export it to PNG:

var timg = new Image(600, 450), 
    ctx = canvas.getContext('2d');
    
timg.onload = function () {
    pos = board.getMousePosition(e);
    ctx.clearRect(0, 0, 600, 450);
    ctx.drawImage(timg, 0, 0);
};
timg.src = 'data:image/svg+xml,' + svg;

var png = canvas.toDataURL();