当前位置: 首页 > news >正文

全栈的自我修养 ———— react实现滑动验证

实现滑动验证

  • 展示
  • 依赖
  • 实现
    • 不借助create-puzzle
    • 借助create-puzzle

展示

在这里插入图片描述
在这里插入图片描述

依赖

npm install rc-slider-captcha
npm install create-puzzle

api地址

实现

不借助create-puzzle

需要准备两张图片一个是核验图形,一个是原图------> 这个方法小编试了后感觉比较麻烦,这边就不继续写了
在这里插入图片描述

借助create-puzzle

这个工具会接受一个照片,然后自动分割出适当的验证尺寸
在其中bgSize必须要注意!!属性必须和图片一样!!!!!!!!
在这里插入图片描述

import SliderCaptcha from 'rc-slider-captcha';
import React, { useRef } from 'react';
import { sleep } from 'ut2';
import createPuzzle from 'create-puzzle';
import { RubyOutlined, MehOutlined, SmileOutlined, RedoOutlined, LoadingOutlined } from '@ant-design/icons'
// 这里是你要自己准备的图片
import pic from '../static/soildCaptcha.jpeg'
const SoildCaptcha = (params) => {const offsetXRef = useRef(0); // x 轴偏移值// 查看是否在安全距离const verifyCaptcha = async (data) => {await sleep();if (data.x >= offsetXRef.current - 5 && data.x < offsetXRef.current + 5) {setTimeout(() => {params.onSuccess()}, 1000)return Promise.resolve();}return Promise.reject();};return (<div className='container'><SliderCaptcharequest={() =>createPuzzle(pic, {format: 'blob'}).then((res) => {offsetXRef.current = res.xreturn {// 背景图片bgUrl: res.bgUrl,// 核验区域puzzleUrl: res.puzzleUrl};})}onVerify={(data) => {return verifyCaptcha(data);}}// !!!!这里是重点!!!!!// bgSize必须和原图片的尺寸一样!!!!!!!!!!!!!!!!!!bgSize={{ width: 462, height: 266 }}tipIcon={{default: <RubyOutlined />,loading: <LoadingOutlined />,success: <SmileOutlined />,error: <MehOutlined />,refresh: <RedoOutlined />}}tipText={{default: '向右👉拖动完成拼图',loading: '👩🏻‍💻🧑‍💻努力中...',moving: '向右拖动至拼图位置',verifying: '验证中...',error: '验证失败'}}// loadingBoxProps={{//   icon: <Heart />,//   text: "I'm loading"// }}/></div>);
}export default SoildCaptcha;

相关文章:

全栈的自我修养 ———— react实现滑动验证

实现滑动验证 展示依赖实现不借助create-puzzle借助create-puzzle 展示 依赖 npm install rc-slider-captcha npm install create-puzzleapi地址 实现 不借助create-puzzle 需要准备两张图片一个是核验图形&#xff0c;一个是原图------> 这个方法小编试了后感觉比较麻烦…...

<<、>>和>>>

1.左移操作符(<<&#xff09;: 左移操作符将数字的二进制表示向左移动指定的位数。右侧空出的位用0填充。左移操作相当于乘以2的幂。 例如&#xff1a; int num 4; // 二进制表示为 0100 int shifted num << 1; // 结果为 8&#xff0c;二进制表示为 10002.带…...

【C++进阶】RAII思想&智能指针

智能指针 一&#xff0c;为什么要用智能指针&#xff08;内存泄漏问题&#xff09;内存泄漏 二&#xff0c;智能指针的原理2.1 RAII思想2.2 C智能指针发展历史 三&#xff0c;更靠谱的shared_ptr3.1 引用计数3.2 循环引用3.3 定制删除器 四&#xff0c;总结 上一节我们在讲抛异…...

探索量子计算:打开未来技术的大门

在科技领域&#xff0c;每一次技术革命都能开启新的可能性&#xff0c;推动人类社会进入一个新的时代。当前&#xff0c;量子计算作为一种前沿技术&#xff0c;正引领着下一轮科技革命的浪潮。本文将深入探索量子计算的奥秘&#xff0c;解析其工作原理&#xff0c;并通过一个简…...

C++11 设计模式2. 简单工厂模式

简单工厂&#xff08;Simple Factory&#xff09;模式 我们从实际例子出发&#xff0c;来看在什么情况下&#xff0c;应用简单工厂模式。 还是以一个游戏举例 //策划&#xff1a;亡灵类怪物&#xff0c;元素类怪物&#xff0c;机械类怪物&#xff1a;都有生命值&#xff0…...

RabbitMQ-死信队列常见用法

目录 一、什么是死信 二、什么是死信队列 ​编辑 三、第一种情景&#xff1a;消息被拒绝时 四、第二种场景&#xff1a;. 消费者发生异常&#xff0c;超过重试次数 。 其实spring框架调用的就是 basicNack 五、第三种场景&#xff1a; 消息的Expiration 过期时长或队列TTL…...

2024/4/14周报

文章目录 摘要Abstract文献阅读题目创新点CROSSFORMER架构跨尺度嵌入层&#xff08;CEL&#xff09;CROSSFORMER BLOCK长短距离注意&#xff08;LSDA&#xff09;动态位置偏置&#xff08;DPB&#xff09; 实验 深度学习CrossFormer背景维度分段嵌入&#xff08;DSW&#xff09…...

MySQL 社区版 安装总结

很早就安装过MySQL&#xff0c;没有遇到过什么问题&#xff0c;直接next就行了&#xff0c;这次在新电脑上安装却遇到了一些问题&#xff0c;记录一下。 安装的是MySQL社区版&#xff0c;下载地址是www.mysql.com&#xff0c;进入后选择DOWNLOAD页面&#xff0c;选择MySQL Com…...

二叉排序树的增删改查(java版)

文章目录 1. 基本节点2. 二叉排序树2.1 增加节点2.2 查找&#xff08;就是遍历&#xff09;就一起写了吧2.3 广度优先遍历2.4 删除&#xff08;这个有点意思&#xff09;2.5 测试样例 最后的删除&#xff0c;目前我测试的是正确的 1. 基本节点 TreeNode: class TreeNode{pri…...

linux下coredump问题的定位分析方法

(Owed by: 春夜喜雨 http://blog.csdn.net/chunyexiyu) 参考&#xff1a;https://blog.csdn.net/m0_73698480/article/details/130077852 最近定位了一段时间linux下的崩溃问题&#xff0c;又收集了一些思路&#xff0c;特整理记录一下。 常见coredump定位方法是&#xff1a…...

第十届蓝桥杯省赛真题(C/C++大学B组)

目录 试题 A: 组队 试题 B: 年号字串 试题 C: 数列求值 试题 D: 数的分解 试题 E: 迷宫 试题 F: 特别数的和 试题 G&#xff1a;完全二叉树的权值 试题 H&#xff1a;等差数列 试题 I&#xff1a;后缀表达式&#xff08;不一定对&#xff09; 试题 J&#xff1a;灵能…...

Scrapy 爬取m3u8视频

Scrapy 爬取m3u8视频 【一】效果展示 爬取ts文件样式 合成的MP4文件 【二】分析m3u8文件路径 视频地址&#xff1a;[在线播放我独自升级 第03集 - 高清资源](https://www.physkan.com/ph/175552-8-3.html) 【1】找到m3u8文件 这里任务目标很明确 就是找m3u8文件 打开浏览器…...

LVGL简单记录

1、 vs中代码旁边有个小锁删除git 2、Visual Studio 试图编译已删除的文件&#xff0c; 如果这个文件也是你不再需要编译的文件&#xff0c;且已经从文件系统中删除&#xff0c;你需要从 .vcxproj 文件中移除或者注释掉这一行&#xff0c;以停止Visual Studio尝试去编译一个不…...

计算机网络——ARP协议

前言 本博客是博主用于复习计算机网络的博客&#xff0c;如果疏忽出现错误&#xff0c;还望各位指正。 这篇博客是在B站掌芝士zzs这个UP主的视频的总结&#xff0c;讲的非常好。 可以先去看一篇视频&#xff0c;再来参考这篇笔记&#xff08;或者说直接偷走&#xff09;。 …...

【C++]C/C++的内存管理

这篇博客将会带着大家解决以下几个问题 1. C/C内存分布 2. C语言中动态内存管理方式 3. C中动态内存管理 4. operator new与operator delete函数 5. new和delete的实现原理 6. 定位new表达式(placement-new) 1. C/C内存分布 我们先来看下面的一段代码和相关问题 int global…...

深入理解计算机网络分层结构

一、 为什么要分层&#xff1f; 计算机网络分层的主要目的是将复杂的网络通信过程分解为多个相互独立的层次&#xff0c;每个层次负责特定的功能。这样做有以下几个好处&#xff1a; 模块化设计&#xff1a;每个层次都有清晰定义的功能和接口&#xff0c;使得网络系统更易于设…...

亚马逊云科技CTO带你学习云计算降本增效秘诀

2023亚马逊云科技一年一度的重磅春晚--Re:invent上有诸多不同话题的主题Keynote&#xff0c;这次小李哥带大家复盘来自亚马逊CTO: Wener博士的主题演讲: 云架构节俭之道1️⃣节俭对于云计算为什么重要&#xff1f; ▶️企业基础设施投入大&#xff0c;利用好降本策略可以减少巨…...

快速上手Vue

目录 概念 创建实例 插值表达式 Vue响应式特性 概念 Vue是一个用于 构建用户界面 的 渐进式 框架 构建用户界面&#xff1a;基于数据渲染出用户看到的页面 渐进式&#xff1a;Vue相关生态&#xff1a;声明式渲染<组件系统<客户端路由<大规模状态管理<构建工具 V…...

java 目录整理

Java知识相关目录主要参考黑马程序员 风清扬老师的视屏,参考链接为 Java_黑马刘意(风清扬)2019最新版_Java入门视频_Java入门_Java编程_Java入门教程_黑马教程_黑马程序员_idea版_哔哩哔哩_bilibili 1、java 基础 java基本认识?java跨平台原理?jdk、jre、jvm的联系? 链接:…...

使用Python的Pillow库进行图像处理书法参赛作品

介绍&#xff1a; 在计算机视觉和图像处理领域&#xff0c;Python是一种强大而流行的编程语言。它提供了许多优秀的库和工具&#xff0c;使得图像处理任务变得轻松和高效。本文将介绍如何使用Python的wxPython和Pillow库来选择JPEG图像文件&#xff0c;并对选中的图像进行调整和…...

智能网联汽车(CAV)缩略语大全:从C-V2X到VRUCW,一文搞懂所有专业术语

智能网联汽车(CAV)术语全解析&#xff1a;从技术原理到场景应用 在智能交通系统快速发展的今天&#xff0c;智能网联汽车(Connected-Automated Vehicle, CAV)已经成为行业变革的核心驱动力。无论是汽车工程师、软件开发人员还是交通规划者&#xff0c;都需要掌握这一领域的关键…...

零基础部署Fun-ASR语音识别:支持GPU/CPU/MPS,开箱即用无需配置

零基础部署Fun-ASR语音识别&#xff1a;支持GPU/CPU/MPS&#xff0c;开箱即用无需配置 1. 为什么选择Fun-ASR&#xff1f; 语音识别技术已经成为现代办公和内容创作的重要工具&#xff0c;但传统解决方案往往面临三大痛点&#xff1a;部署复杂、准确率不足、依赖云端服务。Fu…...

Java开发必备:高德、百度、WGS84坐标互转实战(附完整代码)

Java开发实战&#xff1a;高德、百度与WGS84坐标系互转解决方案 当你需要在不同地图服务之间切换时&#xff0c;坐标系的差异往往会成为开发中的痛点。想象一下这样的场景&#xff1a;你的应用同时接入了高德地图和百度地图&#xff0c;用户上传的GPS数据却无法在两个平台上准确…...

Luau数据流分析技术:如何实现精准的类型推断

Luau数据流分析技术&#xff1a;如何实现精准的类型推断 【免费下载链接】luau A fast, small, safe, gradually typed embeddable scripting language derived from Lua 项目地址: https://gitcode.com/gh_mirrors/lu/luau Luau是一种快速、小巧、安全且支持渐进类型化…...

告别重复劳动:用快马AI自动生成akshare数据清洗与分析流水线

告别重复劳动&#xff1a;用快马AI自动生成akshare数据清洗与分析流水线 金融数据分析中&#xff0c;数据获取和清洗往往是最耗时的环节。每次研究新标的&#xff0c;我们都要重复编写类似的代码&#xff1a;从不同接口获取数据、对齐时间轴、处理缺失值、计算技术指标……这些…...

不用命令行!Win11任务栏图标消失的图形化解决方案(Explorer重启神器推荐)

Win11任务栏图标消失&#xff1f;5种可视化修复方案与深度解析 每次切换虚拟桌面后&#xff0c;Win11任务栏图标集体"失踪"的毛病&#xff0c;堪称微软系统最顽固的"幽灵故障"之一。作为从Windows 95时代就存在的资源管理器痼疾&#xff0c;这个问题在Win1…...

DBA_RECYCLEBIN purge指定日期前的表

SummaryHow to purge DBA_RECYCLBIN for objects older than x days/minutes? or do we have RECYCLEBIN RETENTION feature or truncate recyclebin ?--------------------------------------------------------------------------------------DBA_RECYCLEBIN has a column …...

Python异步I/O终极调优手册(含strace+py-spy+asyncio debug mode三重追踪链路图)

第一章&#xff1a;Python异步I/O性能瓶颈的本质洞察Python的async/await语法虽大幅简化了异步编程模型&#xff0c;但其底层性能瓶颈并非源于语法糖本身&#xff0c;而根植于事件循环调度机制、GIL对CPU密集型任务的制约&#xff0c;以及I/O等待与协程切换之间的隐式开销。事件…...

QuickRecorder高效解决方案:从基础到进阶的macOS录屏全指南

QuickRecorder高效解决方案&#xff1a;从基础到进阶的macOS录屏全指南 【免费下载链接】QuickRecorder A lightweight screen recorder based on ScreenCapture Kit for macOS / 基于 ScreenCapture Kit 的轻量化多功能 macOS 录屏工具 项目地址: https://gitcode.com/GitHu…...

【人物传记】唯一一位两次获得诺贝尔物理学奖-约翰·巴

1 约翰巴丁简介 约翰巴丁&#xff08;英语&#xff1a;John Bardeen&#xff0c;1908年5月23日—1991年1月30日[6]&#xff09;是一名美国物理学家和工程师。他是唯一一个两度获得诺贝尔物理学奖的人&#xff1a;第一次是在1956年与威廉肖克利和沃尔特布拉顿一起发明晶体管&am…...