TextbookReader.git

New file
			@@ -0,0 +1,61 @@
			<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>