Merge branch 'master' of http://121.4.203.192:9000/mingxue/front

public/collectImg/index.html

@@ -70,9 +70,9 @@
       time: null,
       domain: '',
       isAuto: false,
-      questionId: '51748',
+      questionId: '52635',
       imgUri: '',
-      times: 1
+      times: 1,
     }
     // window.onload = function(){
     new Vue({
@@ -85,7 +85,6 @@
         // this.getData()
       },
       methods: {
-
         convertImgToBase64(img) {
           return new Promise((resolve, reject) => {
             let canvas = document.createElement('canvas');
@@ -120,23 +119,24 @@
           canvasWrap.getContext('2d').scale(this.times, this.times)
           return canvasWrap;
         },
-        waitingLoaingImg(cb) {
-          let doms;
-          const qs = document.querySelector('#qs');
-          // 每次重置容器高度
-          qs.style.height = 'auto';
-          if (this.hasImg(qs)) {
-            doms = qs?.children ?? [];
-          } else {
-            doms = qs.firstChild?.children ?? [];
-          }
-          const promiseArr = [];
-          for (let i of doms) {
-            if (i.nodeName === 'IMG') {
+        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();
@@ -150,7 +150,19 @@
               });
               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, {
@@ -234,7 +246,7 @@
               if (this.isAuto) {
                 setTimeout(() => {
                   this.getData()
-                }, 1000);
+                }, 2000);
               }
               if (type) {
                 this.$message({
@@ -289,7 +301,6 @@
           }
           this.questionId=this.data.questionId
           const times = 2 // 图片放大倍数，能提升清晰度
-
           let _this = this
           _this.imgUri = ''
           document.getElementById('qs').style.display = 'none'
@@ -301,16 +312,14 @@
           }).then((canvas2) => {
             document.getElementById('qs').style.display = 'block'
             var canvas3 = document.createElement("canvas");
-            canvas3.width = Math.max(canvas1?.width*times ?? 0, canvas2.width*times)
-            canvas3.height = (canvas1?.height*times ?? 0) + (canvas2.width*times && canvas2.height*times ? canvas2.height*times : 0)
+            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");
-//            ctx.scale(times, times) ///缩放等级
-
-          // 绘制题目
-            canvas1 && ctx.drawImage(canvas1, 0, 0, canvas1.width*times, canvas1.height*times);
+            // 绘制题目
+            canvas1 && ctx.drawImage(canvas1, 0, 0, canvas1.width, canvas1.height);
             if (canvas2.width && canvas2.height) {
               // 绘制答案
-              ctx.drawImage(canvas2, 0, canvas1?.height*times ?? 0, canvas2.width*times, canvas2.height*times);
+              ctx.drawImage(canvas2, 0, canvas1?.height ?? 0, canvas2.width, canvas2.height);
             }
             _this.imgUri = canvas3.toDataURL('image/png')
             canvas1 = null