前端实现图片验证码（纯代码-可直接拉取使用）

import React, { useState, useEffect } from 'react';
import { Button } from 'antd';

export default function Data() {
    const [showYzm, setShowYzm] = useState(false);

	const handleClickButton = () => {
		setShowYzm(true);
	};
	const YZM = () => {
		// 生成随机数
		const rn = (min, max) => {
			return parseInt(Math.random() * (max - min) + min);
		};

		// 生成随机颜色
		const rc = (min, max) => {
			var r = rn(min, max);
			var g = rn(min, max);
			var b = rn(min, max);
			return `rgb(${r}, ${g}, ${b})`;
		};

		var w = 100;
		var h = 36;
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');

		// 在canvas上绘制背景颜色
		ctx.fillStyle = rc(180, 230);
		ctx.fillRect(0, 0, w, h);

		// 生成随机字符串
		var pool = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
		var result = '';

		for (var i = 0; i < 4; i++) {
			// 取出随机的字母或者数字
			var c = pool[rn(0, pool.length)];
			// 随机字体大小
			var fs = rn(18, 40);
			// 随机字母的旋转角度
			var deg = rn(-30, 30);
			ctx.font = fs + 'px SimHei';
			ctx.textBaseline = 'top';
			// 设置字体的填充颜色
			ctx.fillStyle = rc(80, 150);
			ctx.save();
			ctx.translate(30 * i + 15, 15);
			ctx.rotate((deg * Math.PI) / 180);
			ctx.fillText(c, -10, -10);
			ctx.restore();
			result += c;
			// console.log('canvas' + c);
		}

		// 随机生成干扰线
		for (var j = 0; j < 5; j++) {
			ctx.beginPath();
			ctx.moveTo(rn(0, w), rn(0, h));
			ctx.lineTo(rn(0, w), rn(0, h));
			ctx.strokeStyle = rc(180, 230);
			ctx.closePath();
			ctx.stroke();
		}

		// 随机产生40个小的干扰原点
		for (var k = 0; k < 40; k++) {
			ctx.beginPath();
			ctx.arc(rn(0, w), rn(0, h), 1, 0, 2 * Math.PI);
			ctx.closePath();
			ctx.fillStyle = rc(150, 200);
			ctx.fill();
		}
		console.log(result);
		return result;
	};

	useEffect(() => {
		if (showYzm) {
			YZM();
		}
	});

	return (
		

			{showYzm ? (
				
			) : (
				
					获取验证码
				
			)}
		
	);
}