在JavaScript中将latex呈现为svg，并使用paper.js显示结果

下面的代码给出了“脚本错误”。非常感谢您的帮助

HTML

---

在快速查看您的代码后，我想说：

您正在向

importSVG

函数传递承诺

importSVG

函数期望收到一个SVG字符串，您的承诺将通过PNG图像数据url解析

---

MathJax和Paper.js都直接使用SVG，因此显然不需要创建中间画布元素。此外，

MathJax.tex2svg

创建了一个SVG DOM元素，Paper.js可以使用它（可以使用SVG字符串、DOM元素或url字符串）。这大大简化了代码，因为它删除了所有画布操作，并且所有操作都是同步的

由于某种原因，它的尺寸非常小，所以我把它放大了20倍

var graphScope=new paper.PaperScope（）；
var canvas_1=document.getElementById（'canvas_1'）；
图形镜设置（画布1）；
graphScope.activate（）；
const latexToImg=函数（公式）{
让wrapper=MathJax.tex2svg（公式{
em:10，
例：5，
显示：真
})
返回wrapper.querySelector（'svg'）；
}
const svgGroup=graphScope.project.importSVG（latexToImg（'x^2'））；
var界；
SVG组量表（20）；
//对于自动缩放，请改用以下行：
//bounds=svgGroup.strokeBunds；
//SVG组比例（40/边界高度）；
bounds=svgGroup.strokeBunds；
svgGroup.position.x=-bounds.x；
svgGroup.position.y=-bounds.y

window.MathJax={
//选择权
};
谢谢。我已尝试更改此设置，但无法管理它-例如canvas.toDataURL（'image/svg'）不起作用。你对如何解决这个问题有什么建议吗？这非常有效-非常感谢！有没有类似的方法来渲染存储为Ascimath而不是latex的方程式？我对MathJax不太熟悉，虽然它看起来应该是可能的，但我无法从文档中找到它。我确实找到了可以通过全局
AMTparseAMtoTeX
功能将AsciiMath转换为LaTeX的方法。将它与我的答案结合起来进行快速测试似乎有效。如果你遇到困难，请随意提出另一个问题，并指出我的方向。再次感谢史蒂夫。我从MathJax用户论坛得到了一些帮助：太好了！很高兴看到它起作用了！
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.11/paper-full.min.js"></script>

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

<canvas id="canvas_1"></canvas>

var graphScope = new paper.PaperScope();
var canvas_1 = document.getElementById('canvas_1');
graphScope.setup(canvas_1);
graphScope.activate();

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()
    }
  })
}

const svgGroup = graphScope.project.importSVG(latexToImg('x^2'));