0

My ultimate goal is to save rendered presentation MathML to a .PNG file. Knowing just enough about programming to be dangerous :-) there may be a better way to do this...I am drawing the equation on a canvas element, then trying to save the canvas element as a .PNG. I started with code found here -- https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas -- and modified as follows:

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style="border:2px solid black;" width="200" height="200">
</canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
        "<foreignObject width='100%' height='100%'>" +
        "<div xmlns='http://www.w3.org/1998/Math/MathML'     style='fontsize:40px'>" +
        "<math>" +
        "<mtable>" +
        "<mtr>" +
        "<mtd columnalign='right'>" +
            "<mn>2</mn>" +
            "<mi>x</mi>" +
            "<mo>+</mo>" +
            "<mn>3</mn>" +
            "<mo>−</mo>" +
            "<mn>3</mn>" +
         "</mtd>" +
         "<mtd columnalign='center'> " +              
            "<mo>=</mo>" +
        "</mtd>" +
        "<mtd columnalign='left'> " +              
            "<mn>9</mn>" +
            "<mo>−</mo>" +
            "<mn>3</mn>" +
         "</mtd>" +
        "</mtr>" +
        "</mtable>" +
        "</math>" +
        "</div>" +
        "</foreignObject>" +
        "</svg>";

var svg = new (self.BlobBuilder || self.MozBlobBuilder || self.WebKitBlobBuilder);
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
svg.append(data);
var url = DOMURL.createObjectURL(svg.getBlob("image/svg+xml;charset=utf-8"));
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
    window.open(canvas.toDataURL('image/png'));
};
img.src = url;

</script>

</body>
</html>

I am getting a "Security error" with no code. I have tested with Firefox, Chrome, Safari, and Internet Explorer. Running a local Apache server. Do we think the canvas is dirty, even though, according to the Mozilla doc above, its not supposed to be? Any other way to do this? Thanks in advance...

2
Contributors
6
Replies
7
Views
5 Years
Discussion Span
Last Post by mnshwarner
0

I don't think tthat svg supports mathml inside it (yet). However, I came across this (in python) - I don't know if it's any use: http://grigoriev.ru/svgmath/

had a further look and found that Chrome does not provide native support for MathML and that IE9 can't run the MathPlayer plug-in.

Edited by diafol

0

Thanks for the link, and for taking a look at my question -- I can see the mathML rendered in the canvas. The PNG just does not get created successfully.

0

The fontsize needs to be font-size . Perhaps that will make a difference? What browser are you using?

0

Well, the font certainly got larger :-), but unfortunately, still no .PNG. I'm tried it with Firefox, Internet Explorer, and Chrome under a local Apache server with a Windows 7 PC...

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.