|
|
@@ -7,7 +7,7 @@
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
|
|
|
<script type="text/javascript" async
|
|
|
- src="https://mingxuejingbang.oss-cn-beijing.aliyuncs.com/MathJaxFiles/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
|
|
|
+ src="https://mingxuejingbang.oss-cn-beijing.aliyuncs.com/MathJaxFiles/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
|
|
|
<script type="text/javascript" async src="js/globalVariable.js"></script>
|
|
|
<script type="text/javascript" async src="js/html2canvas.min.js"></script>
|
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
|
@@ -35,307 +35,309 @@
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
- <div id="app">
|
|
|
- <div style="min-height:300px;">
|
|
|
- <div id="title" style="background:#fff;max-width:1024px">
|
|
|
- <div id="qs" style="padding-bottom: 15px" v-html="data.title"></div>
|
|
|
- <div id="ans" style="background:#fff">
|
|
|
- <template v-for="(itemOpt, idx) in data.options">
|
|
|
- <div :key="idx">
|
|
|
- <el-radio style="margin-bottom: 15px" :label="selectOpt[idx]" border size="medium">
|
|
|
- {{ selectOpt[idx] + ' 、 ' }}<span style="white-space: normal" v-html="itemOpt"></span>
|
|
|
- </el-radio>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
+<div id="app">
|
|
|
+ <div style="min-height:300px;">
|
|
|
+ <div id="title" style="background:#fff;max-width:1024px">
|
|
|
+ <div id="qs" style="padding-bottom: 15px" v-html="data.title"></div>
|
|
|
+ <div id="ans" style="background:#fff">
|
|
|
+ <template v-for="(itemOpt, idx) in data.options">
|
|
|
+ <div :key="idx">
|
|
|
+ <el-radio style="margin-bottom: 15px" :label="selectOpt[idx]" border size="medium">
|
|
|
+ {{ selectOpt[idx] + ' 、 ' }}<span style="white-space: normal" v-html="itemOpt"></span>
|
|
|
+ </el-radio>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div style="margin-bottom:20px;padding: 15px;background: rgb(255, 255, 255); max-width: 1024px;">
|
|
|
- <el-input v-model="questionId" style="width: 150px;" placeholder="请输入题目编号"></el-input>
|
|
|
- <el-button type="primary" :disabled="isAuto" @click="search">搜索</el-button>
|
|
|
- <el-button type="primary" :disabled="isAuto" @click="upLoad">手动上传</el-button>
|
|
|
- <el-button type="primary" @click="auto">{{isAuto?'暂停':'自动运行'}}</el-button>
|
|
|
- </div>
|
|
|
- <div v-if="imgUri" style="margin-top:30px;padding: 15px;background: rgb(255, 255, 255); max-width: 1024px;">
|
|
|
- 图片展示：
|
|
|
- <img :src="imgUri" alt="" crossorigin="anonymous">
|
|
|
- </div>
|
|
|
</div>
|
|
|
+ <div style="margin-bottom:20px;padding: 15px;background: rgb(255, 255, 255); max-width: 1024px;">
|
|
|
+ <el-input v-model="questionId" style="width: 150px;" placeholder="请输入题目编号"></el-input>
|
|
|
+ <el-button type="primary" :disabled="isAuto" @click="search">搜索</el-button>
|
|
|
+ <el-button type="primary" :disabled="isAuto" @click="upLoad">手动上传</el-button>
|
|
|
+ <el-button type="primary" @click="auto">{{ isAuto ? '暂停' : '自动运行' }}</el-button>
|
|
|
+ </div>
|
|
|
+ <div v-if="imgUri" style="margin-top:30px;padding: 15px;background: rgb(255, 255, 255); max-width: 1024px;">
|
|
|
+ 图片展示：
|
|
|
+ <img :src="imgUri" alt="" crossorigin="anonymous">
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
|
|
|
|
|
|
- <script>
|
|
|
- var exampleData = {
|
|
|
- selectOpt: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
|
|
|
- data: {},
|
|
|
- time: null,
|
|
|
- domain: '',
|
|
|
- isAuto: false,
|
|
|
- questionId: '52635',
|
|
|
- imgUri: '',
|
|
|
- times: 1,
|
|
|
- }
|
|
|
- // window.onload = function(){
|
|
|
- new Vue({
|
|
|
- el: '#app',
|
|
|
- data: exampleData,
|
|
|
- created() {
|
|
|
- // if(this.domain == 'localhost:9800'){
|
|
|
- this.domain = 'https://front.mingxuejinbang.com'
|
|
|
- // }
|
|
|
- // this.getData()
|
|
|
+<script>
|
|
|
+ var exampleData = {
|
|
|
+ selectOpt: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
|
|
|
+ data: {},
|
|
|
+ time: null,
|
|
|
+ domain: '',
|
|
|
+ isAuto: false,
|
|
|
+ questionId: '2000038',
|
|
|
+ imgUri: '',
|
|
|
+ times: 2
|
|
|
+ }
|
|
|
+ // window.onload = function(){
|
|
|
+ new Vue({
|
|
|
+ el: '#app',
|
|
|
+ data: exampleData,
|
|
|
+ created() {
|
|
|
+ // if(this.domain == 'localhost:9800'){
|
|
|
+ this.domain = 'https://front.mingxuejinbang.com'
|
|
|
+ // }
|
|
|
+ // this.getData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ convertImgToBase64(img) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ let canvas = document.createElement('canvas')
|
|
|
+ const ctx = canvas.getContext('2d')
|
|
|
+ canvas.height = img.height
|
|
|
+ canvas.width = img.width
|
|
|
+ ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
|
|
|
+ let ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
|
|
|
+ const base64 = canvas.toDataURL('image/' + ext)
|
|
|
+ canvas = null
|
|
|
+ const holder = new Image()
|
|
|
+ holder.setAttribute('crossOrigin', 'anonymous')
|
|
|
+ holder.onload = (e) => {
|
|
|
+ resolve(holder)
|
|
|
+ }
|
|
|
+ holder.src = base64
|
|
|
+ // return base64;
|
|
|
+ })
|
|
|
},
|
|
|
- methods: {
|
|
|
- convertImgToBase64(img) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- let canvas = document.createElement('canvas');
|
|
|
- const ctx = canvas.getContext('2d');
|
|
|
- canvas.height = img.height;
|
|
|
- canvas.width = img.width;
|
|
|
- ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
|
|
- let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
|
|
|
- const base64 = canvas.toDataURL("image/" + ext);
|
|
|
- canvas = null;
|
|
|
- const holder = new Image();
|
|
|
- holder.setAttribute('crossOrigin', 'anonymous')
|
|
|
- holder.onload = (e) => {
|
|
|
- resolve(holder)
|
|
|
- }
|
|
|
- holder.src = base64;
|
|
|
- // return base64;
|
|
|
- });
|
|
|
- },
|
|
|
- hasImg(dom) {
|
|
|
- for (let i of dom?.children || []) {
|
|
|
- if (i.nodeName === 'IMG') {
|
|
|
- return true;
|
|
|
- }
|
|
|
+ hasImg(dom) {
|
|
|
+ for (let i of dom?.children || []) {
|
|
|
+ if (i.nodeName === 'IMG') {
|
|
|
+ return true
|
|
|
}
|
|
|
- return false;
|
|
|
- },
|
|
|
- getCanvasWrap(width, height) {
|
|
|
- const canvasWrap = document.createElement('canvas')
|
|
|
- canvasWrap.width = this.times * width
|
|
|
- canvasWrap.height = this.times * height
|
|
|
- canvasWrap.getContext('2d').scale(this.times, this.times)
|
|
|
- return canvasWrap;
|
|
|
- },
|
|
|
- getUnderline(num) {
|
|
|
- const underline = document.createElement('div');
|
|
|
- // 暂定于1个空格5像素
|
|
|
- underline.setAttribute('style', `width: ${num * 5}px;border-bottom: 1px solid #000000;display: inline-block;vertical-align: baseline;transform: translateY(2px);`);
|
|
|
- return underline;
|
|
|
- },
|
|
|
- // 遍历所有子元素
|
|
|
- findAllEle(promiseArr, parent) {
|
|
|
- for (let i of parent.childNodes) {
|
|
|
- if (i.nodeName === 'U') {
|
|
|
- parent.insertBefore(this.getUnderline(i.innerText.length), i);
|
|
|
- parent.removeChild(i);
|
|
|
- } else if (i.nodeName === 'IMG') {
|
|
|
- const promise = new Promise((resolve, reject) => {
|
|
|
- i.onload = async (e) => {
|
|
|
- // 如果图片存在浮动，需要手动设置容器的高度
|
|
|
- if (i.style.float) {
|
|
|
- const qs = document.querySelector('#qs');
|
|
|
- qs.style.height = Math.max(qs.getBoundingClientRect().height, i.height) + 'px'
|
|
|
- }
|
|
|
- const { width, height } = qs.getBoundingClientRect();
|
|
|
- html2canvas(qs, {
|
|
|
- canvas: this.getCanvasWrap(width, height),
|
|
|
- useCORS: true,
|
|
|
- }).then((canvas) => {
|
|
|
- resolve(canvas)
|
|
|
- })
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ getCanvasWrap(width, height) {
|
|
|
+ const canvasWrap = document.createElement('canvas')
|
|
|
+ canvasWrap.width = this.times * width
|
|
|
+ canvasWrap.height = this.times * height
|
|
|
+ canvasWrap.getContext('2d').scale(this.times, this.times)
|
|
|
+ return canvasWrap
|
|
|
+ },
|
|
|
+ getUnderline(num) {
|
|
|
+ const underline = document.createElement('div')
|
|
|
+ // 暂定于1个空格5像素
|
|
|
+ underline.setAttribute('style', `width: ${num * 5}px;border-bottom: 1px solid #000000;display: inline-block;vertical-align: baseline;transform: translateY(2px);`)
|
|
|
+ return underline
|
|
|
+ },
|
|
|
+ // 遍历所有子元素
|
|
|
+ findAllEle(promiseArr, parent) {
|
|
|
+ for (let i of parent.childNodes) {
|
|
|
+ if (i.nodeName === 'U') {
|
|
|
+ parent.insertBefore(this.getUnderline(i.innerText.length), i)
|
|
|
+ parent.removeChild(i)
|
|
|
+ } else if (i.nodeName === 'IMG') {
|
|
|
+ const promise = new Promise((resolve, reject) => {
|
|
|
+ i.onload = async(e) => {
|
|
|
+ // 如果图片存在浮动，需要手动设置容器的高度
|
|
|
+ if (i.style.float) {
|
|
|
+ const qs = document.querySelector('#qs')
|
|
|
+ qs.style.height = Math.max(qs.getBoundingClientRect().height, i.height) + 'px'
|
|
|
}
|
|
|
- });
|
|
|
- promiseArr.push(promise);
|
|
|
- }
|
|
|
- if (i.hasChildNodes()) {
|
|
|
- this.findAllEle(promiseArr, i);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- waitingLoaingImg(cb) {
|
|
|
- let doms;
|
|
|
- let parent;
|
|
|
- const qs = document.querySelector('#qs');
|
|
|
- // 每次重置容器高度
|
|
|
- qs.style.height = 'auto';
|
|
|
- const promiseArr = [];
|
|
|
- this.findAllEle(promiseArr, qs);
|
|
|
- if (promiseArr.length === 0) {
|
|
|
- const { width, height } = qs.getBoundingClientRect();
|
|
|
- html2canvas(qs, {
|
|
|
- canvas: this.getCanvasWrap(width, height),
|
|
|
- useCORS: true,
|
|
|
- }).then((canvas) => {
|
|
|
- if (cb) {
|
|
|
- cb(canvas)
|
|
|
+ const { width, height } = qs.getBoundingClientRect()
|
|
|
+ html2canvas(qs, {
|
|
|
+ canvas: this.getCanvasWrap(width, height),
|
|
|
+ useCORS: true
|
|
|
+ }).then((canvas) => {
|
|
|
+ resolve(canvas)
|
|
|
+ })
|
|
|
}
|
|
|
})
|
|
|
- } else {
|
|
|
- Promise.all(promiseArr).then(res => {
|
|
|
- // 虽然用了Promise.all，但实际假设只有一张图片
|
|
|
- if (cb) {
|
|
|
- cb(res[0])
|
|
|
- }
|
|
|
- });
|
|
|
+ promiseArr.push(promise)
|
|
|
}
|
|
|
- },
|
|
|
- search() {
|
|
|
- if (this.questionId) {
|
|
|
- this.getData(this.questionId)
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- message: '请输入题目编号',
|
|
|
- type: 'warning'
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- auto() {
|
|
|
- this.isAuto = !this.isAuto;
|
|
|
- if (this.isAuto) {
|
|
|
- this.getData()
|
|
|
+ if (i.hasChildNodes()) {
|
|
|
+ this.findAllEle(promiseArr, i)
|
|
|
}
|
|
|
- },
|
|
|
- upLoad() {
|
|
|
- if (this.questionId && this.imgUri) {
|
|
|
- this.uploadQuestionImage(this.imgUri, 1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ waitingLoaingImg(cb) {
|
|
|
+ let doms
|
|
|
+ let parent
|
|
|
+ const qs = document.querySelector('#qs')
|
|
|
+ // 每次重置容器高度
|
|
|
+ qs.style.height = 'auto'
|
|
|
+ const promiseArr = []
|
|
|
+ this.findAllEle(promiseArr, qs)
|
|
|
+ if (promiseArr.length === 0) {
|
|
|
+ const { width, height } = qs.getBoundingClientRect()
|
|
|
+ html2canvas(qs, {
|
|
|
+ canvas: this.getCanvasWrap(width, height),
|
|
|
+ useCORS: true
|
|
|
+ }).then((canvas) => {
|
|
|
+ if (cb) {
|
|
|
+ cb(canvas)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ Promise.all(promiseArr).then(res => {
|
|
|
+ // 虽然用了Promise.all，但实际假设只有一张图片
|
|
|
+ if (cb) {
|
|
|
+ cb(res[0])
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ if (this.questionId) {
|
|
|
+ this.getData(this.questionId)
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: '请输入题目编号',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ auto() {
|
|
|
+ this.isAuto = !this.isAuto
|
|
|
+ if (this.isAuto) {
|
|
|
+ this.getData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ upLoad() {
|
|
|
+ if (this.questionId && this.imgUri) {
|
|
|
+ this.uploadQuestionImage(this.imgUri, 1)
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: '请先搜索题目',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getData(questionId) {
|
|
|
+ axios.defaults.withCredentials = true
|
|
|
+ let str = ''
|
|
|
+ if (questionId) {
|
|
|
+ str = '?questionId=' + questionId
|
|
|
+ }
|
|
|
+ axios.get(this.domain + '/prod-api/front/questionCollection/getNextQuestionForImageGenerate' + str).then(response => {
|
|
|
+ if (response.data.code == 200) {
|
|
|
+ this.data = response.data.data
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.MathQueueTitle(str)
|
|
|
+ })
|
|
|
} else {
|
|
|
+ this.isAuto = false
|
|
|
this.$message({
|
|
|
- message: '请先搜索题目',
|
|
|
+ message: '获取题目信息失败',
|
|
|
type: 'warning'
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- getData(questionId) {
|
|
|
- axios.defaults.withCredentials = true;
|
|
|
- let str = ''
|
|
|
- if (questionId) {
|
|
|
- str = '?questionId=' + questionId
|
|
|
+ })
|
|
|
}
|
|
|
- axios.get(this.domain + '/prod-api/front/questionCollection/getNextQuestionForImageGenerate' + str).then(response => {
|
|
|
- if (response.data.code == 200) {
|
|
|
- this.data = response.data.data
|
|
|
- this.$nextTick(() => {
|
|
|
- this.MathQueueTitle(str)
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.isAuto = false
|
|
|
- this.$message({
|
|
|
- message: '获取题目信息失败',
|
|
|
- type: 'warning'
|
|
|
- });
|
|
|
+ }).catch(function(error) { // 请求失败处理
|
|
|
+ this.isAuto = false
|
|
|
+ this.$message.error('网络请求异常！')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ uploadQuestionImage(src, type) {
|
|
|
+ axios.defaults.withCredentials = true
|
|
|
+ var formData = new FormData()
|
|
|
+ formData.append('questionId', this.data.questionId)
|
|
|
+ formData.append('imageBase64', src)
|
|
|
+ if (this.isAuto == false) {
|
|
|
+ formData.append('manual', true)
|
|
|
+ }
|
|
|
+ axios.post(this.domain + '/prod-api/front/questionCollection/uploadQuestionImage', formData).then(response => {
|
|
|
+ console.log(response)
|
|
|
+ if (response.data.code == 200) {
|
|
|
+ if (this.isAuto) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getData()
|
|
|
+ }, 2000)
|
|
|
}
|
|
|
- }).catch(function (error) { // 请求失败处理
|
|
|
- this.isAuto = false
|
|
|
- this.$message.error('网络请求异常！');
|
|
|
- });
|
|
|
- },
|
|
|
- uploadQuestionImage(src, type) {
|
|
|
- axios.defaults.withCredentials = true;
|
|
|
- var formData = new FormData()
|
|
|
- formData.append('questionId', this.data.questionId)
|
|
|
- formData.append('imageBase64', src)
|
|
|
- if (this.isAuto == false) {
|
|
|
- formData.append('manual', true)
|
|
|
- }
|
|
|
- axios.post(this.domain + '/prod-api/front/questionCollection/uploadQuestionImage', formData).then(response => {
|
|
|
- console.log(response)
|
|
|
- if (response.data.code == 200) {
|
|
|
- if (this.isAuto) {
|
|
|
- setTimeout(() => {
|
|
|
- this.getData()
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- if (type) {
|
|
|
- this.$message({
|
|
|
- message: '上传题目信息成功！',
|
|
|
- type: 'success'
|
|
|
- });
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.isAuto = false
|
|
|
+ if (type) {
|
|
|
this.$message({
|
|
|
- message: '上传题目信息失败！',
|
|
|
- type: 'warning'
|
|
|
- });
|
|
|
+ message: '上传题目信息成功！',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
}
|
|
|
-
|
|
|
- }).catch(function (error) { // 请求失败处理
|
|
|
- this.isAuto = false
|
|
|
- this.$message.error('网络请求异常！');
|
|
|
- });
|
|
|
- },
|
|
|
- getCookie(str) {//获取cookie
|
|
|
- let cookie = document.cookie.split('; ');
|
|
|
- let cookies = {}
|
|
|
- cookie.forEach(item => {
|
|
|
- cookies[item.split('=')[0]] = item.split('=')[1]
|
|
|
- })
|
|
|
- return cookies[str]
|
|
|
- },
|
|
|
- MathQueueTitle(str) {//初始化公式
|
|
|
- if (MathQueue) {
|
|
|
- clearInterval(this.time)
|
|
|
- MathQueue('title')
|
|
|
- // setTimeout(() => {
|
|
|
- // this.$nextTick(() => {
|
|
|
- // this.downLoad(str)
|
|
|
- this.waitingLoaingImg((canvas) => { this.downLoad(str, canvas) });
|
|
|
- // })
|
|
|
- // }, 1000)
|
|
|
} else {
|
|
|
- this.time = setInterval(() => {
|
|
|
- this.MathQueueTitle()
|
|
|
- }, 5)
|
|
|
- }
|
|
|
- },
|
|
|
- downLoad(type, canvas1) {
|
|
|
- if (!this.data.questionId) {
|
|
|
+ this.isAuto = false
|
|
|
this.$message({
|
|
|
- message: '请先搜索题目！',
|
|
|
+ message: '上传题目信息失败！',
|
|
|
type: 'warning'
|
|
|
- });
|
|
|
- return
|
|
|
+ })
|
|
|
}
|
|
|
- this.questionId=this.data.questionId
|
|
|
- const times = 2 // 图片放大倍数，能提升清晰度
|
|
|
- let _this = this
|
|
|
- _this.imgUri = ''
|
|
|
- document.getElementById('qs').style.display = 'none'
|
|
|
- let _canvas = document.getElementById('ans')
|
|
|
- const { width, height } = _canvas.getBoundingClientRect();
|
|
|
- html2canvas(_canvas, {
|
|
|
- canvas: this.getCanvasWrap(width, height),
|
|
|
- useCORS: true,
|
|
|
- }).then((canvas2) => {
|
|
|
- document.getElementById('qs').style.display = 'block'
|
|
|
- var canvas3 = document.createElement("canvas");
|
|
|
- canvas3.width = Math.max(canvas1?.width ?? 0, canvas2.width)
|
|
|
- canvas3.height = (canvas1?.height ?? 0) + (canvas2.width && canvas2.height ? canvas2.height : 0)
|
|
|
- var ctx = canvas3.getContext("2d");
|
|
|
- // 绘制题目
|
|
|
- canvas1 && ctx.drawImage(canvas1, 0, 0, canvas1.width, canvas1.height);
|
|
|
- if (canvas2.width && canvas2.height) {
|
|
|
- // 绘制答案
|
|
|
- ctx.drawImage(canvas2, 0, canvas1?.height ?? 0, canvas2.width, canvas2.height);
|
|
|
- }
|
|
|
- _this.imgUri = canvas3.toDataURL('image/png')
|
|
|
- canvas1 = null
|
|
|
- canvas2 = null
|
|
|
- canvas3 = null
|
|
|
- if (!type) {
|
|
|
- _this.uploadQuestionImage(_this.imgUri)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
|
|
|
+ }).catch(function(error) { // 请求失败处理
|
|
|
+ this.isAuto = false
|
|
|
+ this.$message.error('网络请求异常！')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getCookie(str) {//获取cookie
|
|
|
+ let cookie = document.cookie.split('; ')
|
|
|
+ let cookies = {}
|
|
|
+ cookie.forEach(item => {
|
|
|
+ cookies[item.split('=')[0]] = item.split('=')[1]
|
|
|
+ })
|
|
|
+ return cookies[str]
|
|
|
+ },
|
|
|
+ MathQueueTitle(str) {//初始化公式
|
|
|
+ if (MathQueue) {
|
|
|
+ clearInterval(this.time)
|
|
|
+ MathQueue('title')
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.downLoad(str)
|
|
|
+ this.waitingLoaingImg((canvas) => {
|
|
|
+ this.downLoad(str, canvas)
|
|
|
+ })
|
|
|
+ // })
|
|
|
+ // }, 1000)
|
|
|
+ } else {
|
|
|
+ this.time = setInterval(() => {
|
|
|
+ this.MathQueueTitle()
|
|
|
+ }, 5)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ downLoad(type, canvas1) {
|
|
|
+ if (!this.data.questionId) {
|
|
|
+ this.$message({
|
|
|
+ message: '请先搜索题目！',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.questionId = this.data.questionId
|
|
|
+ const times = 2 // 图片放大倍数，能提升清晰度
|
|
|
+ let _this = this
|
|
|
+ _this.imgUri = ''
|
|
|
+ document.getElementById('qs').style.display = 'none'
|
|
|
+ let _canvas = document.getElementById('ans')
|
|
|
+ const { width, height } = _canvas.getBoundingClientRect()
|
|
|
+ html2canvas(_canvas, {
|
|
|
+ canvas: this.getCanvasWrap(width, height),
|
|
|
+ useCORS: true
|
|
|
+ }).then((canvas2) => {
|
|
|
+ document.getElementById('qs').style.display = 'block'
|
|
|
+ var canvas3 = document.createElement('canvas')
|
|
|
+ canvas3.width = Math.max(canvas1?.width ?? 0, canvas2.width)
|
|
|
+ canvas3.height = (canvas1?.height ?? 0) + (canvas2.width && canvas2.height ? canvas2.height : 0)
|
|
|
+ var ctx = canvas3.getContext('2d')
|
|
|
+ // 绘制题目
|
|
|
+ canvas1 && ctx.drawImage(canvas1, 0, 0, canvas1.width, canvas1.height)
|
|
|
+ if (canvas2.width && canvas2.height) {
|
|
|
+ // 绘制答案
|
|
|
+ ctx.drawImage(canvas2, 0, canvas1?.height ?? 0, canvas2.width, canvas2.height)
|
|
|
+ }
|
|
|
+ _this.imgUri = canvas3.toDataURL('image/png')
|
|
|
+ canvas1 = null
|
|
|
+ canvas2 = null
|
|
|
+ canvas3 = null
|
|
|
+ if (!type) {
|
|
|
+ _this.uploadQuestionImage(_this.imgUri)
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- });
|
|
|
-// }
|
|
|
|
|
|
- </script>
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // }
|
|
|
+
|
|
|
+</script>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
