Question

使用MathJax或其他JavaScript库，如何使用一些TeX数学公式解析输入HTML文件并生成输出文件，并将公式替换为图像（gif，png，jpeg，..）？（最终目标是使用html-pdf）将输出HTML文件导出为PDF文件。

例如：

输入文件：

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

MathJax ：

输出文件：

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

Answer 1

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

您可以先通过mathjax获取svg，然后将其转换为image（base64）

带有TeX公式的HTML到图像

1 个答案: