通过 html2canvas 将 MathJax 转换为 png 时获得粗体数学表达式

问题描述 投票：0回答：1

我正在使用 MathJax 渲染文本中的数学表达式，并希望将其转换为 pdf。但是当我打开 pdf 时，表达式就像粗体，或者看起来两个表达式重叠。 （下面是我的代码）

enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MathJax to PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
    <div id="math-container" style="font-size: 20px;">
        This is some text with MathJax: \(E = mc^2\)
    </div>
    <button onclick="generatePDF()">Generate PDF</button>

    <script>
        async function generatePDF() {
            const mathContainer = document.getElementById("math-container");
            
            // Step 1: Render MathJax in the container
            await MathJax.typesetPromise([mathContainer]);

            // Step 2: Remove the raw LaTeX source (e.g., \(E = mc^2\)) after rendering
            // MathJax inserts the rendered output in an element with class 'mjx-chtml'
            const renderedMath = mathContainer.querySelector('.mjx-chtml');
            if (renderedMath) {
                // Clear the container and only append the rendered output
                mathContainer.innerHTML = ''; 
                mathContainer.appendChild(renderedMath); // Keep only the rendered content
            }

            // Step 3: Convert the container to an image using html2canvas
            const canvas = await html2canvas(mathContainer, {
                backgroundColor: "#ffffff", // Set background color to white for clarity
                scale: 2, // Higher scale for better resolution
            });
            const imgData = canvas.toDataURL("image/png");

            // Step 4: Add the image to the PDF using jsPDF
            const { jsPDF } = window.jspdf;
            const pdf = new jsPDF();
            pdf.text("MathJax in PDF Example", 10, 10);
            pdf.addImage(imgData, "PNG", 10, 20, 180, canvas.height / canvas.width * 180); // Scale to fit
            pdf.save("mathjax_fixed.pdf");
        }
    </script>
</body>
</html>

如何解决这个问题？

javascript css html2canvas mathjax
1个回答
0
投票

您看到的重复项是 MathJax 插入的 MathML，供屏幕阅读器等辅助技术使用。 CSS 可以在视觉上隐藏此 MathML，但允许屏幕阅读器使用它。 

html2canvas
或画布的 
toDataUrl()
不处理隐藏 MathML 的 CSS，并且它与通常的 MathJax 输出一起渲染，为您提供重复的版本。

您可以在 MathJax 上下文菜单（“辅助”子菜单底部）中或通过添加

来关闭辅助 MathML 
<script>
MathJax = {
  options: {
    menuOptions: {
      settings: {
        assistiveMml: false
      }
    }
  }
};
</script>

before 加载的脚本

tex-mml-chtml.js
。 另请注意，您可能想使用 
tex-chtml.js
来代替，因为您没有使用 MathML 输入，并且不需要加载 MathJax 的该部分。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.