Question

嘿家伙所以我试图将我的mathjax转换为svg然后将其转换为png但我遇到问题，问题是我无法将我的mathjax转换为svg我试图使用this solution 但它正在工作，因为我得到的变量是未定义的错误（mjOut未定义）：/。奇怪的是，我能够很好地渲染mathjax。在这里详细说明我的代码（它几乎相同）也是一个截图：

var mj2img = function(texstring, callback) {
    var input = texstring;
    var wrapper = document.createElement("div");
    wrapper.innerHTML = input;
    var output = { svg: "", img: ""};
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, wrapper]);
    MathJax.Hub.Queue(function() {
        //This is where the error is (mjOut is undefined)
        var mjOut = wrapper.getElementsByTagName("svg")[0];
        console.log(wrapper.getElementsByTagName("svg"));
        mjOut.setAttribute("xmlns", "http://www.w3.org/2000/svg");
        // thanks, https://spin.atomicobject.com/2014/01/21/convert-svg-to-png/
        output.svg = mjOut.outerHTML;
        var image = new Image();
        image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(output.svg)));
        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);
            output.img = canvas.toDataURL('image/png');
            callback(output);
        };
    });
}
$("#equation-write").click(function()
{
    //Let's assume its sin(30) = 0.5.
    var TeX = $("#MathInput").val();
    var jax = MathJax.Hub.getAllJax()[0];
    mj2img(TeX, function(output){
        // console.log(texstring);
        console.log(output.img);
    }

Answer 1

您显示的控制台输出表明getElementsByTagName()调用未返回任何元素（HTMLCollection为空），因此mjOut应为null。这意味着包装器中没有svg元素。

问题是：为什么包装器中没有svg元素？好吧，可能是渲染器设置为其他渲染之一而不是SVG渲染器（您没有显示您使用的MathJax配置文件，尽管可以通过MathJax上下文菜单设置渲染器，因此它可能无论如何不是配置文件中的那个）。但更可能的是，这意味着包装器的内容不包含任何正确分隔的数学。

请记住，TeX数学包含在$...$或\[...\]中（或其他可能性，具体取决于配置）。如果$("#MathInput").val()不包含此类分隔符，则MathJax将找不到任何要处理的数学，因此不会生成任何svg元素。（同样，你还没有说出你正在使用的输入格式是什么，但由于代码使用TeX作为变量，我假设它是TeX代码，而不是AsciiMath或MathML。）

请注意，您链接到的帖子中的示例包含分隔符："\\[f: X \\to Y\\]"。这里，反斜杠加倍，因为它们在javascript字符串文字中具有特殊含义，因此您需要使用\\在字符串本身中获取单个\。由于您是从输入或textarea标记的内容中获取字符串（可能，再次，您没有在帖子中包含该字符串），因此在键入值时，您不需要加倍反斜杠。如果你这样做，那么这也可以说明为什么你没有得到任何数学MathJax svg输出。

在任何情况下，此处都没有足够的信息来诊断问题。一个完整的例子作为可运行的代码（比如你链接的帖子）将是一个很大的帮助。如果您在其他控制台消息之后添加console.log(wrapper.outerHTML);，您可能会看到您正在搜索的div中的实际内容，并且能够判断MathJax是否已找到数学计算。

Answer 2

它可能与您的mathjax版本有关。尝试更改

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>

到

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js"></script>

MathJax svg输出然后将其转换为png

2 个答案: