HTML с формулами TeX для изображений

Как возможно с помощью MathJax или другой библиотеки JavaScript выполнить синтаксический анализ входного файла HTML с помощью некоторых математических формул TeX и создать выходной файл с формулами, замененными изображениями (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:

               |
               |
            Convert
               |
               ↓

Выходной файл:

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

image tex latex mathjax
person user6178502    schedule 10.04.2016    source источник
comment
Если вам нужен HTML или SVG вместо двоичных изображений, проверьте mathjax-node github.com/mathjax/MathJax- узел.   -  person Peter Krautzberger    schedule 10.04.2016
comment
Спасибо, MathJax-node также может создавать изображения PNG, но я предпочитаю решение на чистом JavaScript.   -  person user6178502    schedule 10.04.2016
comment
Не существует чистого JS-решения для преобразования TeX в двоичные изображения (и html-pdf также не является чистым JS, поскольку он основан на phantomjs). FWIW, mathjax-node - это чистый JS для HTML и SVG, который даст лучшие результаты в pdf.   -  person Peter Krautzberger    schedule 10.04.2016
comment
Да, это правда, но я предпочитаю более кроссплатформенное решение. Я уже пробовал MathJax-node раньше, но даже с кодом примера, который не работает на моем компьютере, поэтому я предпочитаю другое решение, но спасибо.   -  person user6178502    schedule 10.04.2016

Ответы (1)


arrow_upward
3
arrow_downward 

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

вы можете сначала получить svg с помощью mathjax, а затем преобразовать svg в изображение (base64)

person 戚锦秀    schedule 04.12.2018