CODEWITHSUNDEEP
imagelatexmathjaxtex
user6178502
user6178502

Reputation: 795

HTML with TeX formulas to images

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:

               |
               |
            Convert
               |
               ↓

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>

Upvotes: 0

Views: 2139

Answers (1)

戚锦秀
戚锦秀

Reputation: 61

<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)

Upvotes: 3

Related Questions