mingxue
/
front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
							<!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>
  <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">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <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;
    }
  </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>
  </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'
          })
        }
      },
      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) {
              this.getData()
            }
            if (type) {
              this.$message({
                message: '上传题目信息成功！',
                type: 'success'
              })
            }
          } else {
            this.isAuto = false
            this.$message({
              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
        }
        this.questionId=this.data.questionId
        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>
</body>
</html>