上传图片

public/collectImg/index.html

@@ -39,7 +39,7 @@
     <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">
+        <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">
@@ -71,7 +71,8 @@
       domain: '',
       isAuto: false,
       questionId: '20061713',
-      imgUri: ''
+      imgUri: '',
+      times: 2
     }
     // window.onload = function(){
     new Vue({
@@ -112,6 +113,13 @@
           }
           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;
+        },
         waitingLoaingImg(cb) {
           let doms;
           const qs = document.querySelector('#qs');
@@ -131,7 +139,9 @@
                   if (i.style.float) {
                     qs.style.height = Math.max(qs.getBoundingClientRect().height, i.height) + 'px'
                   }
-                  html2canvas(document.getElementById('qs'), {
+                  const { width, height } = qs.getBoundingClientRect();
+                  html2canvas(qs, {
+                    canvas: this.getCanvasWrap(width, height),
                     useCORS: true,
                   }).then((canvas) => {
                     resolve(canvas)
@@ -263,46 +273,35 @@
             });
             return
           }
-          this.questionId=this.data.questionId
-          const times = 2 // 图片放大倍数，能提升清晰度
           let _this = this
           _this.imgUri = ''
-          // let canvas2 = document.createElement('canvas')
+          document.getElementById('qs').style.display = 'none'
           let _canvas = document.getElementById('ans')
-          // console.log(_canvas)
-          // let w = parseInt(window.getComputedStyle(_canvas).width)
-          // let h = parseInt(window.getComputedStyle(_canvas).height)
-          // canvas2.width = w
-          // canvas2.height = h
-          // canvas2.style.width = w + 'px'
-          // canvas2.style.height = h + 'px'
-          // let context = canvas2.getContext('2d')
-          // context.scale(1, 1) ///缩放等级
-          html2canvas(document.getElementById('ans'), {
-            // canvas: canvas2,
+          const { width, height } = _canvas.getBoundingClientRect();
+          html2canvas(_canvas, {
+            canvas: this.getCanvasWrap(width, height),
             useCORS: true,
-            allowTaint: false
-          }).then(function (canvas2) {
+          }).then((canvas2) => {
+            document.getElementById('qs').style.display = 'block'
+            console.log(canvas2)
             var canvas3 = document.createElement("canvas");
-            canvas3.width = canvas1.width*times + (canvas2.width*times && canvas2.height*times ? canvas2.width*times : 0)
-            canvas3.height = canvas1.height*times + (canvas2.width*times && canvas2.height*times ? canvas2.height*times : 0)
+            canvas3.width = Math.max(canvas1.width, canvas2.width)
+            canvas3.height = canvas1.height + (canvas2.width && canvas2.height ? canvas2.height : 0)
             var ctx = canvas3.getContext("2d");
-            ctx.scale(times, times) ///缩放等级
-
             // 绘制题目
-            ctx.drawImage(canvas1, 0, 0, canvas1.width*times, canvas1.height*times);
-            console.log(canvas2.width*times, canvas2.height*times)
-            if (canvas2.width*times && canvas2.height*times) {
+            ctx.drawImage(canvas1, 0, 0, canvas1.width, canvas1.height);
+            if (canvas2.width && canvas2.height) {
+              console.log(123)
               // 绘制答案
-              ctx.drawImage(canvas2, 0, canvas1.height*times, canvas2.width*times, canvas2.height*times);
+              ctx.drawImage(canvas2, 0, canvas1.height, canvas2.width, canvas2.height);
             }
             _this.imgUri = canvas3.toDataURL('image/png')
             canvas1 = null
             canvas2 = null
             canvas3 = null
-             if (!type) {
-               _this.uploadQuestionImage(imgUri)
-             }
+            // if (!type) {
+            //   _this.uploadQuestionImage(imgUri)
+            // }
           })
         },