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