|
|
@@ -1,12 +1,13 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="zh">
|
|
|
+
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<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">
|
|
|
@@ -14,7 +15,8 @@
|
|
|
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
|
|
|
<title></title>
|
|
|
<style>
|
|
|
- html, body {
|
|
|
+ html,
|
|
|
+ body {
|
|
|
margin: 0;
|
|
|
padding: 0
|
|
|
}
|
|
|
@@ -31,204 +33,283 @@
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
+
|
|
|
<body>
|
|
|
-<div id="app">
|
|
|
- <div style="min-height:300px;">
|
|
|
- <div id="title" style="background:#fff; max-width:1024px">
|
|
|
- <div style=";padding-top:10px;padding-left:10px">
|
|
|
- <div style="padding-bottom: 15px" v-html="data.title"></div>
|
|
|
- <div v-for="(itemOpt, idx) in data.options" :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 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 style="height:15px"></div>
|
|
|
</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: '',
|
|
|
- imgUri: ''
|
|
|
- }
|
|
|
- // window.onload = function(){
|
|
|
- new Vue({
|
|
|
- el: '#app',
|
|
|
- data: exampleData,
|
|
|
- created() {
|
|
|
- // if(this.domain == 'localhost:9800'){
|
|
|
- this.domain = 'https://front.mingxuejinbang.com'
|
|
|
- window.myVue = this
|
|
|
- // }
|
|
|
- // this.getData()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- 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'
|
|
|
- })
|
|
|
- }
|
|
|
+ <script>
|
|
|
+ var exampleData = {
|
|
|
+ selectOpt: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
|
|
|
+ data: {},
|
|
|
+ time: null,
|
|
|
+ domain: '',
|
|
|
+ isAuto: false,
|
|
|
+ questionId: '20061713',
|
|
|
+ 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()
|
|
|
},
|
|
|
- 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)
|
|
|
- })
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ waitingLoaingImg(cb) {
|
|
|
+ let doms;
|
|
|
+ const qs = document.querySelector('#qs');
|
|
|
+ // 每次重置容器高度
|
|
|
+ qs.style.height = 'auto';
|
|
|
+ if (this.hasImg(qs)) {
|
|
|
+ doms = qs?.children ?? [];
|
|
|
+ } else {
|
|
|
+ doms = qs.firstChild?.children ?? [];
|
|
|
+ }
|
|
|
+ const promiseArr = [];
|
|
|
+ for (let i of doms) {
|
|
|
+ if (i.nodeName === 'IMG') {
|
|
|
+ const promise = new Promise((resolve, reject) => {
|
|
|
+ i.onload = async (e) => {
|
|
|
+ // 如果图片存在浮动，需要手动设置容器的高度
|
|
|
+ if (i.style.float) {
|
|
|
+ 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)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ promiseArr.push(promise);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ Promise.all(promiseArr).then(res => {
|
|
|
+ // 虽然用了Promise.all，但实际假设只有一张图片
|
|
|
+ if (cb) {
|
|
|
+ cb(res[0])
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ if (this.questionId) {
|
|
|
+ this.getData(this.questionId)
|
|
|
} else {
|
|
|
- this.isAuto = false
|
|
|
this.$message({
|
|
|
- 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) {
|
|
|
- this.getData()
|
|
|
+ },
|
|
|
+ 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: '获取题目信息失败',
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
}
|
|
|
- if (type) {
|
|
|
+ }).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) {
|
|
|
+ this.getData()
|
|
|
+ }
|
|
|
+ if (type) {
|
|
|
+ this.$message({
|
|
|
+ message: '上传题目信息成功！',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.isAuto = false
|
|
|
this.$message({
|
|
|
- message: '上传题目信息成功！',
|
|
|
- type: 'success'
|
|
|
- })
|
|
|
+ message: '上传题目信息失败！',
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
}
|
|
|
- } else {
|
|
|
+
|
|
|
+ }).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: '上传题目信息失败！',
|
|
|
+ message: '请先搜索题目！',
|
|
|
type: 'warning'
|
|
|
- })
|
|
|
+ });
|
|
|
+ return
|
|
|
}
|
|
|
-
|
|
|
- }).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)
|
|
|
- })
|
|
|
- }, 1000)
|
|
|
- } else {
|
|
|
- this.time = setInterval(() => {
|
|
|
- this.MathQueueTitle()
|
|
|
- }, 5)
|
|
|
- }
|
|
|
- },
|
|
|
- downLoad(type) {
|
|
|
- if (!this.data.questionId) {
|
|
|
- this.$message({
|
|
|
- message: '请先搜索题目！',
|
|
|
- type: 'warning'
|
|
|
+ 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'
|
|
|
+ console.log(canvas2)
|
|
|
+ var canvas3 = document.createElement("canvas");
|
|
|
+ canvas3.width = Math.max(canvas1.width, canvas2.width)
|
|
|
+ canvas3.height = canvas1.height + (canvas2.width && canvas2.height ? canvas2.height : 0)
|
|
|
+ var ctx = canvas3.getContext("2d");
|
|
|
+ // 绘制题目
|
|
|
+ ctx.drawImage(canvas1, 0, 0, canvas1.width, canvas1.height);
|
|
|
+ if (canvas2.width && canvas2.height) {
|
|
|
+ console.log(123)
|
|
|
+ // 绘制答案
|
|
|
+ ctx.drawImage(canvas2, 0, canvas1.height, canvas2.width, canvas2.height);
|
|
|
+ }
|
|
|
+ _this.imgUri = canvas3.toDataURL('image/png')
|
|
|
+ canvas1 = null
|
|
|
+ canvas2 = null
|
|
|
+ canvas3 = null
|
|
|
+ // if (!type) {
|
|
|
+ // _this.uploadQuestionImage(imgUri)
|
|
|
+ // }
|
|
|
})
|
|
|
- return
|
|
|
- }
|
|
|
- const times = 2 // 图片放大倍数，能提升清晰度
|
|
|
- let _this = this
|
|
|
- _this.imgUri = ''
|
|
|
- let canvas2 = document.createElement('canvas')
|
|
|
- let _canvas = document.getElementById('title')
|
|
|
- let w = parseInt(window.getComputedStyle(_canvas).width)
|
|
|
- let h = parseInt(window.getComputedStyle(_canvas).height)
|
|
|
- canvas2.width = times * w
|
|
|
- canvas2.height = times * h
|
|
|
- canvas2.style.width = times * w + 'px'
|
|
|
- canvas2.style.height = times * h + 'px'
|
|
|
- let context = canvas2.getContext('2d')
|
|
|
- context.scale(times, times) ///缩放等级
|
|
|
- html2canvas(document.getElementById('title'), {
|
|
|
- canvas: canvas2,
|
|
|
- useCORS: true
|
|
|
- //allowTaint: false,
|
|
|
- }).then(function(canvas) {
|
|
|
- let imgUri = canvas.toDataURL('image/jpeg', 2) // 获取生成的图片的url
|
|
|
- _this.imgUri = imgUri
|
|
|
- // if (!type) {
|
|
|
- _this.uploadQuestionImage(imgUri)
|
|
|
- // }
|
|
|
- })
|
|
|
- }
|
|
|
+ },
|
|
|
|
|
|
- }
|
|
|
- })
|
|
|
- // }
|
|
|
+ }
|
|
|
+ });
|
|
|
+// }
|
|
|
|
|
|
-</script>
|
|
|
+ </script>
|
|
|
</body>
|
|
|
+
|
|
|
</html>
|
shilipojs