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

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 应该为空。这意味着包装器中没有 svg 元素。

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

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

请注意，您链接到的帖子中的示例确实包含分隔符:"\\[f: X\\to Y\\]"。这里，反斜杠是双倍的，因为它们在 javascript 字符串文字中具有特殊含义，因此您需要使用 \\ 来获取字符串本身中的单个 \ 。由于您是从输入或文本区域标记的内容中获取字符串(大概，您没有在帖子中包含该字符串)，因此当您在此处键入值时，无需使用双反斜杠。如果您这样做了，那么这也可以解释为什么您没有获得任何数学 MathJax svg 输出。

无论如何，这里没有足够的信息来诊断问题。作为可运行代码的完整示例(如您链接到的帖子中)将有很大帮助。如果您在其他控制台消息后添加 console.log(wrapper.outerHTML);，您可能能够看到您正在搜索的 div 中实际包含的内容，并且将能够判断 MathJax 是否找到了数学。