适配

public/collectImg/index.html

@@ -70,9 +70,9 @@
       time: null,
       domain: '',
       isAuto: false,
-      questionId: '20061713',
+      questionId: '51748',
       imgUri: '',
-      times: 2
+      times: 1
     }
     // window.onload = function(){
     new Vue({
@@ -151,12 +151,24 @@
               promiseArr.push(promise);
             }
           }
-          Promise.all(promiseArr).then(res => {
-            // 虽然用了Promise.all，但实际假设只有一张图片
-            if (cb) {
-              cb(res[0])
-            }
-          });
+          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) {
@@ -220,7 +232,9 @@
             console.log(response)
             if (response.data.code == 200) {
               if (this.isAuto) {
-                this.getData()
+                setTimeout(() => {
+                  this.getData()
+                }, 1000);
               }
               if (type) {
                 this.$message({
@@ -273,6 +287,9 @@
             });
             return
           }
+          this.questionId=this.data.questionId
+          const times = 2 // 图片放大倍数，能提升清晰度
+
           let _this = this
           _this.imgUri = ''
           document.getElementById('qs').style.display = 'none'
@@ -283,25 +300,25 @@
             useCORS: true,
           }).then((canvas2) => {
             document.getElementById('qs').style.display = 'block'
-            console.log(canvas2)
             var canvas3 = document.createElement("canvas");
-            canvas3.width = Math.max(canvas1.width, canvas2.width)
-            canvas3.height = canvas1.height + (canvas2.width && canvas2.height ? canvas2.height : 0)
+            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)
             var ctx = canvas3.getContext("2d");
-            // 绘制题目
-            ctx.drawImage(canvas1, 0, 0, canvas1.width, canvas1.height);
+//            ctx.scale(times, times) ///缩放等级
+
+          // 绘制题目
+            canvas1 && ctx.drawImage(canvas1, 0, 0, canvas1.width*times, canvas1.height*times);
             if (canvas2.width && canvas2.height) {
-              console.log(123)
               // 绘制答案
-              ctx.drawImage(canvas2, 0, canvas1.height, canvas2.width, canvas2.height);
+              ctx.drawImage(canvas2, 0, canvas1?.height*times ?? 0, canvas2.width*times, canvas2.height*times);
             }
             _this.imgUri = canvas3.toDataURL('image/png')
             canvas1 = null
             canvas2 = null
             canvas3 = null
-            // if (!type) {
-            //   _this.uploadQuestionImage(imgUri)
-            // }
+            if (!type) {
+              _this.uploadQuestionImage(_this.imgUri)
+            }
           })
         },