|
|
@@ -5,7 +5,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>
|
|
|
+ <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>
|
|
|
<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">
|
|
|
@@ -13,217 +14,221 @@
|
|
|
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
|
|
|
<title></title>
|
|
|
<style>
|
|
|
- html,body{
|
|
|
- margin:0;
|
|
|
- padding:0
|
|
|
- }
|
|
|
- .el-radio--medium.is-bordered {
|
|
|
- height: auto;
|
|
|
- padding-bottom: 8px;
|
|
|
- }
|
|
|
- #title::after {
|
|
|
- display: table;
|
|
|
- content: "";
|
|
|
- clear: both;
|
|
|
- }
|
|
|
+ html, body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-radio--medium.is-bordered {
|
|
|
+ height: auto;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #title::after {
|
|
|
+ display: table;
|
|
|
+ content: "";
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
</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>
|
|
|
- <div style="height:15px"></div>
|
|
|
- </div>
|
|
|
+<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>
|
|
|
+ <div style="height:15px"></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>
|
|
|
+ </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(){
|
|
|
+<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,
|
|
|
+ el: '#app',
|
|
|
+ data: exampleData,
|
|
|
created() {
|
|
|
// if(this.domain == 'localhost:9800'){
|
|
|
- this.domain = 'https://front.mingxuejinbang.com'
|
|
|
+ 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'
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- getData(questionId){
|
|
|
- axios.defaults.withCredentials=true;
|
|
|
+ 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'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getData(questionId) {
|
|
|
+ axios.defaults.withCredentials = true
|
|
|
let str = ''
|
|
|
- if(questionId){
|
|
|
- str = '?questionId='+questionId
|
|
|
+ if (questionId) {
|
|
|
+ str = '?questionId=' + questionId
|
|
|
}
|
|
|
- axios.get(this.domain+'/prod-api/front/questionCollection/getNextQuestionForImageGenerate'+str).then(response => {
|
|
|
- if(response.data.code ==200){
|
|
|
+ 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.$nextTick(() => {
|
|
|
this.MathQueueTitle(str)
|
|
|
})
|
|
|
- }else{
|
|
|
+ } 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){
|
|
|
- this.getData()
|
|
|
+ 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) {
|
|
|
+ this.getData()
|
|
|
}
|
|
|
- if(type){
|
|
|
+ if (type) {
|
|
|
this.$message({
|
|
|
- message: '上传题目信息成功！',
|
|
|
- type: 'success'
|
|
|
- });
|
|
|
+ message: '上传题目信息成功！',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
}
|
|
|
- }else{
|
|
|
- this.isAuto = false
|
|
|
+ } else {
|
|
|
+ this.isAuto = false
|
|
|
this.$message({
|
|
|
- message: '上传题目信息失败！',
|
|
|
- type: 'warning'
|
|
|
- });
|
|
|
+ message: '上传题目信息失败！',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
- }).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'
|
|
|
- });
|
|
|
- return
|
|
|
- }
|
|
|
- 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 = w
|
|
|
- canvas2.height = h
|
|
|
- canvas2.style.width = w + 'px'
|
|
|
- canvas2.style.height = h + 'px'
|
|
|
- let context = canvas2.getContext('2d')
|
|
|
- context.scale(1, 1) ///缩放等级
|
|
|
- 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)
|
|
|
- }
|
|
|
+ }).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'
|
|
|
})
|
|
|
- },
|
|
|
+ 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