在 <canvas> 上渲染 MathJax 输出答案

【问题标题】：Rendering MathJax output on <canvas>在 <canvas> 上渲染 MathJax 输出
【发布时间】：2022-04-22 00:11:04
【问题描述】：

我已经搜索过这个主题，但无法找到直接的答案，而且我的javascript也不好。所以我希望有人能告诉我如何做到这一点。

我只是喜欢在 canvas2D 中显示数学。我使用context.fillText 将字符串传递给canvas2d，但该字符串显然没有被Mathjax 处理，因为它不在页面本身上。

这是一个 MWE。我需要对其进行什么修改才能使数学显示在画布上？

<!DOCTYPE html>

<html>
<head>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }});
</script>

<script type="text/javascript" 
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>        
</head>    
<body>

</p>Trying to render $\sin(x)$ inside canvas 2D as text</p>

<div>
<canvas id="e" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById("e");
  var context = canvas.getContext("2d");
  context.font = "normal 16px Arial";
  context.fillText("test string", 50, 50);
  context.fillText("$\sin(x)$", 50, 100);
</script>
</div>    
</body>
</html>

我现在得到的输出是

再次，我明白为什么它不起作用，因为数学在字符串中，Mathjax 无法看到和处理它。但它必须是一个供画布使用的字符串。我不能只写context.fillText($\sin(x)$, 50, 100); 没有字符串引号，因为它不起作用。

这可能是一个相关的问题，但不确定。

How do I format html with MathJax after loading it using jQuery.load?

【问题讨论】：

你看过developer.mozilla.org/en-US/docs/HTML/Canvas/…吗？ MathJax 可以生成自然候选的 SVG 输出。但正如@Mikko Ohtamaa 指出的那样，MathJax 目前没有画布输出。
来自未来的注意事项：cdn.mathjax.org 即将结束生命周期，请查看mathjax.org/cdn-shutting-down 以获取迁移提示（也许为未来的读者更新您的帖子）。
另外，请查看stackoverflow.com/questions/34924033/… 以获得答案。

标签： canvas mathjax

【解决方案1】：

<canvas> 文本绘制操作与DOM manipulation 是分开的操作，因此 Mathjax 无法与画布文本渲染操作进行交互。

我不确定目前是否存在 MathJax 的 <canvas> 渲染器后端。至少通过检查当前 MathJax 演示的渲染选项似乎不是这样。因此，MathJax 只能在 DOM 上创建输出。

出于安全原因，浏览器不允许直接在<canvas> 上渲染 DOM，尽管这在技术上是可行的。否则，可以通过在<iframe> 中呈现该站点，然后在画布上呈现此<iframe>，从您登录的站点（例如 Facebook）中窃取内容。

【讨论】：

正如其他评论者指出的那样，您应该能够在

【解决方案2】：

我一直在试图弄清楚同样的事情。我确实将 MathJax 放到了 canvas 元素上，但还没有弄清楚如何在您上面描述的上下文中使用 MathJax。但万一这对你有帮助。

$(function () {
    function drawCanvas(){
      $math = $(".MathJax_Display")
      html2canvas($math, {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
      }); 
    }
    MathJax.Hub.Queue(drawCanvas);
})

http://jsfiddle.net/masterthornton/umnc40d6/7/

【讨论】：

jsfiddle 不存在 :(

【解决方案3】：

我找到了一种将 MathJax 方程放入 cavans 的方法。基本上，LATEX -> SVG -> base64 -> cavans。

使用MathJax.tex2svg("F=ma")将latex转为svg元素，然后转成base64格式，最后将base64作为图片放入cavans中。

这是我的代码：

var tex = oriData.nodes[i].latex;
var svg = MathJax.tex2svg(tex);
var svg = svg.childNodes[0]
var ssvg = new XMLSerializer().serializeToString(svg);
var base64 = "data:image/svg+xml;base64, " + window.btoa(unescape(encodeURIComponent(ssvg)));

base64 是 base64 格式的 eqaution SVG 数据。

【讨论】：

【解决方案4】：

建议您查看：https://github.com/CurriculumAssociates/canvas-latex

它允许您在流行的画布库（如 PixiJS/CreateJS）中渲染乳胶。它还提供了一些强大的api方法来拆分latex，添加宏等。

【讨论】：