带有 TeX 公式的 HTML 到图像答案

【问题标题】：HTML with TeX formulas to images带有 TeX 公式的 HTML 到图像
【发布时间】：2021-01-13 03:42:25
【问题描述】：

如何使用 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>

【问题讨论】：

如果您想要 HTML 或 SVG 而不是二进制图像，请查看 mathjax-node github.com/mathjax/MathJax-node。
谢谢，MathJax-node 也可以生成 PNG 图像，但我更喜欢纯 JavaScript 解决方案。
没有用于将 TeX 转换为二进制图像的“纯”JS 解决方案（而且 html-pdf 也不是“纯”JS，因为它基于 phantomjs）。 FWIW，mathjax-node 是用于 HTML 和 SVG 的纯 JS，它将在 pdf 中产生更好的结果。
是的，这是真的，但我“更喜欢”更跨平台的解决方案。我之前已经尝试过 MathJax-node，但即使使用在我的计算机上不起作用的“示例”代码，所以我更喜欢另一种解决方案，但谢谢。

标签： image latex mathjax tex

【解决方案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，然后将svg转成image(base64)

【讨论】：