#关于drawLaTex
本来想使用MathJax来生成LaTex公式,后来发现两个问题:
- MathJax太大;
- 生成的公式不是图片,无法存放在其它环境。
本项目使用MathJax来渲染LaTex公式。
git拿下来的MathJax足足有152M。 根据实际需求,我只保留了MathJax 以SVG形式渲染"LaTex/Tex"的功能。删减后,MathTex只有1.68M。尽管不小,但是已经可以当作一个线上项目使用了
生成的LaTex公式,我最终是想以图片的形式保存起来。所以,我想到了svg转canvas的方法。(canvas可以直接得到base 64的图片了)
这个时候我想到了canvg
,利用MathJax生成的svg可以使用canVg将它在canvas上显示出来,并最终生成base 64的图片文件。
这也是为什么我只保留MathJax的SVG的原因了
本项目是在chrome下开发的,其它浏览器没有测试过。估计firefox和ie9以上都是可以运行的
在需要调用的页面的底部加入以下代码
<script type="text/x-mathjax-config">
MathJax.Hub.Config(
{
skipStartupTypeset:true,
showProcessingMessages: false,
messageStyle: "none",
tex2jax: {
inlineMath: [["$", "$"], ["\\(", "\\)"]],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
},
SVG: {
linebreaks: {
automatic: true,
width: "container"
}
}
});
</script>
<script type="text/javascript" src="MathJax.js?config=TeX-AMS-MML_SVG"></script>
<script type="text/javascript" src="canvg/rgbcolor.js"></script>
<script type="text/javascript" src="canvg/StackBlur.js"></script>
<script type="text/javascript" src="canvg/canvg.js"></script>
<script type="text/javascript" src="drawLaTex/drawLaTex.js"></script>
有两种形式的调用:
drawLaTex('$$LaTex$$','container');//container为显示LaTex公式的容器的id号
drawLaTex('$$LaTex$$',document.getElementById('container'));//要上面一样,只是直接用dom对象
drawLaTex('$$LaTex$$',function(base64Imgs){
//不直接显示时,可以拿回调的base64数组
for(var i=0,len=base64Imgs.length;i<len;++i){
console.log(base64Imgs[i][0],base64Imgs[i][1]);//第一个是base64,第二个是显示方式
}
});
http://leeenx.github.io/drawLaTex/latex.html
感谢 MathJax
和 canvg
。
MathJax 的GigHub地址: https://github.com/mathjax/MathJax
canvg 的GigHub地址: https://github.com/gabelerner/canvg