React 生成随机图形验证码

在 React 中随机生成图形验证码需要几个步骤：

1. 创建一个 Canvas 元素。
2. 使用 Canvas API 绘制验证码图像。
3. 将验证码图像编码为 Base64 字符串。
4. 将 Base64 字符串存储在状态中。
5. 将 Base64 字符串显示在页面上。
6. 创建一个输入框来存放图形验证码的完整代码。
7. 在提交表单时，验证输入的验证码是否与生成的验证码匹配。

下面是实现上述步骤的详细代码：

import React, { useState } from 'react';

const App = () => {
  const [captcha, setCaptcha] = useState('');

  const generateCaptcha = () => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 100;
    canvas.height = 50;

    // 绘制验证码图像
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, 100, 50);
    ctx.font = 'bold 20px Arial';
    ctx.fillStyle = 'black';
    const text = Math.random().toString(36).substring(2, 8);
    ctx.fillText(text, 10, 30);

    // 将验证码图像编码为 Base64 字符串
    const dataURL = canvas.toDataURL('image/png');

    // 将 Base64 字符串存储在状态中
    setCaptcha(dataURL);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    // 获取输入的验证码
    const inputCaptcha = event.target.querySelector('input[name="captcha"]').value;

    // 验证输入的验证码是否与生成的验证码匹配
    if (inputCaptcha === captcha) {
      alert('验证码正确');
    } else {
      alert('验证码错误');
    }
  };

  return (
    <div>
      <h1>图形验证码</h1>
      <button onClick={generateCaptcha}>生成验证码</button>
      <img src={captcha} alt="验证码" />
      <form onSubmit={handleSubmit}>
        <input type="text" name="captcha" placeholder="输入验证码" />
        <input type="submit" value="提交" />
      </form>
    </div>
  );
};

export default App;

希望本文对您在 React 中生成随机图形验证码有所帮助。