@RestController
public class ImageController {

    private final ImageService imageService;

    public ImageController(ImageService imageService) {
        this.imageService = imageService;
    }

    @GetMapping("/captcha")
    public ResponseEntity<byte[]> getCaptcha(HttpSession session) throws IOException {
        BufferedImage captchaImage = imageService.createCaptchaImage();
        session.setAttribute("captcha", imageService.getCaptchaPosition());

        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        ImageIO.write(captchaImage, "png", baos);
        byte[] imageInByte = baos.toByteArray();

        return ResponseEntity.ok()
                .header(HttpHeaders.CONTENT_TYPE, MediaType.IMAGE_PNG_VALUE)
                .body(imageInByte);
    }

    @PostMapping("/validate")
    public boolean validateCaptcha(@RequestParam int position, HttpSession session) {
        Integer captchaPosition = (Integer) session.getAttribute("captcha");
        if (captchaPosition != null) {
            return Math.abs(captchaPosition - position) <= 5;
        }
        return false;
    }
}

import org.springframework.stereotype.Service;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.InputStream;
import java.nio.file.Paths;
import javax.imageio.ImageIO;
import java.util.Random;

@Service
public class ImageService {

    private int captchaPosition;

    public BufferedImage createCaptchaImage() throws IOException {
        BufferedImage originalImage = readImageFromResources();
        captchaPosition = generateRandomCaptchaPosition(originalImage.getWidth());

        BufferedImage captchaImage = new BufferedImage(
                originalImage.getWidth(),
                originalImage.getHeight(),
                originalImage.getType());

        int pieceWidth = originalImage.getWidth() / 8;

        // 繪制原始圖像
        Graphics2D graphics2D = captchaImage.createGraphics();
        graphics2D.drawImage(originalImage, 0, 0, null);

        // 在原始位置繪制一個(gè)帶形狀的片段
        graphics2D.setComposite(AlphaComposite.Clear);
        graphics2D.fillRoundRect(captchaPosition, captchaImage.getHeight() / 2, pieceWidth, pieceWidth, 10, 10);
        graphics2D.dispose();

        return captchaImage;
    }

    private BufferedImage readImageFromResources() throws IOException {
        InputStream inputStream = getClass().getResourceAsStream(Paths.get("path_to_resources", "originalImage.png").toString());
        return ImageIO.read(inputStream);
    }

    private static int generateRandomCaptchaPosition(int width) {
        Random random = new Random();
        return random.nextInt(width / 2) + width / 4; // 將片段定位到圖像的中央位置
    }

    public int getCaptchaPosition() {
        return captchaPosition;
    }
}

<img id="captcha" src="api/captcha" />
<div id="slider"><div id="knob"></div></div>

<script>
  const slider = document.getElementById('slider');
  const knob = document.getElementById('knob');
  knob.onmousedown = function(event) {
    event.preventDefault();
    let shiftX = event.clientX - knob.getBoundingClientRect().left;
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);

    function onMouseMove(event) {
      let newLeft = event.clientX - shiftX - slider.getBoundingClientRect().left;
      if (newLeft < 0) newLeft = 0;
      let rightEdge = slider.offsetWidth - knob.offsetWidth;
      if (newLeft > rightEdge) newLeft = rightEdge;
      knob.style.left = newLeft + 'px';
    }

    function onMouseUp() {
      document.removeEventListener('mouseup', onMouseUp);
      document.removeEventListener('mousemove', onMouseMove);
      validateCaptcha(parseInt(knob.style.left));
    }
  };
  knob.ondragstart = function() { return false; }

  function validateCaptcha(position) {
    fetch('api/validate?position=' + position, {method: 'POST'})
      .then(response => response.json())
      .then(data => { /* process the validation result */ });
  }
</script>