HTML with TeX formulas to images

Question

How is it possible, with MathJax or another JavaScript lib, to parse an input HTML file with some TeX math formulas and produce an output file with the formulas replaced with images (gif, png, jpeg, ..)? (The final goal is to export the output HTML file to a PDF file using html-pdf).

For example:

The input file:

<html>
    <head></head>
    <body>
        <p><span class="math-tex">\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span></p>
    </body>
</html>

MathJax:

The output file:

<html>
    <head></head>
    <body>
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHsAAAAgCAQAAACYh8/AAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAABIAAAASABGyWs+AAACq0lEQVRYw+WZ4XGbQBCFv824gHPSwaUDIlWQcwfYHQR1gMcVeEgHqIRYHYgObNSB1EEsOtj8AByQFAtJgJCz90Mzp+O9e+zusSyiDMvEMe+e5ercMjdEWzyVHniG5W2JddIHz6C8LZbl1pwP3PCkSatU2vLAscbbMR82uDbC1DFwhAqW9KA9xDnOOyvalq2w3i1p73Xm75o6Bo74wBtv31/zqfVAdRwbjg887sIQw23zjBcDvO5b1bpsbkCcRGIbbTKublezbQyx3OlEvMb8d9VTQELxxZe5GAAJJBAnPh3kdoqn4PNUBm4x0uI3rIXjnKCe13UMLEtS0qZBjsMoLPMgJyJQMHnK5Nx4pHrKSS4BX2sTc03EYHQBfM6nNOO+WB3p/SaCJgIx07qvqxi62uD4B++OiEEsgV4DI36BWEIV0IV8P+kBptMdkyMWANw0q7U0EcTXGQFxU4ydvLk5PksAWHxJGPFSwfHK80KzLnJ7BWKx72yubhEPwBddnYBR3pCZTnWqU2CmC17JMX0W4pOR5avEdVClScQzYx7zYBPDQ/FHeTr/1p8bV6xJuK/KrmMcyG8IiJgS6Upi5oAl40UXEvFMhiHRbADFqYSM9bZnzvPLBjHH+PXiZfdvVyAeljHPZEzKHKvkZGlbOXnRpuAUHGmTuvmjjCLIJTrUm5edHWW54vhRE7U3yPvogXRngoclYa1CXi/9Fyb4jFmSv6wlfT9Izib7olP0aBtQL00cHjCuF6od2bkfJW9vyiZ/E8dn2QPbueW+bcShhXzd1wk7fQwmyDWRbwCMoKgUQ1bAhNsODtpze3nL60Wbqd4Q+rBBXmwnKETbov91UKv4AoMcQByvRcHkag2h1q39ptLxoj3QGUggZqMh1D7XUMqVyvevTK+h3hBqm+0P6EpqX1Z9P+gAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTYtMDQtMTBUMTI6NTc6MzUrMDA6MDDUKQisAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE2LTA0LTEwVDEyOjU3OjM1KzAwOjAwpXSwEAAAACp0RVh0bGF0ZXgAeCA9IHstYiBccG0gXHNxcnR7Yl4yLTRhY30gXG92ZXIgMmF9Lum12QAAAAx0RVh0Y29sb3IAMDAwMDAwwp/2oQAAAA50RVh0cmVzb2x1dGlvbgAxMDD3McujAAAAAElFTkSuQmCC"/>
    </body>
</html>

If you want HTML or SVG instead of binary images, check out mathjax-node github.com/mathjax/MathJax-node. — Peter Krautzberger
Thank you, MathJax-node can also produce PNG images but I prefer a pure JavaScript solution. — user6178502
There is no "pure" JS solution for converting TeX to binary images (and html-pdf is not "pure" JS either since it's based on phantomjs). FWIW, mathjax-node is pure JS for HTML and SVG which will produce better results in a pdf. — Peter Krautzberger
Yes it's true but I 'prefer' a more cross-platform solution. I already tried MathJax-node before but even with the 'example' code that doesn't work on my computer so I prefer another solution but thank you. — user6178502

戚锦秀戚锦秀 · Accepted Answer · 2018-12-04T09:55:03

<html>
<head></head>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js"></script>
<script>
    window.MathJax = {
        jax: ["input/TeX", "output/SVG"],
        extensions: ["tex2jax.js"],
        SVG: {
            useGlobalCache: false
        }
    }
</script>
<body onload="render()">
<span id="math-tex">\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span>
</body>
<script>

    function tex2img(formula, callback) {
        MathJax.Hub.Queue(function () {
            var wrapper = MathJax.HTML.Element("span", {}, formula);
            MathJax.Hub.Typeset(wrapper, function () {
                var svg = wrapper.getElementsByTagName("svg")[0];
                svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
                var image = new Image();
                image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg.outerHTML)));
                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);
                    var img = '<img src="' + canvas.toDataURL('image/png') + '"/>';
                    callback(img);
                };
            });
        })
    }

    function render() {
        var dom = document.getElementById("math-tex");
        tex2img(dom.innerText, function (output) {
            dom.innerHTML = output
        });
    }

</script>
</html>

you can get svg by mathjax first, then convert the svg to image(base64)

HTML with TeX formulas to images

1 Answers