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

我正在构建一个库，它只允许objects render的功能返回表示它们自己的DOM元素，其中之一是math，所以

，

或

可以，我更喜欢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客户端是吗

对此没有内置的方法。但你显然可以建造一些东西

这里有一个简单的例子注意本例将MathJax配置为不对SVG路径使用其globalCache；这使得SVG输出易于重用。对于呈现分离的DOM节点，还有一些注意事项；MathJax必须猜测上下文（CSS、字体度量等）

window.MathJax={
jax:[“输入/TeX”，“输出/SVG”]，
扩展：[“tex2jax.js”、“mathmmenu.js”、“MathZoom.js”]，
showMathMenu:false，
showProcessingMessages:false，
messageStyle:“无”，
SVG：{
useGlobalCache:false
},
特克斯：{
扩展：[“AMSmath.js”、“AMSsymbols.js”、“autoload all.js”]
},
AuthorInit:function（）{
MathJax.Hub.Register.StartupHook（“End”，function（））{
var mj2img=函数（texstring，回调）{
var输入=texstring；
var wrapper=document.createElement（“div”）；
wrapper.innerHTML=输入；
var输出={svg:，img:}；
Queue（[“Typeset”，MathJax.Hub，wrapper]）；
队列（函数（）{
var mjOut=wrapper.getElementsByTagName（“svg”）[0]；
setAttribute（“xmlns”http://www.w3.org/2000/svg");
//谢谢，https://spin.atomicobject.com/2014/01/21/convert-svg-to-png/
output.svg=mjOut.outerHTML；
var image=新图像（）；
image.src='data:image/svg+xml；base64，'+window.btoa（unescape（encodeURIComponent（output.svg））；
image.onload=函数（）{
var canvas=document.createElement（'canvas'）；
canvas.width=image.width；
canvas.height=image.height；
var context=canvas.getContext（'2d'）；
drawImage（image，0,0）；
output.img=canvas.toDataURL（'image/png'）；
回调（输出）；
};
});
}
mj2img（\\[f:X\\to Y\\]），函数（输出）{
document.getElementById（“target”）.innerText=output.img+'\n'+output.svg；
});
});
}
};
（函数（d，脚本）{
script=d.createElement（'script'）；
script.type='text/javascript'；
script.async=true；
script.onload=函数（）{
//远程脚本已加载
};
script.src=https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
d、 getElementsByTagName（'head'）[0].appendChild（脚本）；
}（文件）
对于MathJax 3:

<script>
  window.MathJax = {
    // options
  };
</script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>

为什么返回mjOut对我来说是未定义的：X代码段对我来说仍然有效，所以我不确定您指的是什么。@PeterKrautzberger，它在Safari中似乎不起作用-onload处理程序从不启动。不知道为什么。对我来说，它在Firefox和Chrome上确实有效。还没有尝试IE。从技术上讲，在设置
src
属性之前应该安装onload处理程序，但这并不能解决Safari的问题。啊，谢谢，@Davide。我之前没有注意到这一评论。毕竟这是一次快速的黑客攻击。我会找时间看看Safari。我试过了，代码的第3行抛出了错误：
TypeError:MathJax.tex2svg不是一个函数
const latexToImg = function (formula) {
  return new Promise((resolve, reject) => {
    let wrapper = MathJax.tex2svg(`${formula}`, {em: 10, ex: 5,display: true})
    let output = { svg: "", img: "" }
    let mjOut = wrapper.getElementsByTagName("svg")[0]
    // mjOut.setAttribute("xmlns", "http://www.w3.org/2000/svg")
    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');
      resolve(output.img)
    }
    image.onerror = function() {
      reject()
    }
  })
}