<template>
|
<div>
|
<h2>手写识别</h2>
|
<div class="box" style="width: 100%;height: 400px;">
|
<graffiti :save="save" />
|
</div>
|
<div>
|
<p>识别结果：</p>
|
|
<div id="showData">
|
<vue-latex :expression="content" display-mode />
|
</div>
|
</div>
|
<h2>公式输入</h2>
|
<math-field class="mathField" @input="handleInput" :menuItems="[]">{{valueData}}</math-field>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, nextTick, reactive, watch, onMounted, onBeforeMount, onBeforeUnmount, inject } from 'vue'
|
import { MathfieldElement } from "mathlive"
|
import graffiti from '@/components/graffiti/index.vue'
|
const commonsVariable: any = inject('commonsVariable')
|
const MG: any = inject('MG')
|
const valueData = ref("f(x) = \\frac{x}{2}")
|
const handleInput = (data) => {
|
console.log(data.target.value);
|
}
|
|
|
|
const content = ref('')
|
const save = (data) => {
|
console.log(data.split(",")[1]);
|
MG.app
|
.getLatexFormulaFromImage({
|
base64Jpg: data.split(",")[1]
|
})
|
.then((res: any) => {
|
content.value = res;
|
nextTick(() => {
|
|
})
|
})
|
}
|
|
</script>
|
|
<style lang="less">
|
.mathField {
|
// width: 500px;
|
margin-top: 10px;
|
}
|
|
#showData {
|
border: 1px solid #ccc;
|
padding: 20px;
|
margin-top: 10px;
|
margin-bottom: 50px;
|
}
|
</style>
|
