mingxue
/
front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
							<!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: '52635',
      imgUri: '',
      times: 1,
    }
    // 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;
        },
        // 遍历所有子元素
        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 promise = 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();
                  html2canvas(qs, {
                    canvas: this.getCanvasWrap(width, height),
                    useCORS: true,
                  }).then((canvas) => {
                    resolve(canvas)
                  })
                }
              });
              promiseArr.push(promise);
            }
            if (i.hasChildNodes()) {
              this.findAllEle(promiseArr, i);
            }
          }
        },
        waitingLoaingImg(cb) {
          let doms;
          let parent;
          const qs = document.querySelector('#qs');
          // 每次重置容器高度
          qs.style.height = 'auto';
          const promiseArr = [];
          this.findAllEle(promiseArr, qs);
          if (promiseArr.length === 0) {
            const { width, height } = qs.getBoundingClientRect();
            html2canvas(qs, {
              canvas: this.getCanvasWrap(width, height),
              useCORS: true,
            }).then((canvas) => {
              if (cb) {
                cb(canvas)
              }
            })
          } else {
            Promise.all(promiseArr).then(res => {
              // 虽然用了Promise.all，但实际假设只有一张图片
              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(() => {
                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) {
                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)
            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: '请先搜索题目！',
              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>