如何在antd-img-crop中添加跳过裁剪选项或自定义页脚？

方案一：自定义裁剪模态框（完全可控） #

直接抛弃ImgCrop的默认模态框，通过Upload的beforeUpload拦截文件，自行实现带跳过按钮的裁剪弹窗，灵活性最高。

步骤与代码： #

1. 引入依赖组件

import { Upload, Modal, Button } from 'antd';
import Cropper from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';

2. 组件内维护状态

state = {
  cropModalVisible: false,
  previewImgUrl: '',
  cropParams: { aspect: 1 / 1 },
  currentUploadFile: null,
};

3. 拦截Upload的文件上传流程

beforeUpload = (file) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    this.setState({
      cropModalVisible: true,
      previewImgUrl: e.target.result,
      currentUploadFile: file,
    });
  };
  reader.readAsDataURL(file);
  return false; // 阻止自动上传，手动处理后续逻辑
};

4. 实现跳过裁剪逻辑

handleSkipCrop = () => {
  this.setState({ cropModalVisible: false });
  // 直接上传原图
  this.onArtImageChange(item.id, { file: this.state.currentUploadFile });
};

5. 实现裁剪确认逻辑

handleConfirmCrop = () => {
  const { previewImgUrl, cropParams, currentUploadFile } = this.state;
  const image = new Image();
  image.src = previewImgUrl;

  image.onload = () => {
    const canvas = document.createElement('canvas');
    // 计算图片真实尺寸与预览尺寸的缩放比例
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;

    canvas.width = cropParams.width * scaleX;
    canvas.height = cropParams.height * scaleY;
    const ctx = canvas.getContext('2d');

    // 绘制裁剪区域到canvas
    ctx.drawImage(
      image,
      cropParams.x * scaleX,
      cropParams.y * scaleY,
      cropParams.width * scaleX,
      cropParams.height * scaleY,
      0,
      0,
      canvas.width,
      canvas.height
    );

    // 将canvas转为Blob并上传
    canvas.toBlob((blob) => {
      const croppedFile = new File([blob], currentUploadFile.name, { type: currentUploadFile.type });
      this.setState({ cropModalVisible: false });
      this.onArtImageChange(item.id, { file: croppedFile });
    }, currentUploadFile.type);
  };
};

6. 渲染组件

<Upload
  name="avatar"
  listType="picture-card"
  className="art-uploader"
  showUploadList={false}
  beforeUpload={this.beforeUpload}
  id={`image-${item.id}`}
  style={{ width: '250px', height: '250px' }}
>
</Upload>

<Modal
  title="Crop Artwork"
  visible={this.state.cropModalVisible}
  footer={[
    <Button key="skip" onClick={this.handleSkipCrop}>跳过裁剪</Button>,
    <Button key="confirm" type="primary" onClick={this.handleConfirmCrop}>确认裁剪</Button>,
  ]}
  onCancel={() => this.setState({ cropModalVisible: false })}
>
  <Cropper
    src={this.state.previewImgUrl}
    crop={this.state.cropParams}
    onChange={(crop) => this.setState({ cropParams: crop })}
    aspect={1 / 1}
    shape="rect"
  />
</Modal>

方案二：利用ImgCrop的beforeCrop实现选择逻辑 #

通过beforeCrop的Promise形式，在弹出裁剪框前让用户选择是否跳过，代码量更少。

步骤与代码： #

1. 实现beforeCrop函数

beforeCrop = (file) => {
  return new Promise((resolve) => {
    Modal.confirm({
      title: '选择操作',
      content: '是否需要裁剪图片？',
      okText: '需要裁剪',
      cancelText: '跳过裁剪',
      onOk: () => resolve(false), // 进入默认裁剪流程
      onCancel: () => {
        resolve(true); // 跳过裁剪，不触发ImgCrop的模态框
        // 手动上传原图
        this.onArtImageChange(item.id, { file });
      },
    });
  });
};

2. 给ImgCrop添加beforeCrop属性

<ImgCrop
  aspect={1 / 1}
  ref={this.imageCropper}
  shape="rect"
  modalTitle="Crop Artwork"
  beforeCrop={this.beforeCrop}
>
  <Upload
    name="avatar"
    listType="picture-card"
    className="art-uploader"
    showUploadList={false}
    customRequest={this.onArtImageChange.bind(this, item.id)}
    id={`image-${item.id}`}
    style={{ width: '250px', height: '250px' }}
  ></Upload>
</ImgCrop>

两种方案对比 #

• 方案一：完全自定义模态框，可自由修改弹窗样式、按钮布局，适合需要高度定制的场景。
• 方案二：复用ImgCrop的裁剪逻辑，代码更简洁，但弹窗样式受限于ImgCrop封装，灵活性较低。

内容的提问来源于stack exchange，提问作者Md Javed Akhtar