标准点完成

src/components/CanvasCropper.vue

@@ -0,0 +1,401 @@
+<template>
+    <div>
+        <div style="border:1px solid #ccc;overflow: scroll;" @contextmenu.prevent="onContextmenu">
+            <!-- 展示和划线使用 -->
+            <canvas id="myCanvas" 
+                ref="myCanvas" 
+                :width="srcImgWidth" 
+                :height="srcImgHeight" 
+                @click="findRect"
+                @mousedown="mousedown" 
+                @mouseup="mouseup" 
+                @mousemove="mousemove"
+                >
+            </canvas>
+            <!-- 存储原始图片 -->
+            <canvas id="myCopyCanvas" ref="myCopyCanvas" :width="srcImgWidth" :height="srcImgHeight">
+            </canvas>
+            <!-- 存储切割后的图片 -->
+            <canvas id="myCropCanvas" ref="myCropCanvas" :width="rectWidth" :height="rectHeight">
+            </canvas>
+            <img :src="srcImg" width="100%" alt="" id="stdKhImg" style="display:none;">
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "CanvasCropper",
+        // props: {
+        //     srcImg: String,
+        //     curId:String
+        // },
+        data() {
+            return {
+                srcImg: "http://test.scxjc.club/upload/%E5%88%9D%E4%B8%80%E8%AF%AD%E6%96%87_0001.png",
+                drawMode: "crop",
+                flag: false,
+                rectWidth: 0, //矩形框的宽
+                rectHeight: 0, //矩形框的高
+                totalRect: [], //画的所有的矩形坐标长度数据存储在数组中
+                downX: 0, //鼠标点击图片落下时的位置（X）
+                downY: 0, //鼠标点击图片落下时的位置（Y）
+                ctx: "", //dom节点
+                canvas: null,
+                rectTag: false,
+                delIndex: null, //删除时选中的矩形框的index
+                atime: null,
+                dialogVisible: false, //删除的弹出框
+                keyCode: null,
+                startX: null,
+                startY: null,
+                img: null,
+                imgWidth: null,
+                imgHeight: null,
+                cropWidth: 0,
+                cropHeight: 0,
+                khType: 1,
+                khLength: 6,
+                recTarget: 1,
+                curArea: null,
+                stdRect: null,
+                srcImgWidth: null,
+                srcImgHeight: null,
+                stdKhList: [],
+            };
+        },
+        mounted() {
+            let that = this
+            var image = new Image();
+            image.src = this.srcImg
+            image.crossOrigin = "";
+            this.srcImgWidth = image.width;
+            this.srcImgHeight = image.height;
+            // 绘图canvas
+            this.canvas = this.$refs.myCanvas;
+            this.canvas = document.getElementById("myCanvas")
+            this.ctx = this.canvas.getContext("2d");
+            // 复制canvas
+            this.copyCanvas = document.getElementById("myCopyCanvas")
+            this.copyCtx = this.copyCanvas.getContext("2d");
+            // 裁剪canvas
+            this.cropCanvas = document.getElementById("myCropCanvas")
+            this.cropCtx = this.cropCanvas.getContext("2d");
+
+            let img = document.getElementById("stdKhImg");
+            img.crossOrigin = "";
+            img.onload = function () {
+                that.ctx.drawImage(img, 0, 0, that.srcImgWidth, that.srcImgHeight, 0, 0, that.srcImgWidth, that
+                    .srcImgHeight)
+                that.copyCtx.drawImage(img, 0, 0, that.srcImgWidth, that.srcImgHeight, 0, 0, that.srcImgWidth, that
+                    .srcImgHeight)
+                that.img = img
+            }
+
+            // 键盘按下
+            document.onkeydown = function (event) {
+                that.keyCode = event.keyCode;
+                event.preventDefault();
+            }
+            // 键盘松开
+            document.onkeyup = function (event) {
+                that.keyCode = null
+                that.downX = that.startX
+                that.downY = that.downY
+                that.startX = null
+                that.startY = null
+            }
+
+            this.canvas.addEventListener("wheel",function(e){
+                console.log(e,1111111111)
+                that.zoom2(e.deltaY<0)
+                // that.zoom3(e.deltaY<0,e)
+                e.preventDefault();
+            })
+        },
+
+        methods: {
+            onContextmenu(event) {
+                // 右键点击事件
+                this.$contextmenu({
+                    items: [{
+                        label: "复制",
+                        onClick: () => {
+                            this.message = "返回(B)";
+                            console.log("返回(B)");
+                        }
+                    }, {
+                        label: "删除",
+                        onClick: () => {
+                            this.del()
+                        }
+                    }, {
+                        label: "刷新",
+                        onClick: () => {
+                            this.clear();
+                            this.totalRect = [];
+                            this.redrawAll();
+                        }
+                    }, {
+                        label: "正列",
+                        onClick: () => {
+                            this.message = "返回(B)";
+                            console.log("返回(B)");
+                            this.zhenlie();
+                        }
+                    }],
+                    x: event.clientX,
+                    y: event.clientY,
+                    zIndex: 10000,
+                    minWidth: 100
+                })
+            },
+            copy() {
+                console.log("复制操作");
+            },
+            delete() {
+                console.log("删除操作");
+            },
+            zhenlie() {
+                let stdW = this.stdRect["w"];
+                let stdH = this.stdRect["h"];
+                // 计算涂点间距
+                let totalWidth = this.curArea["w"];
+                let totalHeight = this.curArea["h"];
+                let startX = this.curArea["x"];
+                let startY = this.curArea["y"];
+                let stepW = (totalWidth - stdW * this.khLength) / (this.khLength - 1);
+                let stepH = (totalHeight - stdH * 10) / 9;
+                // 计算阵列矩形列表
+                let rectArray = [];
+                let stdKhList = [];
+                for (var i = 0; i < this.khLength; i++) {
+                    let tmpRow = [];
+                    for (var j = 0; j < 10; j++) {
+                        let tmp = {
+                            beforex: (stepW + stdW) * i + startX,
+                            beforey: (stepH + stdH) * j + startY,
+                            rectW: stdW,
+                            rectH: stdH
+                        }
+                        rectArray.push(tmp)
+                        tmpRow.push(tmp)
+                    }
+                    stdKhList.push(tmpRow)
+                }
+                this.clear();
+                this.totalRect = rectArray;
+                this.stdKhList = stdKhList;
+                this.redrawAll();
+            },
+            zoom2(flag = false) {
+                const scale = 0.8;
+                const beta = flag ? 1 / scale : scale;
+                console.log(beta,44444444444)
+                console.log(this.ctx)
+                this.downX = this.downX/beta;
+                this.downY = this.downY/beta;
+                this.ctx.scale(beta, beta);
+                this.clear();
+                this.redrawAll();
+            },
+            // 放下鼠标
+            mousedown(e) {
+                this.atime = new Date().getTime();
+                this.flag = true;
+                this.downX = e.offsetX; // 鼠标落下时的X
+                this.downY = e.offsetY; // 鼠标落下时的Y
+                console.log(this.downX,11111111111)
+                console.log(this.downY,2222222222)
+                this.mousemove(e);
+            },
+            // 移动鼠标
+            mousemove(e) {
+                if (this.flag) {
+                    //判断如果重右下往左上画，这种画法直接return
+                    if (this.downX - e.offsetX > 0 || this.downY - e.offsetY > 0) {
+                        // console.log("重右下往左上画");
+                        return
+                    } else {
+                        // console.log("重左上往右下画");
+                        this.clear(); //清空画布
+                        this.redrawAll();
+                        if (this.keyCode == 32) {
+                            // 如果按住空格键则移动矩形框
+                            this.startX = this.downX + (e.offsetX - this.downX) - this.rectWidth
+                            this.startY = this.downY + (e.offsetY - this.downY) - this.rectHeight
+                            this.drawRect(
+                                this.startX,
+                                this.startY,
+                                this.rectWidth,
+                                this.rectHeight
+                            )
+                        } else {
+                            //如果重左上往右下画，计算出鼠标移动的距离，也就是矩形框的宽和高
+                            this.rectWidth = Math.abs(this.downX - e.offsetX)
+                            this.rectHeight = Math.abs(this.downY - e.offsetY)
+                            //判断这个宽高的长度，如果小于10，直接return，因为鼠标移动距离过于短
+                            //防止点击页面时,会画成一个点，没有意义
+                            if (this.rectWidth < 10 || this.rectHeight < 10) {
+                                this.rectWidth = 0;
+                                this.rectHeight = 0;
+                                return;
+                            }
+                            if (this.startX) {
+                                this.downX = this.startX
+                            }
+                            if (this.startY) {
+                                this.downY = this.startY
+                            }
+                            this.drawRect(
+                                this.downX,
+                                this.downY,
+                                this.rectWidth,
+                                this.rectHeight
+                            )
+                        }
+                    }
+                }
+            },
+            // 抬起鼠标
+            mouseup(e) {
+                this.flag = false;
+                let a = new Date().getTime();
+                if (a - this.atime > 150) {
+                    this.rectTag = false;
+                } else {
+                    this.rectTag = true;
+                }
+                if (this.rectWidth && this.rectHeight && this.drawMode == "drawer") {
+                    //将画出的数据保存在totalRect中
+                    this.totalRect.push({
+                        beforex: this.downX,
+                        beforey: this.downY,
+                        rectW: this.rectWidth,
+                        rectH: this.rectHeight,
+                    });
+                    this.clear(); //清空画布
+                    this.redrawAll();
+                } else if (this.rectWidth && this.rectHeight && this.drawMode == "crop") {
+                    let data = this.copyCtx.getImageData(this.downX, this.downY, this.rectWidth, this.rectHeight)
+                    this.cropWidth = this.rectWidth;
+                    this.cropHeight = this.rectHeight;
+                    let c = document.getElementById("myCropCanvas");
+                    let ctx = c.getContext("2d");
+                    ctx.putImageData(data, 0, 0)
+                    let val = c.toDataURL("image/jpeg");
+                    this.clear();
+                    this.redrawAll();
+                    this.$emit("cropEnd", val);
+                }
+            },
+            redrawAll() {
+                //    console.log("先画之前画过的图，保证画多个的时候看起来像前一个不消失");
+                this.ctx.restore()
+                this.ctx.drawImage(this.img, 0, 0)
+                if (this.totalRect.length > 0) {
+                    this.totalRect.forEach((e) => {
+                        this.drawRect(e.beforex, e.beforey, e.rectW, e.rectH);
+                    });
+                }
+            },
+            //清除画布
+            clear() {
+                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+                this.ctx.restore()
+            },
+            drawRect(x, y, lineW, lineY) {
+                //   开始绘制;
+                this.ctx.beginPath();
+                //   //设置线条颜色，必须放在绘制之前
+                this.ctx.strokeStyle = "#850a1e";
+                //   console.log("44444444");
+                //   // 线宽设置，必须放在绘制之前
+                this.ctx.lineWidth = 1;
+                //   console.log("5555555555");
+                // strokeRect参数：（左上角x坐标，y:左上角y坐标，绘画矩形的宽度，绘画矩形的高度）
+                this.ctx.strokeRect(x, y, lineW, lineY);
+                //   console.log("66666666666666");
+            },
+            //点击画布
+            findRect(e) {
+                if (this.rectTag || true) {
+                    // console.log("this.totalRect", this.totalRect);
+                    //当点击画布的时候，计算有没有点再矩形框内、哪个矩形框内
+                    this.totalRect.map((item, index) => {
+                        if (
+                            e.offsetX - item.beforex > item.rectW ||
+                            e.offsetX < item.beforex ||
+                            e.offsetY - item.beforey > item.rectH ||
+                            e.offsetY < item.beforey
+                        ) {
+                            return;
+                        } else {
+                            //找到之后，设置下标
+                            this.delIndex = index;
+                            //打开删除弹框
+                            this.dialogVisible = true;
+                            console.log("this.delIndex", this.delIndex);
+                        }
+                    });
+                }
+            },
+            //点击删除按钮
+            del() {
+                this.dialogVisible = false;
+                //删除
+                this.ctx.clearRect(
+                    this.totalRect[this.delIndex].beforex - 2,
+                    this.totalRect[this.delIndex].beforey - 2,
+                    this.totalRect[this.delIndex].rectW + 4,
+                    this.totalRect[this.delIndex].rectH + 4
+                );
+                //删掉totalRect的数据，真正的项目中需要调用后台接口，删掉数据库中存储的数据
+                this.totalRect.splice(this.delIndex, 1);
+                //删掉之后，再画一次，刷新页面
+                this.redrawAll();
+                // console.log(this.totalRect, "删除了没");
+            },
+            getData() {
+                this.totalRect = [];
+                this.$api.getPaperInfo({
+                    id: this.curId
+                }).then((res) => {
+                    this.khType = res.data.data.khType;
+                    this.khLength = res.data.data.khLength;
+                    let stdKhList = JSON.parse(res.data.data.stdKhList);
+                    if (stdKhList) {
+                        stdKhList.forEach((children, index) => {
+                            children.forEach((item, index) => {
+                                this.totalRect.push(item)
+                            })
+                        })
+                    }
+                    this.redrawAll();
+                });
+            }
+        },
+    };
+</script>
+
+<style lang="scss" scoped>
+    #myCanvas {
+        background-color: #ccc;
+    }
+
+    #myCopyCanvas {
+        position: fixed;
+        left: 100%;
+    }
+
+    #myCropCanvas {
+        position: fixed;
+        left: 100%;
+    }
+
+    .dislog {
+        /* width: 200px; */
+        /* height: 200px; */
+        background-color: pink;
+    }
+</style>

src/router.js

@@ -80,10 +80,17 @@ export default new Router({
                     name: '试卷切割',
                     hide:1
                 },
+                {
+                    path: '/papertpl/testdraw',
+                    component: () =>
+                        import ('./views/papers/test.vue'),
+                    name: '试卷切割',
+                    hide:1
+                },
                 {
                     path: '/papertpl/drawer',
                     component: () =>
-                        import ('./views/papers/canvasDrawer.vue'),
+                        import ('./components/CanvasCropper.vue'),
                     name: '试卷切割',
                     hide:1
                 },

src/views/papers/Index.vue

@@ -26,9 +26,9 @@
     </el-form>
     <el-table v-loading="loading" :data="list" style="width: 100%; margin-top: 10px" height="50vh">
       <el-table-column align="center" prop="name" label="名称" />
-      <el-table-column align="center" prop="subject" label="科目" />
-      <el-table-column align="center" prop="size" label="尺寸" />
-      <el-table-column align="center" prop="num" label="页数" />
+      <!-- <el-table-column align="center" prop="subject" label="科目" />
+      <el-table-column align="center" prop="size" label="尺寸" /> -->
+      <el-table-column align="center" prop="imgNum" label="页数" />
       <el-table-column align="center" prop="ctime" label="创建时间" />
       <el-table-column align="center" prop="date" label="操作" width="320">
         <template slot-scope="scope">
@@ -45,7 +45,7 @@
         <el-form-item label="试卷名称" prop="name">
           <el-input clearable v-model="form.name" placeholder="请输入名称"></el-input>
         </el-form-item>
-        <el-form-item label="试卷科目" prop="role">
+        <!-- <el-form-item label="试卷科目" prop="role">
           <el-select v-model="form.subject" placeholder="请选择科目" filterable>
             <el-option v-for="item in $const.subjectList" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
@@ -56,7 +56,7 @@
             <el-option v-for="item in $const.paperSizeList" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
           </el-select>
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="试卷图片" prop>
           <el-upload
             class="upload-demo"
@@ -101,7 +101,7 @@
         open: false,
         doctorList: [],
         rules: {},
-        stepNum: 2,
+        stepNum: 1,
         fileList:[]
       };
     },

src/views/papers/canvasDrawer.vue

@@ -12,6 +12,9 @@
                 <el-radio v-model="recTarget" :label="1" :value="1">整块区域</el-radio>
                 <el-radio v-model="recTarget" :label="2" :value="2">单个涂点</el-radio>
             </el-form-item>
+            <el-form-item label="阈值">
+                <el-input-number size="mini" v-model="khThreshVal" :min="1" :max="5" label="描述文字"></el-input-number>
+            </el-form-item>
             <el-form-item>
                 <el-button type="primary" size="mini" @click="updateStdKhInfo">保存</el-button>
             </el-form-item>
@@ -20,8 +23,7 @@
             <canvas id="myCanvas" ref="myCanvas" :width="srcImgWidth" :height="srcImgHeight" @click="findRect"
                 @mousedown="mousedown" @mouseup="mouseup" @mousemove="mousemove">
             </canvas>
-            <canvas id="myCopyCanvas" ref="myCopyCanvas" :width="srcImgWidth" :height="srcImgHeight"
-                style="display: none;">
+            <canvas id="myCopyCanvas" ref="myCopyCanvas" :width="srcImgWidth" :height="srcImgHeight">
             </canvas>
             <canvas id="myCropCanvas" ref="myCropCanvas" :width="rectWidth" :height="rectHeight">
             </canvas>
@@ -66,7 +68,8 @@
                 stdRect:null,
                 srcImgWidth:null,
                 srcImgHeight:null,
-                stdKhList:[]
+                stdKhList:[],
+                khThreshVal:1
             };
         },
         created() {
@@ -98,7 +101,8 @@
             img.onload = function () {
                 that.ctx.drawImage(img, 0, 0, that.srcImgWidth, that.srcImgHeight, 0, 0, that.srcImgWidth, that
                     .srcImgHeight)
-                that.copyCtx.drawImage(img, 0, 0, 672, 264, 0, 0, 672, 264)
+                that.copyCtx.drawImage(img, 0, 0, that.srcImgWidth, that.srcImgHeight, 0, 0, that.srcImgWidth, that
+                    .srcImgHeight)
             }
             that.img = img
 
@@ -272,17 +276,21 @@
                     });
 
                     let data = this.copyCtx.getImageData(this.downX, this.downY, this.rectWidth, this.rectHeight)
+                    console.log(this.downX,this.downY,this.rectWidth,this.rectHeight)
+                    console.log(data,2222222222)
                     this.cropWidth = this.rectWidth;
                     this.cropHeight = this.rectHeight;
                     let c = document.getElementById("myCropCanvas");
                     let ctx = c.getContext("2d");
                     ctx.putImageData(data, 0, 0)
                     let val = c.toDataURL("image/jpeg");
+                    console.log(val,22222222222)
                     // 单个涂点
                     if (this.recTarget == 2) {
                         this.$api.tryRecArray({
                             sx: this.downX,
                             sy: this.downY,
+                            yz:this.khThreshVal,
                             img: val,
                             khLength: 15
                         }).then(res => {
@@ -374,11 +382,13 @@
                     this.khType = res.data.data.khType;
                     this.khLength = res.data.data.khLength;
                     let stdKhList = JSON.parse(res.data.data.stdKhList);
-                    stdKhList.forEach((children,index)=>{
+                    if(stdKhList){
+                        stdKhList.forEach((children,index)=>{
                         children.forEach((item,index)=>{
-                            this.totalRect.push(item)
+                                this.totalRect.push(item)
+                            })
                         })
-                    })
+                    }
                     this.redrawAll();
                 });
             },
@@ -403,6 +413,12 @@
     #myCanvas {
         background-color: #ccc;
     }
+    #myCopyCanvas {
+        position:fixed;left:100%;
+    }
+    #myCropCanvas {
+        position:fixed;left:100%;
+    }
 
     .dislog {
         /* width: 200px; */

src/views/papers/cutPaper.vue

@@ -8,7 +8,7 @@
     </div>
     <el-row :gutter="20" style="margin-bottom:10px;">
       <el-col :span="18">
-        <el-steps :active="stepNum" simple>
+        <el-steps :active="stepNum" simple >
           <el-step title="定标准点" icon="el-icon-edit"></el-step>
           <el-step title="考号区域" icon="el-icon-upload"></el-step>
           <el-step title="客观题" icon="el-icon-picture"></el-step>
@@ -16,7 +16,7 @@
       </el-col>
       <el-col :span="6">
         <el-button size="mini" type="primary" v-if="stepNum > 1" @click="stepNum-=1">上一步</el-button>
-        <el-button size="mini" type="primary" v-if="stepNum < 3" @click="stepNum+=1">下一步</el-button>
+        <el-button size="mini" type="primary" v-if="stepNum < 3" @click="nextStep">下一步</el-button>
         <el-button size="mini" type="success" v-if="stepNum == 3" @click="updatePaperRecInfo">保存</el-button>
       </el-col>
     </el-row>
@@ -26,7 +26,7 @@
           <img width="100%" :src="curPaperImg" />
         </div>
       </el-col>
-      <el-col :span="14" style="background:#fff;">
+      <el-col :span="14" style="background:#ccc;">
         <img id="image" ref="image" width="100%" :src="curPaperImg" />
       </el-col>
       <el-col :span="6">
@@ -35,25 +35,28 @@
             <div slot="header" class="clearfix">
               <span>选取标准点</span>
             </div>
-            <el-image height="60px" width="100%" :src="stdPointImg" :preview-src-list="[stdPointImg]"></el-image>
+              阈值：<el-input-number size="mini" v-model="stdThreshVal" :min="1" :max="5" label="描述文字"></el-input-number>
+            <el-image style="margin-top:20px 0px;border:1px solid #ccc;" height="60px" width="100%" :src="stdPointImg" :preview-src-list="[stdPointImg]"></el-image>
           </el-card>
           <el-card class="box-card" v-if="stepNum==2">
             <div slot="header" class="clearfix">
               <span>标注考号区域</span>
             </div>
-            <div style="margin-bottom:10px;">
-              <i class="el-icon-edit" @click="editKhCard(snoImg,curPaperId)"
-                style="float:right;color:blue;margin-right:20px;cursor: pointer;"></i>
-              <div class="clear"></div>
+            <div v-if="snoImg">
+              <div style="margin-bottom:10px;">
+                <i class="el-icon-edit" @click="editKhCard(snoImg,curPaperId)"
+                  style="float:right;color:blue;margin-right:20px;cursor: pointer;"></i>
+                <div class="clear"></div>
+              </div>
+              <el-image style="margin-bottom:20px 0px;border:1px solid #ccc;" height="60px" width="100%" :src="snoImg" :preview-src-list="[snoImg]"></el-image>
             </div>
-            <el-image height="60px" width="100%" :src="snoImg" :preview-src-list="[snoImg]"></el-image>
           </el-card>
           <el-card class="box-card" v-if="stepNum==3">
             <div slot="header" class="clearfix">
               <span>标注客观题</span>
             </div>
-            <div v-for="(item,index) in ansCardImgList">
-              <div style="margin-bottom:10px;">
+            <div v-if="ansCardImgList.length>0"  v-for="(item,index) in ansCardImgList">
+              <div style="margin-bottom:10px;" >
                 <i class="el-icon-delete" @click="ansCardImgList.splice(index,1)"
                   style="float:right;color:red;cursor: pointer;"></i>
                 <i class="el-icon-edit" @click="editAnsCard(item,curPaperId)"
@@ -62,7 +65,6 @@
               </div>
               <el-image style="margin-bottom:20px 0px;border:1px solid #ccc;" width="100%" :src="item"
                 :preview-src-list="[item]"></el-image>
-
             </div>
           </el-card>
         </div>
@@ -245,7 +247,7 @@
         open: false,
         doctorList: [],
         rules: {},
-        stepNum: 3,
+        stepNum: 1,
         stdPointImg: "",
         snoImg: "",
         snoImgW:0,
@@ -317,6 +319,7 @@
         recCurAnsImg: "",
         choiceType: 2,
         threshVal: 7,
+        stdThreshVal:3,
         stdChoiceList: [],
         myCropper: null,
         myAnsCropper: null,
@@ -327,7 +330,10 @@
         pageSize:10,
         khType:1,
         khLength:6,
-        khOpen:false
+        khOpen:false,
+        stdPoints:null,
+        khPointsCrop:{},
+        ansPointsCrop:{}
       };
     },
     watch: {
@@ -370,8 +376,11 @@
         this.$api.getPaperInfo(params).then((res) => {
           let imgs = JSON.parse(res.data.data.imgs);
           this.curPaperImg = imgs[0];
-          this.ansCardImgList = [res.data.data.ansPoints];
+          this.stdPointImg = res.data.data.stdPointsImg;
+          this.stdPoints = res.data.data.stdPoints?JSON.parse(res.data.data.stdPoints):{};
           this.snoImg = res.data.data.khPoints;
+          this.khPointsCrop = res.data.data.khPointsCrop?JSON.parse(res.data.data.khPointsCrop):{};
+          this.ansPointsCrop = res.data.data.ansPointsCrop?[res.data.data.ansPointsCrop]:[];
           this.khType = res.data.data.khType;
           this.khLength = res.data.data.khLength;
           this.initCropper();
@@ -411,6 +420,10 @@
         this.initAnsCropper();
       },
       updatePaperRecInfo() {
+        if (!this.stdPointImg) {
+          this.msgError("请标注标准点!")
+          return
+        }
         if (!this.snoImg) {
           this.msgError("请标注考号区域!")
           return
@@ -423,11 +436,12 @@
           id: this.$route.query.id,
           stdQnoPoints: this.stdQnoPoints,
           khPoints: this.snoImg,
-          ansPoints: this.curAnsImg,
+          ansPoints: this.ansCardImgList,
           stdChoices: this.stdChoiceList,
           stdQueList:this.stdQueList,
           khType:this.khType,
-          khLength:this.khLength
+          khLength:this.khLength,
+          ansPointsCrop:this.ansPointsCrop
         }
         this.$api.updatePaperInfo(params).then(res => {
           this.msgSuccess("成功!");
@@ -473,25 +487,56 @@
             cropstart: function (e) {},
             cropend: function (e) {
               if (that.dragMode == "crop") {
-                let cropData = that.myCropper.getCropBoxData();
-                console.log(cropData,333333333333)
+                let cropData = this.cropper.getData();
                 let cropperImgData = this.cropper.getCroppedCanvas({
                   width: 1310
                 }).toDataURL("image/jpeg");
+                // 标准点
                 if (that.stepNum == 1) {
                   that.stdPointImg = cropperImgData;
+                  that.$api.tryRecArray({
+                            sx: cropData.x,
+                            sy: cropData.y,
+                            yz: that.stdThreshVal,
+                            img: that.stdPointImg,
+                            khLength: 15
+                  }).then(res => {
+                      let oneRect = res.data.data.oneRect;
+                      let b64img = res.data.data.img;
+                      that.stdPointImg = b64img;
+                      that.stdPoints = oneRect;
+                  })
                 }
+                // 考号区域
                 if (that.stepNum == 2) {
+                  let khPointsCrop = {
+                    x:cropData.x,
+                    y:cropData.y,
+                    w:cropData.width,h:cropData.height
+                    }
+                  khPointsCrop["x"] = khPointsCrop["x"]-that.stdPoints["x"];
+                  khPointsCrop["y"] = khPointsCrop["y"]-that.stdPoints["y"];
+
+                  that.khPointsCrop = khPointsCrop;
                   that.snoImg = cropperImgData;
                   that.snoImgW = cropData.width;
                   that.snoImgH = cropData.height;
-                  console.log(that.snoImgW,that.snoImgH,33333333333333)
                 }
+                // 客观题
                 if (that.stepNum == 3) {
+                  let khPointsCrop = {
+                    x:cropData.x,
+                    y:cropData.y,
+                    w:cropData.width,h:cropData.height
+                    }
+                  khPointsCrop["x"] = khPointsCrop["x"]-that.stdPoints["x"];
+                  khPointsCrop["y"] = khPointsCrop["y"]-that.stdPoints["y"];
+                  that.ansPointsCrop = khPointsCrop;
                   that.ansCardImgList.push(cropperImgData);
                 }
               }
               that.myCropper.clear()
+              this.cropper.clear()
             },
             crop() {
               let cropData = that.myCropper.getCropBoxData();
@@ -519,9 +564,6 @@
             cropBoxResizable: true,
             movable: true,
             ready: function () {
-              // self.croppable = true;
-              // this.cropperCutImg = this.cropper.getCroppedCanvas({ width: 1310 }).toDataURL("image/jpeg")
-              // console.log(this.cropperCutImg,333333333)
               document.addEventListener('keydown', function (e) {
                 if (e.keyCode == 32) {
                   that.myAnsCropper.setDragMode("move");
@@ -614,6 +656,48 @@
       },
       handleCurrentChange(val){
         this.currentPage=val
+      },
+      nextStep(){
+        if(this.stepNum==1&&!this.stdPointImg){
+          this.msgError("请框选标准点,一般建议框选试卷标题!");
+          return 
+        }
+        if(this.stepNum==2&&!this.snoImg){
+          this.msgError("请框选考号区域!");
+          return
+        }
+        // 标准点
+        if(this.stepNum==1){
+          let params = {
+            id: this.$route.query.id,
+            stdPointsImg: this.stdPointImg,
+            stdPoints:this.stdPoints
+          }
+          this.$api.updatePaperInfo(params).then(res => {
+          })
+        }
+        // 考号
+        if(this.stepNum==2){
+          let params = {
+            id: this.$route.query.id,
+            khPoints:this.snoImg,
+            khPointsCrop:this.khPointsCrop
+          }
+          this.$api.updatePaperInfo(params).then(res => {
+          })
+        }
+        // 客观题
+        if(this.stepNum==2){
+          let params = {
+            id: this.$route.query.id,
+            ansPoints:this.ansCardImgList,
+            khPointsCrop:this.khPointsCrop
+          }
+          this.$api.updatePaperInfo(params).then(res => {
+          })
+        }
+        this.stepNum += 1;
+        this.getData();
       }
     },
     created() {
@@ -623,7 +707,7 @@
     mounted() {
       this.getData();
       // this.initCropper();
-    }
+    },
   };
 </script>
 <style lang="scss" scoped>

src/views/papers/test.vue

@@ -0,0 +1,40 @@
+<style lang="scss">
+  .content2{
+    width:70%;
+    height: 100%;
+    margin:0 auto;
+    border:1px solid red;
+  }
+</style>
+<template>
+  <div class="content2">
+      <CanvasCropper @cropEnd="cropEnd" />
+  </div>
+</template>
+<script>
+  import Page from "../../components/Page";
+  import Cropper from 'cropperjs'
+  import 'cropperjs/dist/cropper.css'
+  import CanvasCropper from "../../components/CanvasCropper";
+  export default {
+    components: {
+      Page,
+      CanvasCropper
+    },
+    data() {
+      return {
+        loading: false,
+      };
+    },
+    methods: {
+      cropEnd(val){
+        console.log(val,1111111111)
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+    }
+  };
+</script>