React/Umi中实现移动端滑动图片验证功能
注意！！！！！
此功能为移动端效果
pc端请修改触发事件
移动端支持的点击事件：
ontouchstart(); ontouchmove(); ontouchend();
PC端支持的点击事件：
onmousedown(); onmousemove(); onmouseup();
用法不同里面的传值方式也不同 有兴趣的可以自己学习一下 别懒
代码
index.jsx
/** * @name BlockImgMove * @description 滑动拼图验证 */ import React, { Component } from 'react'; import { Icon, Spin } from 'antd'; import { main } from '@/utils/base64'; //js代码 import styles from './index.less'; //样式 import { history } from 'umi'; const imgSrc = require('@/assets/233.png'); //图片路径 const canWidth = 300; //容器宽 const canHeight = 160; //容器高 const canLitWidth = 42; //图片滑块宽 const canLitR = 10; //滑块附带小圆半径 const canLitL = canLitWidth + canLitR * 2 + 3; //小拼图实际边长 const PI = Math.PI; //圆周率 class BlockImgMove extends Component { state = { blockX: 0, //小拼图X轴坐标 textMess: '向右移动拼接图片,完成验证', type: false, //验证状态，false为验证失败，true验证成功 loading: false, //加载状态 canvasRand: '', blockRand: '', imgPath: '', }; y = 0; //小拼图达到的Y轴坐标 x = 0; //小拼图达到的X轴坐标 img = null; componentDidMount() { this.onMouseDown(); this.init(); } init = () => { this.y = 0; this.x = 0; // this.img = null; this.setState( { type: false, blockX: 0, textMess: '向右移动拼接图片,完成验证', canvasRand: `canvas${this.getRandomNumberByRange(0, 100)}`, //"canvasRand", //this.getRandomNumberByRange(0, 100) blockRand: `block${this.getRandomNumberByRange(101, 200)}`, // "blockRand" //this.getRandomNumberByRange(101, 200) }, () => { this.getImg(); }, ); }; /** * @name onMouseDown * @description 监听鼠标点击 */ onMouseDown = () => { let outBox = document.getElementById('out_mouse_img'); let mouseBox = document.getElementById('mouse_img'); let that = this; mouseBox.ontouchstart = function (ev) { let ev00 = ev || window.event; let px = ev00.targetTouches[0].pageX; //初始位置，对于整个页面来说，光标点击位置 let oL = this.offsetLeft; //初始位置，对于有定位的父级，元素边框侧与父级边框侧的距离 初始为0 // console.log(this.offsetLeft, '0'); // console.log(px, '1'); // console.log(window.event, '2'); mouseBox.ontouchmove = function (evs) { if (that.state.type) { return; } let ev01 = evs || window.event; let px1 = ev01.targetTouches[0].pageX; //滑动后，当前鼠标所在位置 let oL1 = px1 - px + oL; //距初始位置移动的距离 // console.log(oL, '0', oL1, '1'); // console.log(px, '1', px1, '2'); // console.log(outBox.clientWidth,mouseBox.clientWidth); if (oL1 <= 0) { oL1 = 0; } else if (oL1 > outBox.clientWidth - mouseBox.clientWidth) { oL1 = outBox.clientWidth - mouseBox.clientWidth; } console.log('oL1===', oL1); that.setState({ blockX: oL1 }); }; mouseBox.ontouchend = function () { that.cancelMove(); }; }; }; /** * @name textChange * @description 验证成功，信息变化 */ textChange = () => { // this.setState({ textMess: "验证成功", type: true }); history.push('/'); // alert('成功') }; /** * @name cancelMove * @description 鼠标离开滑块，滑块停止滑动并复位 */ cancelMove = () => { let mouseBox = document.getElementById('mouse_img'); let mouseLeft = mouseBox.offsetLeft; mouseBox.onmousemove = null; if (mouseLeft !== 0) if ( mouseLeft === this.x || (mouseLeft <= this.x + 3 && mouseLeft >= this.x - 3) ) { //验证成功的不可逆操作 this.onmousemove = null; mouseBox.onmousemove = null; this.textChange(); } else { this.init(); } }; /** * @name getRandomNumberByRange * @description 获取随机数 */ getRandomNumberByRange = (start, end) => { return Math.round(Math.random() * (end - start) + start); }; /** * @name getImg * @description 获取在线图片,图片资源与项目地址源不同导致跨域,需处理跨域 * @description 通过追加到 URL 的末尾获取灰度图像。?grayscale => https://picsum.photos/200/300?grayscale */ getImg = async () => { const url = `/api-online-img/${canWidth}/${canHeight}/?image=${this.getRandomNumberByRange( 1, 100, )}`; try { this.setState({ loading: true }); //不同源图片，这里是先把线上图片转为base64，再进行渲染，时间上稍微多了1-2秒 main(url, (base64) => { //线上图片出错转用本地图片 this.setState({ imgPath: base64 ? base64 : imgSrc }, () => { this.setState({ loading: false }); this.drawInit(); }); }); } catch (error) { console.log('err==', error); } }; /** * @name draw * @description 画图公用方法 */ draw = (ctx, x = 0, y = 0, w = 0, operation) => { let r = canLitR; ctx.beginPath(); ctx.moveTo(x, y); ctx.arc(x + w / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI); ctx.lineTo(x + w, y); ctx.arc(x + w + r - 2, y + w / 2, r, 1.21 * PI, 2.78 * PI); ctx.lineTo(x + w, y + w); ctx.lineTo(x, y + w); ctx.arc(x + r - 2, y + w / 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(); ctx.globalCompositeOperation = 'destination-over'; operation === 'fill' ? ctx.fill() : ctx.clip(); }; /** * @name drawInit * @description 画图前处理 */ drawInit = async () => { const { canvasRand, blockRand, imgPath } = this.state; const mycanvas = document.getElementById(canvasRand); const myblock = document.getElementById(blockRand); myblock.width = canWidth; //等宽获取整个图片 const canvas_ctx = mycanvas.getContext('2d'); const block_ctx = myblock.getContext('2d'); //清空画布 canvas_ctx.clearRect(0, 0, canWidth, canHeight); block_ctx.clearRect(0, 0, canWidth, canHeight); this.img = document.createElement('img'); //创建小图片滑块 // 随机位置创建拼图形状 this.x = this.getRandomNumberByRange( canLitL + 10, canWidth - (canLitL + 10), ); this.y = this.getRandomNumberByRange( 10 + canLitR * 2, canHeight - (canLitL + 10), ); // console.log("this.x,this.y===",this.x) //渲染图片 this.img.onload = async () => { canvas_ctx.drawImage(this.img, 0, 0, canWidth, canHeight); block_ctx.drawImage(this.img, 0, 0, canWidth, canHeight); let _y = this.y - canLitR * 2 - 1; //小拼图实际的坐标 let ImgData = block_ctx.getImageData( this.x - 4, _y - 1, canLitL, canLitL, ); myblock.width = canLitL; //小拼图的宽，隐藏抠图位置图片 block_ctx.putImageData(ImgData, 0, _y); }; this.img.src = imgPath; //图片路径 this.draw(canvas_ctx, this.x, this.y - 2, canLitWidth, 'fill'); this.draw(block_ctx, this.x, this.y, canLitWidth, 'clip'); }; render() { const { textMess, type, blockX, loading, canvasRand, blockRand } = this.state; return ( <div> <h2 text="滑动拼图验证" /> <div className={styles.block}> <div> <div className={styles.outDiv}> <Spin spinning={loading}> <div className={styles.outDivNext}> <Icon type="redo" className={styles.redos} onClick={this.init} /> <canvas id={canvasRand} className={styles.outDivNoborder} ></canvas> <canvas id={blockRand} className={styles.outDivLitBlock} style={{ left: blockX }} ></canvas> </div> {/**滑块 */} <div id="out_mouse_img" className={styles.outBkock}> <div id="mouse_img" className={styles.moveBkock} style={{ cursor: type ? 'default' : null, marginLeft: blockX, }} onMouseLeave={this.cancelMove} > {type ? ( <Icon type="check-circle" className={styles.icon_check} /> ) : ( <Icon type="arrow-right" className={styles.icon_check} /> )} </div> {/**蓝色背景 */} <div id="colorbg_img" className={styles.posBkockColor} style={{ width: blockX }} > {type && <div style={{ color: '#fff' }}>{textMess}</div>} </div> {/**默认背景 */} <div className={styles.posBkockDefault}> {!type && <div>{blockX === 0 && textMess}</div>} </div> </div> </Spin> </div> </div> </div> </div> ); } } export default BlockImgMove;
index.less
.block { &:extend(.block); } .flex { &:extend(.flex); } .outDivNoborder { position: absolute; top: 0; left: 0; width: 310px; height: 155px; // background-size: 100% 100%; // background-repeat: no-repeat; } .outDiv { position: relative; width: 310px; height: 195px; border: 1px solid #ccc; overflow: hidden; // background-size: 100% 100%; // background-repeat: no-repeat; } .outDivNext { width: 310px; height: 155px; } .outDivLitBlock { position: absolute; top: 0; left: 0; } /**滑块*/ .outBkock { position: relative; width: 310px; height: 40px; // border: 1px solid #ccc; } .moveBkock { position: relative; display: flex; align-items: center; justify-content: center; cursor: move; width: 38px; height: 38px; background: #fff; z-index: 3; } .posBkockDefault, .posBkockColor { display: flex; align-items: center; justify-content: center; background: #e2e2e2; position: absolute; width: 100%; height: 100%; top: 0; z-index: 1; -webkit-user-select: none; user-select: none; } .posBkockColor { width: 0; background: white; z-index: 2; } .icon_check { font-size: 18px; z-index: 1 !important; } .redos { position: absolute; right: 5px; top: 5px; z-index: 100; font-size: 20px; color: #fff !important; }
base64.js
/** * @desc 线上图片转base64 */ function getBase64Image(img) { const canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, img.width, img.height); const dataURL = canvas.toDataURL('image/png'); // 可选其他值 image/jpeg return dataURL; } function main(src, cb) { const image = new Image(); image.src = src; // 处理缓存 image.crossOrigin = '*'; // 支持跨域图片 image.onload = () => { const base64 = getBase64Image(image); cb && cb(base64); return base64; }; image.onerror = (error) => { const base64 = ''; console.log('error=base64=00=', error); cb && cb(base64); return base64; }; } export { main };
图片路径自己搞定
