MathJax svg output and then converting it to png

Question

hey guys so im trying to convert my mathjax to svg and then convert it to png but im running into a problem, and the problem is that i cant convert my mathjax to svg i tried to use this solution but it's working as i get the variable is undefined error (mjOut is undefined) :/. and the weird thing is that im able to render mathjax perfectly fine. to elaborate a bit more here is my code (its almost the same) also a screenshot:

var mj2img = function(texstring, callback) {
    var input = texstring;
    var wrapper = document.createElement("div");
    wrapper.innerHTML = input;
    var output = { svg: "", img: ""};
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, wrapper]);
    MathJax.Hub.Queue(function() {
        //This is where the error is (mjOut is undefined)
        var mjOut = wrapper.getElementsByTagName("svg")[0];
        console.log(wrapper.getElementsByTagName("svg"));
        mjOut.setAttribute("xmlns", "http://www.w3.org/2000/svg");
        // thanks, https://spin.atomicobject.com/2014/01/21/convert-svg-to-png/
        output.svg = mjOut.outerHTML;
        var image = new Image();
        image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(output.svg)));
        image.onload = function() {
            var canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            var context = canvas.getContext('2d');
            context.drawImage(image, 0, 0);
            output.img = canvas.toDataURL('image/png');
            callback(output);
        };
    });
}
$("#equation-write").click(function()
{
    //Let's assume its sin(30) = 0.5.
    var TeX = $("#MathInput").val();
    var jax = MathJax.Hub.getAllJax()[0];
    mj2img(TeX, function(output){
        // console.log(texstring);
        console.log(output.img);
    }

You might want to post a self-contained example that exhibits the problem. — Peter Krautzberger, Mar 08 '18 at 15:16

score 2 · Answer 1 · answered Mar 19 '18 at 19:48

The console output you have shown indicates that the getElementsByTagName() call has returned no elements (the HTMLCollection is empty), and so mjOut should be null. This means there are no svg elements in the wrapper.

The question is: why is there no svg element in the wrapper? Well, it could be that the renderer is set to one of the other renders rather than the SVG renderer (you haven't shown the MathJax configuration file that you used, though the renderer can be set by the MathJax contextual menu, so it might not be the one from the config file anyway). But more likely, it means that the content of the wrapper doesn't contain any properly-delimited mathematics.

Remember that TeX math is enclosed in $...$ or \[...\] (or other possibilities depending on the configuration). If $("#MathInput").val() does not include such delimiters, then MathJax won't find any math to process, and so won't produce any svg elements. (Again, you haven't said what the input format is that you are using, but since the code uses TeX as the variable, I'm assuming it is TeX code, not AsciiMath or MathML.)

Note that the example in the post you link to does include delimiters: "\\[f: X \\to Y\\]". Here, the backslashes are doubled because they have special meaning inside javascript string literals, so you need to use \\ to get a single \ within the string itself. Since you are getting your string from the contents of an input or textarea tag (presumably, again, you didn't include that in your post), you won't need to double the backslashes when you type in the value there. If you did, then that could also account for why you didn't get any math MathJax svg output.

In any case, there is not enough information here to diagnose the problem. A complete example as runnable code (like in the post you link to) would be a big help. If you add console.log(wrapper.outerHTML); after your other console message, you might be able to see what is actually in the div that you are searching, and will be able to tell if MathJax has found the math or not.

score 0 · Answer 2 · answered Dec 23 '19 at 07:01

It might be relative to your mathjax version. Try changing

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>

to

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js"></script>

MathJax svg output and then converting it to png

2 Answers2