滑动验证码图片 400*200 抠图 61*200

src/components/verifition/Verify/VerifyPoints.vue

@@ -22,7 +22,7 @@
                 <!-- <canvas :width="setSize.imgWidth" :height="setSize.imgHeight"
                         ref="canvas"
                         @click="bindingClick?canvasClick($event):undefined"></canvas> -->
-                <img :src="'data:image/png;base64,'+pointBackImgBase" 
+                <img :src="'data:image/png;base64,'+pointBackImgBase"
                 ref="canvas"
                 alt=""  style="width:100%;height:100%;display:block"
                 @click="bindingClick?canvasClick($event):undefined">
@@ -60,7 +60,7 @@
      * VerifyPoints
      * @description 点选
      * */
-   
+
 
     import {resetSize, _code_chars, _code_color1, _code_color2} from './../utils/util'
 
@@ -118,8 +118,8 @@
                 type: Object,
                 default() {
                     return {
-                        width: '310px',
-                        height: '155px'
+                        width: '400px',
+                        height: '200px'
                     }
                 }
             },
@@ -127,7 +127,7 @@
                 type: Object,
                 default() {
                     return {
-                        width: '310px',
+                        width: '400px',
                         height: '40px'
                     }
                 }
@@ -282,9 +282,9 @@
             //获取坐标
             getMousePos: function (obj, e) {
                 // console.log(e);
-                
-                var x = e.offsetX 
-                var y = e.offsetY 
+
+                var x = e.offsetX
+                var y = e.offsetY
 
                 return {x, y}
             },
@@ -377,8 +377,8 @@
             //坐标转换函数
             pointTransfrom(pointArr,imgSize){
                 var newPointArr = pointArr.map(p=>{
-                    let x = Math.round(310 * p.x/parseInt(imgSize.imgWidth)) 
-                    let y =Math.round(155 * p.y/parseInt(imgSize.imgHeight)) 
+                    let x = Math.round(400 * p.x/parseInt(imgSize.imgWidth))
+                    let y =Math.round(200 * p.y/parseInt(imgSize.imgHeight))
                     return {x,y}
                 })
                 // console.log(newPointArr,"newPointArr");
@@ -407,4 +407,4 @@
             }
         }
     }
-</script>
\ No newline at end of file
+</script>

src/components/verifition/Verify/VerifySlide.vue

@@ -11,7 +11,7 @@
     <div style="position: relative;"
          >
         <!-- puzzle的情况 -->
-        
+
         <div v-if="type === '2'" class="verify-img-out"
              v-show="showImage"
              :style="{height: (parseInt(setSize.imgHeight) + vSpace) + 'px'}"
@@ -48,8 +48,8 @@
                        <!-- 'background': 'url(data:image/png;base64,'+ blockBackImgBase + ')', -->
                     <div v-if="type === '2'"
                          class="verify-sub-block"
-                    
-                         :style="{'width':Math.ceil(parseInt(setSize.imgWidth)*50/310)+ 'px' ,
+
+                         :style="{'width':Math.ceil(parseInt(setSize.imgWidth)*61/400)+ 'px' ,
                                   'height': setSize.imgHeight,
                                   'top':'-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
                                   'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
@@ -114,8 +114,8 @@
                 type: Object,
                 default() {
                     return {
-                        width: '310px',
-                        height: '155px'
+                        width: '400px',
+                        height: '200px'
                     }
                 }
             },
@@ -132,7 +132,7 @@
                 type: Object,
                 default() {
                     return {
-                        width: '310px',
+                        width: '400px',
                         height: '40px'
                     }
                 }
@@ -287,13 +287,13 @@
 
             //鼠标松开
             end: function () {
-                this.endMovetime = +new Date(); 
+                this.endMovetime = +new Date();
                 var _this = this;
 //                判断是否重合
                 if (this.status && this.isEnd == false) {
                     if (this.type !== '1') {		//图片滑动
                         var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', ''));
-                        moveLeftDistance = moveLeftDistance * 310/ parseInt(this.setSize.imgWidth)
+                        moveLeftDistance = moveLeftDistance * 400/ parseInt(this.setSize.imgWidth)
 
                         let data = {
                             captchaType:this.captchaType,
@@ -308,7 +308,7 @@
                                 this.iconColor = '#fff'
                                 this.iconClass = 'icon-check'
                                 this.showRefresh = false
-                                this.isEnd = true;   
+                                this.isEnd = true;
                                 if (this.mode=='pop') {
                                     setTimeout(()=>{
                                         this.$parent.clickShow = false;
@@ -468,7 +468,7 @@
             }
         },
         // created(){
-            
+
         // },
         i18n: {
             messages: {