预览识别结果完成

src/views/tasks/Index.vue

@@ -106,10 +106,9 @@
       </div>
     </el-dialog>
     <!-- 预览识别结果 -->
-    <el-dialog title="预览识别结果" :visible.sync="showAnsVisible" width="80%" append-to-body>
+    <el-dialog title="预览识别结果" :visible.sync="showAnsVisible" width="1080px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <img :src="curStudentRecImg" width="100%" alt="" id="stdKhImg" style="display:none;">
-        <canvas v-if="showAnsVisible" id="myCanvas" ref="myCanvas" :width="srcImgWidth" :height="srcImgHeight"></canvas>
+        <canvas id="myCanvas" ref="myCanvas" :width="srcImgWidth*canvasImgScale" :height="srcImgHeight*canvasImgScale"></canvas>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="showAnsVisible = false">关 闭</el-button>
@@ -314,6 +313,7 @@
         checkList:[],
         srcImgWidth:null,
         srcImgHeight:null,
+        canvasImgScale:1,
         ctx:null
       };
     },
@@ -623,38 +623,34 @@
       showStudentImgs(row) {
         this.curStudentRecImg = JSON.parse(row.imgs)[0];
         this.showAnsVisible = true;
-        let objective_result = row.objective_result;
         let that = this;
 
         this.$nextTick(function () {
-            var image = new Image();
-            image.src = that.curStudentRecImg;
-            that.srcImgWidth = image.width;
-            that.srcImgHeight = image.height;
+            let objective_result = row.objective_result;
+              that.canvas = document.getElementById("myCanvas");
+              that.ctx = that.canvas.getContext("2d");
 
-            // 绘图canvas
-            that.canvas = that.$refs.myCanvas;
-            that.canvas = document.getElementById("myCanvas");
-            that.ctx = that.canvas.getContext("2d");
+              var image = new Image();
+              image.src = that.curStudentRecImg;
 
-            
-
-            let img = document.getElementById("stdKhImg");
-            img.onload = function () {
-                that.ctx.drawImage(img, 0, 0, that.srcImgWidth, that.srcImgHeight, 0, 0, that.srcImgWidth, that
-                    .srcImgHeight)
+              image.onload = function(){
+                that.srcImgWidth = image.width;
+                that.srcImgHeight = image.height;
+                console.log(that.srcImgHeight,33333333333333333)
+                that.canvasImgScale = 1000/image.width;
+                that.ctx.drawImage(image, 0, 0, that.srcImgWidth, that.srcImgHeight, 0, 0, that.srcImgWidth*that.canvasImgScale, that
+                      .srcImgHeight*that.canvasImgScale)
 
                 objective_result.forEach(item=>{
                   item.forEach(iitem=>{
-                    that.drawRect(iitem.absX,iitem.absY,iitem.w,iitem.h);
-                    that.ctx.font = '30px Arial';
+                    that.drawRect(iitem.absX*that.canvasImgScale,iitem.absY*that.canvasImgScale,iitem.w*that.canvasImgScale,iitem.h*that.canvasImgScale);
+                    that.ctx.font = '12px Arial';
                     that.ctx.fillStyle = 'red';
-                    that.ctx.fillText(iitem.ans, iitem.absX,iitem.absY);
+                    that.ctx.fillText(iitem.ans, iitem.absX*that.canvasImgScale,iitem.absY*that.canvasImgScale);
                   })
                 })
 
             }
-            that.img = img
         })
 
       },