React项目中如何获取cropper.js的实际选区内容？

1. 用Ref获取Cropper实例 #

在React组件里，先通过useRef创建引用，绑定到<cropper-canvas>上，才能调用Cropper的核心API：

import { useRef } from 'react';

// 组件内部声明ref
const cropperRef = useRef(null);

修改你的cropper-canvas标签，绑定ref：

<cropper-canvas ref={cropperRef} background>
    {/* 原有内部元素保持不变 */}
</cropper-canvas>

2. 实现保存函数获取裁剪内容 #

在saveImg1函数里，通过ref拿到Cropper实例，调用getCroppedCanvas()方法获取裁剪后的画布，再根据需求转成可保存/上传的格式：

const saveImg1 = () => {
  const cropper = cropperRef.current?.cropper;
  if (!cropper) return;

  // 获取裁剪后的canvas对象，可自定义输出尺寸
  const croppedCanvas = cropper.getCroppedCanvas({
    width: 400,
    height: 400,
  });

  // 方式1：转成DataURL实现本地下载
  const dataUrl = croppedCanvas.toDataURL('image/png');
  const downloadLink = document.createElement('a');
  downloadLink.href = dataUrl;
  downloadLink.download = 'cropped-img.png';
  downloadLink.click();

  // 方式2：转成Blob用于上传服务器
  croppedCanvas.toBlob((blob) => {
    const formData = new FormData();
    formData.append('croppedImage', blob, 'cropped-img.png');
    // 这里替换成你的上传接口
    // fetch('/api/upload', { method: 'POST', body: formData });
  }, 'image/png');
};

3. 优化图片渲染逻辑（可选） #

替代直接操作canvas.src，用Cropper官方的replace方法设置图片，更符合组件规范：

const handleImg1 = (e) => {
  const file = e.target.files[0];
  if (!file) return;
  const cropper = cropperRef.current?.cropper;
  if (cropper) {
    const reader = new FileReader();
    reader.onload = () => cropper.replace(reader.result);
    reader.readAsDataURL(file);
  }
};

内容的提问来源于stack exchange，提问作者Pizzaboy