- 首先引入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 {
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;
});
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,
scrollY: -window.scrollY
}).then(function(canvas) {
testDiv.style.display = 'none';
img.src = canvas.toDataURL();
img.style.width = canvas.style.width;
img.style.height = canvas.style.height;
});
});
</script>
</body>
</html>