结合使用katex html2canvas 将LaTeX公式保存为图片

怼烎@ 2022-11-22 12:49 347阅读 0赞

1.  首先引入katex和html2canvas库，在引入katex的时候注意要把CSS也引进来，保证公式渲染位置正确
2.  调用katex的`renderToString`方法渲染得到具体的html

let html = katex.renderToString(String.raw`\frac{\sqrt[3]{12}+3}{5}+\frac{1}{\sqrt{12}*2}+9-1`, { 
                    throwOnError: false
          });

1.  调用html2canvas库，将渲染出来的LaTeX公式所在的DOM元素传进去做参数，第二个参数为配置元素，用来解决渲染出来canvas空白以及设置背景颜色等问题，最后通过canvas的`toDataURL()`获取base64的图片地址
2.  中间会遇到很多坑，都写在下面注释里了，所用到的库可以通过这个地址下载[latex2img所依赖文件下载地址][latex2img]

## 具体代码如下： ##

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="./katex12.min.css"  crossorigin="anonymous">
      <script defer src="./katex12.min.js"  crossorigin="anonymous"></script>
    
      <script src="./html2canvas-1.0.0-rc.7.min.js"></script>
      <style>
        #test { 
          /* block保证获取的canvas图片完整 */
          display: block;
          /* 使用绝对定位保证公式宽度自适应 */
          position:absolute;
        }
       img { 
         margin-top: 20px;
       }
      </style>
      <title>latex2img</title>
    </head>
    <body>
      
      <span id="test">
      </span>
      <img src="" alt="测试" id="img">
      <script>
        const testDiv = document.getElementById('test');
        const img = document.getElementById('img');
        document.addEventListener('DOMContentLoaded', () => { 
          let html = katex.renderToString(String.raw`\frac{\sqrt[3]{12}+3}{5}+\frac{1}{\sqrt{12}*2}+9-1`, { 
                    throwOnError: false
          });
          testDiv.innerHTML = html;
          
          //解决根号显示不全的问题
          var svgElements = testDiv.querySelectorAll('svg'); 
          svgElements.forEach(function(item) {  
            item.setAttribute("width", item.getBoundingClientRect().width); item.style.width = null; 
          });
          //有的电脑上生成的canvas存在偏移，导致最终生成的图片不完整
          let rect = testDiv.getBoundingClientRect();
          html2canvas(testDiv, { 
          		x:rect.left,
            	y:rect.top,
                backgroundColor: null, //设置为无背景
                allowTaint: true,
                imageTimeout: 15000,
                logging: true,
                useCORS: true,
                scrollX: -window.scrollX, //解决页面滚动后canvas.toDataURL输出图片空白的问题
                scrollY: -window.scrollY
            }).then(function(canvas) { 
              testDiv.style.display = 'none';//公式渲染完后将katex生成的DOM隐藏
              img.src = canvas.toDataURL();        
              img.style.width = canvas.style.width;//解决高分屏下生成图片变大的问题，原因为width为canvas.width而不是canvas.style.width
              img.style.height = canvas.style.height;
          });
    
        });
      </script>
    </body>
    </html>

[latex2img]: https://download.csdn.net/download/sinat_27088253/13087389