使用html5画布在reactjs中裁剪图像

<canvas id="canvas" width={canvasWidth} height={canvasHeight}></canvas>

useEffect(() => {
  const loadImage = () => {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const image = new Image();

    image.onload = () => {
      ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
    };

    image.src = 'path/to/image.jpg'; // 替换为你要剪裁的图像的路径
  };

  loadImage();
}, []);

useEffect(() => {
  // ...

  const handleMouseDown = (event) => {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const rect = canvas.getBoundingClientRect();
    const startX = event.clientX - rect.left;
    const startY = event.clientY - rect.top;

    // 设置剪裁区域的初始坐标
    ctx.beginPath();
    ctx.moveTo(startX, startY);

    // 添加鼠标移动事件
    canvas.addEventListener('mousemove', handleMouseMove);

    // 添加鼠标松开事件
    canvas.addEventListener('mouseup', handleMouseUp);
  };

  const handleMouseMove = (event) => {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const rect = canvas.getBoundingClientRect();
    const currentX = event.clientX - rect.left;
    const currentY = event.clientY - rect.top;

    // 更新剪裁区域的路径
    ctx.lineTo(currentX, currentY);
    ctx.stroke();
  };

  const handleMouseUp = () => {
    const canvas = document.getElementById('canvas');

    // 移除鼠标移动和松开事件监听
    canvas.removeEventListener('mousemove', handleMouseMove);
    canvas.removeEventListener('mouseup', handleMouseUp);

    // 进行图像剪裁
    cropImage();
  };

  const cropImage = () => {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // 关闭剪裁区域的路径
    ctx.closePath();

    // 剪裁图像
    const imageData = ctx.getImageData(startX, startY, currentX - startX, currentY - startY);
    // 使用剪裁后的图像数据进行后续处理或保存等操作
  };

  // 添加鼠标按下事件
  canvas.addEventListener('mousedown', handleMouseDown);

  return () => {
    // 组件卸载时移除鼠标按下事件监听
    canvas.removeEventListener('mousedown', handleMouseDown);
  };
}, []);