vue3 + ts 实现 滑块拼图验证

最新推荐文章于 2024-03-29 15:09:10 发布
最新推荐文章于 2024-03-29 15:09:10 发布
阅读量1.1k 收藏 7
点赞数
分类专栏： vue 文章标签： html css typescript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jie0817/article/details/121999396
版权

效果 

 

 

<template>
  <div
    class="slide-verify"
    :style="{ width: w + 'px' }"
    id="slideVerify"
    onselectstart="return false;"
  >
    <!-- 图片加载遮蔽罩 -->
    <div :class="{ 'slider-verify-loading': loadBlock }"></div>
    <canvas :width="w" :height="h" ref="canvasDocm"></canvas>
    <div v-if="show" @click="refresh" class="slide-verify-refresh-icon"></div>
    <canvas
      :width="w"
      :height="h"
      ref="block"
      class="slide-verify-block"
    ></canvas>
    <!-- container -->
    <div
      class="slide-verify-slider"
      :class="{
        'container-active': containerActive,
        'container-success': containerSuccess,
        'container-fail': containerFail,
      }"
    >
      <div class="slide-verify-slider-mask" :style="{ width: sliderMaskWidth }">
        <!-- slider -->
        <div
          @mousedown="sliderDown"
          @touchstart="touchStartEvent"
          @touchmove="touchMoveEvent"
          @touchend="touchEndEvent"
          class="slide-verify-slider-mask-item"
          :style="{ left: sliderLeft }"
        >
          <div class="slide-verify-slider-mask-item-icon"></div>
        </div>
      </div>
      <span class="slide-verify-slider-text">{{ sliderText }}</span>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from "vue";
export default defineComponent({
  name: "SlidePuzzleVerification",
  props: {
    l: {
      type: Number,
      default: 42,
    },
    r: {
      type: Number,
      default: 10,
    },
    w: {
      type: Number,
      default: 310,
    },
    h: {
      type: Number,
      default: 155,
    },
    sliderText: {
      type: String,
      default: "Slide filled right",
    },
    accuracy: {
      type: Number,
      default: 5, // 若为 -1 则不进行机器判断
    },
    show: {
      type: Boolean,
      default: true,
    },
    imgs: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, {emit, expose}) {
    const containerActive = ref(false);
    const containerSuccess = ref(false);
    const containerFail = ref(false);
    const canvasCtx = ref<CanvasRenderingContext2D | null>(null);
    const blockCtx = ref<CanvasRenderingContext2D | null>(null);
    const block = ref<HTMLCanvasElement | null>(null);
    const canvasDocm = ref<HTMLCanvasElement | null>(null);
    const L = ref(props.l + props.r * 2 + 3);
    const block_x = ref(0);
    const block_y = ref(0);
    const img = ref<HTMLImageElement>();
    const originX = ref(0);
    const originY = ref(0);
    const isMouseDown = ref(false)
    const trail = ref<number[]>([])
    const sliderLeft = ref('0')
    const sliderMaskWidth = ref('0')
    const success = ref(false)
    const loadBlock = ref(true)
    const timestamp = ref(0)

    const PI = Math.PI;

    const sum = (x:number, y:number) => {
      return x + y;
    }

    const square = (x:number) => {
      return x * x;
    }

    onMounted(() => {
      init();
    })
    const init = () => {
      initDom();
      initImg();
      bindEvents();
    }
    const initDom = () => {
      canvasCtx.value = canvasDocm.value ? canvasDocm.value.getContext("2d") : null;
      blockCtx.value = block.value ? block.value.getContext("2d") : null;
    }
    const initImg = () => {
      const creImg = createImg(() => {
        // 图片加载完关闭遮蔽罩
        loadBlock.value = false;
        drawBlock();
        canvasCtx.value?.drawImage(creImg, 0, 0, props.w, props.h);
        blockCtx.value?.drawImage(creImg, 0, 0, props.w, props.h);
        // let { block_x: x, block_y: y, r, L } = this;
        let _y = block_y.value - props.r * 2 - 1;
        let ImageData = blockCtx.value?.getImageData(block_x.value, _y, L.value, L.value);
        if(block.value){
          block.value.width = L.value;
        }
        blockCtx.value?.putImageData(ImageData!, 0, _y);
      });
      img.value = creImg;
    }
    const drawBlock = () => {
      block_x.value = getRandomNumberByRange(
        L.value + 10,
        props.w - (L.value + 10)
      );
      block_y.value = getRandomNumberByRange(
        10 + props.r * 2,
        props.h - (L.value + 10)
      );
      draw(canvasCtx.value as CanvasRenderingContext2D, block_x.value, block_y.value, "fill");
      draw(blockCtx.value as CanvasRenderingContext2D, block_x.value, block_y.value, "clip");
    }
    const draw = (ctx:CanvasRenderingContext2D, x:number, y:number, operation:string) => {
      // let { l, r } = this;
      let l = props.l;
      let r = props.r;
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
      ctx.lineTo(x + l, y);
      ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
      ctx.lineTo(x + l, y + l);
      ctx.lineTo(x, y + l);
      ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
      ctx.lineTo(x, y);
      ctx.lineWidth = 2;
      ctx.fillStyle = "rgba(255, 255, 255, 0.7)";
      ctx.strokeStyle = "rgba(255, 255, 255, 0.7)";
      ctx.stroke();
      if(operation === 'fill'){
        ctx[operation]();
      }else{
        ctx.clip();
      }
      
      // Bug Fixes 修复了火狐和ie显示问题
      ctx.globalCompositeOperation = "destination-over";
    }
    const createImg = (onload: () => void) => {
      const img = document.createElement("img");
      img.crossOrigin = "Anonymous";
      img.onload = onload;
      img.onerror = () => {
        img.src = getRandomImg();
      };
      img.src = getRandomImg();
      return img;
    }
    // 随机生成img src
    const getRandomImg = ():string => {
      // return require('../assets/img.jpg')
      const len = props.imgs.length;
      return len > 0 ? props.imgs[getRandomNumberByRange(0, len)] as string : "https://picsum.photos/300/150/?image=" + getRandomNumberByRange(0, 1084);
    }
    const getRandomNumberByRange = (start:number, end:number):number => {
      return Math.round(Math.random() * (end - start) + start);
    }
    const refresh = () => {
      reset();
      emit("refresh");
    }
    const sliderDown = (event:any) => {
      if (success.value) return;
      originX.value = event.clientX;
      originY.value = event.clientY;
      isMouseDown.value = true;
      timestamp.value = +new Date();
    }
    const touchStartEvent = (e:any) => {
      if (success.value) return;
      originX.value = e.changedTouches[0].pageX;
      originY.value = e.changedTouches[0].pageY;
      isMouseDown.value = true;
      timestamp.value = +new Date();
    }
    const bindEvents = () => {
      document.addEventListener("mousemove", (e) => {
        if (!isMouseDown.value) return false;
        const moveX = e.clientX - originX.value;
        const moveY = e.clientY - originY.value;
        if (moveX < 0 || moveX + 38 >= props.w) return false;
        sliderLeft.value = moveX + "px";
        let blockLeft = ((props.w - 40 - 20) / (props.w - 40)) * moveX;
        if(block.value){
          block.value.style.left = blockLeft + "px";
        }
        

        containerActive.value = true; // add active
        sliderMaskWidth.value = moveX + "px";
        trail.value.push(moveY);
      });
      document.addEventListener("mouseup", (e) => {
        if (!isMouseDown.value) return false;
        isMouseDown.value = false;
        if (e.clientX === originX.value) return false;
        containerActive.value = false; // remove active
        timestamp.value = +new Date() - timestamp.value;

        const { spliced, TuringTest } = verify();
        if (spliced) {
          if (props.accuracy === -1) {
            containerSuccess.value = true;
            success.value = true;
            emit("success", timestamp.value);
            return;
          }
          if (TuringTest) {
            // succ
            containerSuccess.value = true;
            success.value = true;
            emit("success", timestamp.value);
          } else {
            containerFail.value = true;
            emit("again");
          }
        } else {
          containerFail.value = true;
          emit("fail");
          setTimeout(() => {
            reset();
          }, 1000);
        }
      });
    }
    const touchMoveEvent = (e:any) => {
      if (!isMouseDown.value) return false;
      const moveX = e.changedTouches[0].pageX - originX.value;
      const moveY = e.changedTouches[0].pageY - originY.value;
      if (moveX < 0 || moveX + 38 >= props.w) return false;
      sliderLeft.value = moveX + "px";
      let blockLeft = ((props.w - 40 - 20) / (props.w - 40)) * moveX;
      if(block.value){
        block.value.style.left = blockLeft + "px";
      }
      

      containerActive.value = true;
      sliderMaskWidth.value = moveX + "px";
      trail.value.push(moveY);
    }
    const touchEndEvent = (e:any) => {
      if (!isMouseDown.value) return false;
      isMouseDown.value = false;
      if (e.changedTouches[0].pageX === originX.value) return false;
      containerActive.value = false;
      timestamp.value = +new Date() - timestamp.value;

      const { spliced, TuringTest } = verify();
      if (spliced) {
        if (props.accuracy === -1) {
          containerSuccess.value = true;
          success.value = true;
          emit("success", timestamp.value);
          return;
        }
        if (TuringTest) {
          // succ
          containerSuccess.value = true;
          success.value = true;
          emit("success", timestamp.value);
        } else {
          containerFail.value = true;
          emit("again");
        }
      } else {
        containerFail.value = true;
        emit("fail");
        setTimeout(() => {
          reset();
        }, 1000);
      }
    }
    const verify = () => {
      const arr = trail.value;
      const average = arr.reduce(sum);
      const deviations = arr.map((x) => x - average);
      const stddev = Math.sqrt(deviations.map(square).reduce(sum));
      const left = parseInt(block.value?.style.left as string);
      const accuracy =
        props.accuracy <= 1 ? 1 : props.accuracy > 10 ? 10 : props.accuracy;
      return {
        spliced: Math.abs(left - block_x.value) <= accuracy,
        TuringTest: average !== stddev, // equal => not person operate
      };
    }
    const reset = () => {
      success.value = false;
      containerActive.value = false;
      containerSuccess.value = false;
      containerFail.value = false;
      sliderLeft.value = '0';
      if(block.value){
        block.value.style.left = '0';
      }
      
      sliderMaskWidth.value = '0';
      canvasCtx.value?.clearRect(0, 0, props.w, props.h);
      blockCtx.value?.clearRect(0, 0, props.w, props.h);
      if(block.value){
        block.value.width = props.w;
      }
      if(img.value){
        img.value.src = getRandomImg();
      }
      emit("fulfilled");
    }
    // 暴露方法
    expose({ reset });

    return {
      containerActive,
      containerSuccess,
      containerFail,
      canvasCtx,
      blockCtx,
      block,
      canvasDocm,
      block_x,
      block_y,
      L,
      img,
      originX,
      originY,
      isMouseDown,
      trail,
      sliderLeft,
      sliderMaskWidth,
      success, 
      loadBlock,
      timestamp,
      touchStartEvent,
      touchMoveEvent,
      touchEndEvent,
      refresh,
      sliderDown
    };
  },
});
</script>
<style scoped>
.slide-verify {
  position: relative;
}

/* 图片加载样式 */
.slider-verify-loading {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 999;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 9;
  }
}

.slide-verify-block {
  position: absolute;
  left: 0;
  top: 0;
}

.slide-verify-refresh-icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 34px;
  height: 34px;
  cursor: pointer;
  background: url("../../assets/icon_light.png") 0 -437px;
  background-size: 34px 471px;
}

.slide-verify-slider {
  position: relative;
  text-align: center;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-top: 15px;
  background: #f7f9fa;
  color: #45494c;
  border: 1px solid #e4e7eb;
}

.slide-verify-slider-mask {
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  border: 0 solid #1991fa;
  background: #d1e9fe;
}

.slide-verify-slider-mask-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background 0.2s linear;
}

.slide-verify-slider-mask-item:hover {
  background: #1991fa;
}

.slide-verify-slider-mask-item:hover .slide-verify-slider-mask-item-icon {
  background-position: 0 -13px;
}

.slide-verify-slider-mask-item-icon {
  position: absolute;
  top: 15px;
  left: 13px;
  width: 14px;
  height: 12px;
  background: url("../../assets/icon_light.png") 0 -26px;
  background-size: 34px 471px;
}
.container-active .slide-verify-slider-mask-item {
  height: 38px;
  top: -1px;
  border: 1px solid #1991fa;
}

.container-active .slide-verify-slider-mask {
  height: 38px;
  border-width: 1px;
}

.container-success .slide-verify-slider-mask-item {
  height: 38px;
  top: -1px;
  border: 1px solid #52ccba;
  background-color: #52ccba !important;
}

.container-success .slide-verify-slider-mask {
  height: 38px;
  border: 1px solid #52ccba;
  background-color: #d2f4ef;
}

.container-success .slide-verify-slider-mask-item-icon {
  background-position: 0 0 !important;
}

.container-fail .slide-verify-slider-mask-item {
  height: 38px;
  top: -1px;
  border: 1px solid #f57a7a;
  background-color: #f57a7a !important;
}

.container-fail .slide-verify-slider-mask {
  height: 38px;
  border: 1px solid #f57a7a;
  background-color: #fce1e1;
}

.container-fail .slide-verify-slider-mask-item-icon {
  top: 14px;
  background-position: 0 -82px !important;
}

/* .container-active .slide-verify-slider-text,
.container-success .slide-verify-slider-text,
.container-fail .slide-verify-slider-text {
  display: none;
} */
.slide-verify-slider-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 999;
}
</style>

怂叔
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue实现滑动拼图验证码功能
10-16
主要介绍了Vue实现滑动拼图验证码功能,需要的朋友可以参考下
vue3 + ts 图片验证码功能实现
qq_39719750的博客
02-27 608
vue3 + ts 图片验证码功能实现
前端Vue3 使用vue3-slide-verify 实现 滑块\滑动\拼图认证模块 (离线)
最新发布
qq_26123545的博客
03-29 437
前端Vue3 使用vue3-slide-verify 实现 滑块验证\滑动拼图验证 验证实现登陆。 项目基于vue3-slide-verify 开发 ，改为离线模式，增加了回调函数，优化了界面。
vue+ts 滑动验证 添加登录逻辑
加油小伙子
04-29 1435
如果你要用ts 写滑块验证这个效果，那么这个插件无疑是一个很好的选择，前端验证
vue3拼图验证纯前端实现
JINGZzhuo的博客
02-01 539
【代码】vue3拼图验证纯前端实现。
Vue3.0 PC端滑块拼图验证，配合后端验证
qq_41620887的博客
02-14 1475
主要是配合element plus 实现UI大致框架，背景图片和拼图都是通过后端接口获取，通过CryptoJS对滑块滑动距离以及当前拼图唯一标识和秘钥进行加密处理，配合后端进行验证。
vue-monoplasty-slide-verify:Vue幻灯片验证在线预览
05-02
vue-monoplasty-slide-verify 一个Vue插件以滑动验证 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 快速开始 1.将vue-monoplasty-slide-verify导入您的vue.js项目。 使用构建工具： npm install --save vue-monoplasty-slide-verify import Vue from 'vue' ; import SlideVerify from 'vue-monoplasty-slide-verify' ; Vue . use ( SlideVerif
vue3中使用 vue3-slide-verify 滑块验证登录
m0_55969466的博客
08-02 9729
vue3中使用 vue3-slide-verify 滑块验证登录
vue3 滑动验证组件
BDawn的专栏
11-01 5651
vue3拖动滑块进行验证 组件效果展示 源码 <template> <div class="slider-verification" ref="sliderContainer"> <div class="slider-left-bg" :style="sliderLeftWidthStyle"></div> <div class="prompt-text" :style="verifySuccess ? promptTextStyleSuc
vue3滑块验证使用vue3-slide-verify，宽度自适应
weixin_46687032的博客
02-11 3308
vue3使用vue3-slide-verify实现图片滑块验证是否机器人操作，实现验证模块宽度自适应
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+ts实现drag/draggable拖拽任务看板taskboard
07-05
ganttchart(甘特图) taskboard(任务看板) jsoneditor(JSON编辑器)
vue3+ts入门（todolist案例）
02-10
vue3+ts入门（todolist案例）
vue3+ts+echarts实现echarts封装
08-01
vue3+ts+echarts实现echarts封装
vue+springboot实现的拼图验证码
01-21
演示地址：https://loyer.wang/
Vue3 中使用滑块拼图验证码 vue3-puzzle-vcode
weixin_44258422的博客
07-03 759
【代码】Vue3 中使用滑块拼图验证码 vue3-puzzle-vcode。
vue3实现滑块验证码
qq_39024012的博客
09-12 2789
vue3实现滑块验证
Vue3 + VIte + Ts 实现自定义监控图片加载失败/报错处理指令
A88552211的博客
04-28 854
新建一个放自定义指令的文件夹 代码： export const directive_onerror = function (app:any) { // 图片指令检测图片加载 app.directive('onerror', { mounted: (el:any, binding:any) => { let img = new URL('../assets/img/0.png', import.meta.url).href el.on
vue3+ts实现单删
08-28
- *1* *2* *3* [利用vue3+ts实现管理后台（增删改查）](https://blog.csdn.net/u013060778/article/details/120977211)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值