mingxue
/
front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
							<!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 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>
  <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: '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;
        })
      },
      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
      },
      // 遍历所有子元素
      async findAllEle(canvasContainer, 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') {
            return 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()
                const imgCanvas = await html2canvas(qs, {
                  canvas: this.getCanvasWrap(width, height),
                  useCORS: true
                })
                canvasContainer.push(imgCanvas)
              }
              i.onerror = (e) => reject(e)
            })
          }
          if (i.hasChildNodes()) {
            await this.findAllEle(canvasContainer, i)
          }
        }
      },
      async waitingLoaingImg(cb) {
        let doms
        let parent
        const qs = document.querySelector('#qs')
        // 每次重置容器高度
        qs.style.height = 'auto'
        const canvasContainer = []
        // await this.findAllEle(canvasContainer, qs) // 原来是为了处理图片跨域问题的无效代码
        if (canvasContainer.length === 0) {
          const { width, height } = qs.getBoundingClientRect()
          const topCanvas = await html2canvas(qs, {
            canvas: this.getCanvasWrap(width, height),
            useCORS: true
          })
          canvasContainer.push(topCanvas)
        }
        return canvasContainer
      },
      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 => {
          if (response.data.code == 200) {
            if (this.isAuto) {
              setTimeout(() => {
                this.getData()
              }, 2000)
            }
            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)
          console.log('math queue begin', new Date().getTime(), this.data?.questionId)
          MathQueue('title', async() => {
            console.log('math queue end', new Date().getTime(), this.data?.questionId)
            const canvasContainer = await this.waitingLoaingImg() // TODO: 有些题会终止运行在此，如：18343772 18343941
            console.log('canvas download begin', new Date().getTime(), this.data?.questionId)
            this.downLoad(str, canvasContainer[0]) // at least contains 1 element
          })
        } 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>
</body>

</html>