2.导入 react-cropper 组件：

import React, { useRef, useState } from 'react';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';

3.创建组件：

import React, { useRef, useState } from 'react';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';
function cropper() {
  const cropperRef = useRef(null);
  const handleCrop = () => {
    const imageElement: any = cropperRef?.current;
    const cropper: any = imageElement?.cropper;
    const back64Cropper = cropper.getCroppedCanvas().toDataURL();
    console.log(cropper.getCroppedCanvas().toDataURL("image/jpeg"), "裁剪的base64编码");
    const base64Data = back64Cropper; // base64 格式的图像数据
    const url = base64ToUrl(base64Data); // 转换为 URL
    console.log(url, "剪切url"); // 输出 URL
  function base64ToUrl(base64Data: any) {
    const blob = base64ToBlob(base64Data); // 将 base64 转为 Blob
    const url = URL.createObjectURL(blob); // 生成 URL
    return url;
  function base64ToBlob(base64Data: any) {
    const byteString = atob(base64Data.split(',')[1]); // 将 base64 的数据部分解码成二进制数据
    const mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; // 获取 MIME 类型
    const ab = new ArrayBuffer(byteString.length);
    const ia = new Uint8Array(ab);
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    return new Blob([ab], { type: mimeString }); // 生成 Blob 对象
  return (
      <Cropper
        ref={cropperRef}
        src="https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
// 你所需要剪切图片的路径
        style={{ height: 400, width: '100%' }}
      // 设置其他相关参数，例如裁剪框宽高比、裁剪框移动限制等
      <button onClick={handleCrop}>Crop</button>
export default cropper
这样即可实现对图片的剪切，常见场景运用在antd的Upload组件里，当上传完成后对图片剪切，这里实现了剪切的demo，有相关需求的话根据场景自己做改动
 
控制台内打印出剪切后的url 传递即可
                                    react-cropper Cropperjs 作为 React 组件演示 单击以获取演示文档 Cropperjs 安装 通过 npm npm install --save react-cropper 安装 您的项目中需要来自cropperjs 的cropper.css。
由于该项目依赖于cropperjs，它位于/node_modules/react-cropper/node_modules/cropperjs/dist/cropper.css 或 node_modules/cropperjs/dist/cropper.css 中，用于 npm 3.0.0 版以后的重大变更（版本 >= 2.0.0) 已删除对 ref 的支持。
使用 onInitialized 方法获取裁剪器实例。
在 2.1.0 中添加了反向引用支持。
要设置初始纵横比，而不是使用 aspectRatio 使用 initialAspectRatio。
道具数据、canvasData 和cropBoxData 直接传递给cropperjs 并且它们各自的setter 不像之前那样被调用。
React Cropper 
                                    cropper 是一款基于 JavaScript 的图片裁剪插件，通过 Canvas 技术实现了图片的裁剪和截图功能。这个插件，可以实现上传图片前进行裁剪得到想要的图片，比如上传头像
                                    推荐开源项目：React Cropper - 简洁高效的图片裁剪库
项目地址:https://gitcode.com/react-cropper/react-cropper
React Cropper 是一个基于 React 的轻量级图片裁剪组件，为前端开发者提供了一种简单、直观的方式来实现图片的自由裁剪功能。这个项目的目的是帮助开发者在 web 应用中轻松集成图片处理功能，无需深入了解图像处理的...
                                    推荐一款强大的React图像裁剪库：react-cropper
项目地址:https://gitcode.com/roadmanfong/react-cropper
在前端开发中，尤其是在涉及用户上传图片和进行个性化裁剪时，一个高效的图像处理工具是必不可少的。今天，我要向大家推荐的是一个专为React框架设计的轻量级、功能丰富的图像裁剪库——react-cropper。
react-cr...
                                    最近公司项目在做一个求职工具类的小程序，小程序端有企业Logo的显示，为了保证图片在小程序端的展示效果，所以要求在后台管理系统进行企业Logo上传时需要限定上传的图片尺寸和比例。
为了减少管理人员的录入成本，需要在Logo上传前进行裁剪操作，保证上传进来的图片都是规则的正方。，此处用到了react-cropper组件，本文主要介绍了react-cropper组件在Ant Design Pro项目中...
                                    因业务需求，需要用户自定义个人头像（图片剪切上传）；调研了之后，决定使用react-cropper插件来实现头像上传功能！
react-cropper插件还是很全面不错的， 满足了功能的需要。
步骤实现：
      npm install --save react-cropper
2、文件引入
      import "cropperjs/dist/cropper.css...
                                    文章目录一、图片裁剪插件介绍ImgCrop1. 使用ImgCrop2. 上传函数3. 获取图片base64注意：二、react-cropperreact-cropper使用1. 组件内使用2. 裁剪框对图片进行裁剪（1） 组件中设置上传裁剪框（2） 设置state变量（3） 图片上传时更改state3. 设置裁剪框CutModal（1）裁剪框接收的props（2）裁剪框组件（3）裁剪框用到的state变量（4）原图展示函数（5）图片裁剪函数4. 父组件获取裁剪后的照片(1) 父组件调用函数（2）裁剪展示函数
                                    1. 安装 react-cropper
npm install --save react-cropper   //或者
yarn add  react-cropper
2. 组件内引入
import Cropper from "react-cropper"; // 引入Cropper
import "cropperjs/dist/cropper.css"; // 引入Cropper对应的css
3. 函数式组件
1. jsx文件
import { useState } from 'react';