有这样一个需求：通过数学公式图片，识别书公式展示在页面上，并支持下载word，展示word版本的数学公式，可供复制使用。
之前是通过Pix2Text进行数学公式的识别，然后复制识别的内容，通过 LaTeX公式编辑器进行下载对应的数学公式的Word 文档。但是第一个网站Pix2Text不太稳定，经常性的不可用，所以想自己实现这2个功能。
一、图片OCR解析公式
首先参考第一个的Pix2Text的github
后端进行部署了相关的服务，可以进行OCR解析图片，然后前端进行调用对应的接口
这块主要有一个是粘贴图片进行上传，并显示在页面上
1、首先需要监听全局paste事件
onMounted(() => {
window.addEventListener('paste', handlePaste);
});
onUnmounted(() => {
window.removeEventListener('paste', handlePaste);
});
2、然后再对应的监听方法中就可以获取到file文件
/** 全局页面监听粘贴内容 */
function handlePaste(event) {
// console.log('全局页面监听粘贴内容000');
const items = (event.clipboardData || window.clipboardData).items;
let file = null;
if (!items || items.length === 0) {
console.log('当前浏览器不支持本地');
return;
}
// 搜索剪切板items
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
if (!file) {
console.log('粘贴内容非图片');
return;
}
// 此时file就是我们的剪切板中的图片对象
// console.log('file==', file);
showImageToPage(file);
uploadImage(file);
}
3、然后显示这个图片在页面上，div设置一个id
<div id="preview" class="div_image">
<span>将图片按Ctrl+V粘贴至此页面</span>
</div>
4、把刚才获取到的file文件渲染在div上
// 上传的图片显示到页面右侧
function showImageToPage(file) {
// 如果需要预览，可以执行下面代码
const reader = new FileReader();
reader.onload = event => {
preview.innerHTML = `<img src="${event.target.result}" style=' max-height: 200px;
max-width: 100%;
min-width: 200px;
object-fit: contain;'>`;
};
// 把粘贴的图片显示在页面上
reader.readAsDataURL(file);
}
5、然后调用后台的上传图片，OCR解析接口
// 上传图片到服务端进行OCR识别
function uploadImage(file) {
let param = new FormData(); //创建form对象
param.append('image', file); //为创建的form对象增加上传的文件
// param.append('session_id', ''); //如果需要上传其他字段，在这里增加
param.append('use_analyzer', 'true');
param.append('resized_shape', '600');
//修改请求头
let config = { headers: { 'Content-Type': 'multipart/form-data' } };
// console.log('url ==', pix2textUrl);
proxy.$modal.loading('正在解析，请稍候！');
// 上传图片
axios.post(pix2textUrl, param, config).then(res => {
// console.log('res====', res);
proxy.$modal.closeLoading();
if (!res.data || res.data.status_code != 200) {
proxy.$modal.msgError('未成功识别，请稍后再试');
return;
}
// console.log('res====', res);
let textList = res.data.results;
if (!textList || textList.length == 0) {
proxy.$modal.msgError('未成功识别，请稍后再试');
return;
}
let textStr = '';
textList.forEach(element => {
textStr += element.text;
if (element.type == 'text') {
textStr += '\n';
}
});
// console.log('textStr====', textStr);
textWords.value = textStr.replaceAll('$$', '');
mathText.value = textStr;
laTexToMath();
});
}
二、页面展示数学公式
接口会返回一些解析出来的文本和LaTeX 数学公式
但是接口返回的LaTeX 公式，是一些$$符号的一些标识，具体符号参考见 LaTeX 公式篇 ，无法辨认出具体的公式，所以需要转化显示为可以识别的公式。
所以我们需要借助于 MathJax
mathjax是一个用于latex、mathml和ascimath表示法的开源javascript显示引擎，可在所有现代浏览器中工作，并内置了对诸如屏幕阅读器等辅助技术的支持。
1、首先需要在 index.html中引入
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
2、在utils中新建MathJax.js
let isMathjaxConfig = false // ⽤于标识是否配置
const initMathjaxConfig = () => {
if (!window.MathJax) {
return
}
window.MathJax = {
tex: {
inlineMath: [
['$', '$'],
['\\(', '\\)']
], // ⾏内公式选择符
displayMath: [
['$$', '$$'],
['\\[', '\\]']
] // 段内公式选择符
},
chtml: {
scale: 1,//缩放比例
},
options: {
skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code',
'a'], // 避开某些标签
ignoreHtmlClass: 'tex2jax_ignore',
processHtmlClass: 'tex2jax_process'
}
}
isMathjaxConfig = true // 配置完成，改为true
}
const TypeSet = async function (elementId) {
if (!window.MathJax) {
return
}
window.MathJax.startup.promise = window.MathJax.startup.promise
.then(() => {
return window.MathJax.typesetPromise()
})
.catch((err) => console.log('Typeset failed: ' + err.message))
return window.MathJax.startup.promise
}
export default {
isMathjaxConfig,
initMathjaxConfig,
TypeSet
}
3、在main.js中全局引入
import MathJax from './utils/MathJax'
app.config.globalProperties.MathJax = MathJax
4、在刚才上传图片接口，之后调用这个接口，传入接口返回的latex文本即可
<!-- 展示数学公式 -->
<div class="input_box math_box" style="margin-left: 10px" id="math">
<p style="font-size: 14px; white-space: pre-line">{{ mathText }}</p>
</div>
// 将Latex公式文本渲染为数学公式显示在右侧虚线框中
function laTexToMath() {
// MathJax3.0版本
if (proxy.MathJax.isMathjaxConfig) {
// 判断是否初始配置，若⽆则配置。
proxy.MathJax.initMathjaxConfig();
}
proxy.MathJax.TypeSet();
}
效果如下图所示
WX20230612-173535@2x.png
三、转化下载Word格式的公式
上面的公式已经可以完整的展示在页面上，但是我们不是通过复制粘贴出来，所以需要把这个转换为Word版本的，可以进行复制粘贴的格式。
参考 LaTeX公式编辑器，通过这个里面的导出Word，有一个接口可以进行实现，接口地址为https://reverse.latexlive.com:5002/api/Common/MathMlToWordBlod，但是通过抓包发现这个接口的入参格式为 MathML格式，入下图所示
MathML格式
上面类似Html的格式，就是MathML格式，
所以我们需要将之前接口返回的laTex转MathML格式，然后再调研下载Word的接口，
1、laTex转MathML格式
// 需要先把laTex转MathML格式，然后通过MathML格式进行下载Word
function exportWord() {
// console.log('laTex转MathML格式');
if (!textWords.value) {
proxy.$modal.msgError('请先粘贴图片识别');
return;
}
// 重置
window.MathJax.texReset();
// laTex转MathML格式
window.MathJax.tex2mmlPromise(textWords.value)
.then(function (mml) {
// 转换结果
// console.log('转换结果mml=====', mml);
downloadWordFile(mml);
})
.catch(function (err) {
// 发生错误时
})
.then(function () {
// 完成时
});
}
2、下载Word文件
/ /下载Word文件-通过MathML格式进行下载Word
function downloadWordFile(mathml) {
// console.log('下载word文件00');
let param = {
mathml: mathml
};
const config = {
responseType: 'blob', //这个一定要设置，否则会出现文件下载后打不开的情况,
'Content-Type': 'application/json'
};
axios.post(mathMlToWordBlodUrl, param, config).then(res => {
// console.log('res====', res);
// console.log('下载word文件11');
let blob = new Blob([res.data], {
//设置数据源
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' //设置文件格式
});
let objectUrl = URL.createObjectURL(blob); //创建下载的链接
let a = document.createElement('a');
a.href = objectUrl;
let time = parseInt(new Date().getTime() / 1000) + '';
a.download = `jwwh${time}`; //设置文件名
//下面这个写法兼容火狐
a.dispatchEvent(
new MouseEvent('click', { bubbles: true, cancelable: true, view: window })
);
window.URL.revokeObjectURL(blob); //释放bolb对象
});
}
Word格式展示
参考文档：
vue中使用MathJax 3.0简单步骤
mathjax
基于vue渲染Latex数学公式（simplemde-editor)
LatexToMathML
uniapp使用mathjax解析公式
网友评论