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

最新推荐文章于 2024-05-14 09:32:55 发布

萤火虫塔莉

最新推荐文章于 2024-05-14 09:32:55 发布

阅读量1.8k

点赞数 1

分类专栏： JavaScript 文章标签： latex katex html2canvas

本文为博主原创文章，未经允许禁止转载

本文链接：https://blog.csdn.net/sinat_27088253/article/details/109491316

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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

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

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

萤火虫塔莉

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
结合使用katex html2canvas 将LaTeX公式保存为图片

<!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
复制链接

扫一扫