mingxue
/
front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
							<!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 id="qs" style="padding-bottom: 15px" v-html="data.title"></div>
          <div id="ans" style="background:#fff;width: fit-content;">
            <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>
    <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: '18342627',
      imgUri: '',
      times: 2,
      qsHeight: null
    }
    // 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.style.width = this.times * width + 'px'
          canvasWrap.style.height = this.times * height + 'px'
          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 cb = (i, resolve) => {
                if (i.style.float && i.style.float !== 'none' && i.style.float !== 'unset') {
                  const qs = document.querySelector('#qs')
                  this.qsHeight = qs.getBoundingClientRect().height;
                }
                const title = document.querySelector('#title')
                const ans = document.querySelector('#ans')
                ans.style.display = 'none';
                this.$nextTick(() => {
                  const { width, height } = title.getBoundingClientRect();
                  html2canvas(title, {
                    canvas: this.getCanvasWrap(width + 20, height),
                    useCORS: true,
                    onclone: (e) => {
                      const ans = e.getElementById('ans');
                      ans.parentNode.removeChild(ans);
                    }
                  }).then((canvas) => {
                    ans.style.display = 'block';
                    this.$nextTick(() => {
                      resolve(canvas);
                    });
                  })
                });

              }
              const promise = new Promise((resolve, reject) => {
                i.onload = (e) => {
                  // 如果图片存在浮动，需要手动设置容器的高度
                  cb(i, resolve)
                }
                if (i.complete) {
                  cb(i, resolve)
                }
              })
              promiseArr.push(promise)
            }
            if (i.hasChildNodes()) {
              this.findAllEle(promiseArr, i)
            }
          }
        },
        waitingLoadingImg(cb) {
          this.qsHeight = null;
          let doms
          let parent
          const title = document.querySelector('#title');
          const qs = document.querySelector('#qs');
          this.qsHeight = qs.getBoundingClientRect().height;
          // 每次重置容器高度
          title.style.height = 'auto'
          const promiseArr = []
          this.findAllEle(promiseArr, title)
          if (promiseArr.length === 0) {
            const { width, height } = qs.getBoundingClientRect()
            html2canvas(title, {
              canvas: this.getCanvasWrap(width + 20, height),
              useCORS: true,
              onclone: (e) => {
                const ans = e.getElementById('ans');
                ans.parentNode.removeChild(ans);
              }
            }).then((canvas) => {
              if (cb) {
                cb(canvas)
              }
            })
          } else {
            Promise.all(promiseArr).then(res => {
              // 虽然用了Promise.all，但实际假设只有一张图片
              console.log(res)
              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(() => {
                MathQueue('title', () => {
                  // 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()
                }, 1500)
              }
              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) {//初始化公式
          console.log(isMathjaxConfig)
          if (isMathjaxConfig) {
            setTimeout(() => {
              this.$nextTick(() => {
                this.waitingLoadingImg((canvas) => {
                  this.downLoad(str, canvas)
                })
              });
            }, 0)
          } else {
            setTimeout(() => {
              this.MathQueueTitle(str)
            }, 300)
          }
        },
        downLoad(type, canvas1) {
          if (!this.data.questionId) {
            this.$message({
              message: '请先搜索题目！',
              type: 'warning'
            })
            return
          }
          this.questionId = this.data.questionId
          let _canvas = document.getElementById('ans')
          const { width, height } = _canvas.getBoundingClientRect()
          html2canvas(_canvas, {
            canvas: this.getCanvasWrap(width + 40, height),
            useCORS: true,
            onclone: (e) => {
              const qs = e.getElementById('qs');
              qs.parentNode.removeChild(qs)
            }
          }).then((canvas2) => {
            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, (this.qsHeight * this.times) || (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>