update

src/views/tasks/Index.vue

@@ -108,11 +108,8 @@
     <!-- 预览识别结果 -->
     <el-dialog title="预览识别结果" :visible.sync="showAnsVisible" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-image :src="curStudentRecImg">
-          <div slot="error" class="image-slot">
-            <i class="el-icon-picture-outline"></i>
-          </div>
-        </el-image>
+        <img :src="curStudentRecImg" width="100%" alt="" id="stdKhImg" style="display:none;">
+        <canvas v-if="showAnsVisible" id="myCanvas" ref="myCanvas" :width="srcImgWidth" :height="srcImgHeight"></canvas>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="showAnsVisible = false">关 闭</el-button>
@@ -245,7 +242,8 @@
 </template>
 <script>
   import Page from "../../components/Page";
-  import MarkTaskSetDialog from "./components/MarkTaskSetDialog"
+  import MarkTaskSetDialog from "./components/MarkTaskSetDialog";
+  import Cropper from 'cropperjs'
   export default {
     components: {
       Page,
@@ -313,7 +311,10 @@
         objectiveQueList:[],
         subjectiveQueList:[],
         subjectiveMarkTeacherList:[],
-        checkList:[]
+        checkList:[],
+        srcImgWidth:null,
+        srcImgHeight:null,
+        ctx:null
       };
     },
     methods: {
@@ -606,9 +607,56 @@
       handleRemove(e) {
         console.log(e)
       },
+      drawRect(x, y, lineW, lineY) {
+          //   开始绘制;
+          this.ctx.beginPath();
+          //   //设置线条颜色，必须放在绘制之前
+          this.ctx.strokeStyle = "red";
+          //   console.log("44444444");
+          //   // 线宽设置，必须放在绘制之前
+          this.ctx.lineWidth = 1;
+          //   console.log("5555555555");
+          // strokeRect参数：（左上角x坐标，y:左上角y坐标，绘画矩形的宽度，绘画矩形的高度）
+          this.ctx.strokeRect(x, y, lineW, lineY);
+          //   console.log("66666666666666");
+      },
       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;
+
+            // 绘图canvas
+            that.canvas = that.$refs.myCanvas;
+            that.canvas = document.getElementById("myCanvas");
+            that.ctx = that.canvas.getContext("2d");
+
+            
+
+            let img = document.getElementById("stdKhImg");
+            img.onload = function () {
+                that.ctx.drawImage(img, 0, 0, that.srcImgWidth, that.srcImgHeight, 0, 0, that.srcImgWidth, that
+                    .srcImgHeight)
+
+                objective_result.forEach(item=>{
+                  item.forEach(iitem=>{
+                    that.drawRect(iitem.absX,iitem.absY,iitem.w,iitem.h);
+                    that.ctx.font = '30px Arial';
+                    that.ctx.fillStyle = 'red';
+                    that.ctx.fillText(iitem.ans, iitem.absX,iitem.absY);
+                  })
+                })
+
+            }
+            that.img = img
+        })
+
       },
       showCurRecImg(row) {
         this.curStudentRecImg = row.ans_imgs.replace(".png", "_draw_ans.png");