使用mathjax或类似工具将Latex/MathML转换为SVG或图像？

Question

我正在构建一个库，它只允许对象渲染的功能返回自己的表示形式的DOM元素，其中之一是数学，所以<img>,<canvas>或<svg>会做到这一点，我更喜欢svg。

Mathjax被称为是在这个非常好，但我需要更多的东西，如：

Mathjax.Latex('\frac{2}{1}').toSVG(); //svg DOM node or string 
Mathjax.Latex('\frac{2}{1}').toImage(); //Image, img node, or base64 

我知道这是可能的mathjax节点，但它与mathjax客户端？ https://github.com/mathjax/MathJax-node

Answer 1

这里没有内置的方法。但你显然可以建立一些东西。

这是一个快速而肮脏的例子。 注意该示例将MathJax配置为不将其globalCache用于SVG路径;这使得SVG输出易于重复使用。渲染分离的DOM节点也有一些注意事项; MathJax将不得不猜测上下文（CSS，字体度量等）。

window.MathJax = { 
 
    jax: ["input/TeX", "output/SVG"], 
 
    extensions: ["tex2jax.js", "MathMenu.js", "MathZoom.js"], 
 
    showMathMenu: false, 
 
    showProcessingMessages: false, 
 
    messageStyle: "none", 
 
    SVG: { 
 
    useGlobalCache: false 
 
    }, 
 
    TeX: { 
 
    extensions: ["AMSmath.js", "AMSsymbols.js", "autoload-all.js"] 
 
    }, 
 
    AuthorInit: function() { 
 
    MathJax.Hub.Register.StartupHook("End", function() { 
 
     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() { 
 
      var mjOut = wrapper.getElementsByTagName("svg")[0]; 
 
      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); 
 
      }; 
 
     }); 
 
     } 
 
     mj2img("\\[f: X \\to Y\\]", function(output){ 
 
     document.getElementById("target").innerText = output.img + '\n' + output.svg; 
 
     }); 
 
    }); 
 
    } 
 
}; 
 

 
(function(d, script) { 
 
    script = d.createElement('script'); 
 
    script.type = 'text/javascript'; 
 
    script.async = true; 
 
    script.onload = function() { 
 
    // remote script has loaded 
 
    }; 
 
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js'; 
 
    d.getElementsByTagName('head')[0].appendChild(script); 
 
}(document));

<div id="target"></div>