最近项目要使用图片裁剪上传，因为项目采用的是react+antd，所以第一时间想到的是ImgCrop插件，但是这不满足项目需求，项目要求的是能够缩放裁剪框，最后确定了采用react-cropper来实现图片的自定义裁剪
安装react-cropper
npm install --save react-cropper
新建一个CropperModal.jsx

import React, { useState, useEffect, useCallback, useRef } from 'react'
import PropTypes from 'prop-types'
import Cropper from 'react-cropper' // 引入Cropper
import 'cropperjs/dist/cropper.css' // 引入Cropper对应的css
import { Modal } from 'antd'
function CropperModal({ uploadedImageFile, onClose, onSubmit, cropperModalVisible }) {
    const [src, setSrc] = useState(uploadedImageFile)
    const cropperRef = useRef(null)
    const [cropperSrc, setCropperSrc] = useState(uploadedImageFile)
    // 裁剪
    function onCrop() {
        setCropperSrc(this.cropper.getCroppedCanvas().toDataURL())
    // 确定回传裁剪图片
    function handleSubmit() {
        onSubmit(cropperSrc)
    return (
        <Modal
            visible={cropperModalVisible}
            onCancel={onClose}
            onOk={handleSubmit}
            maskClosable={false}
            <div className={styles['cropper-container']}>
                <Cropper
                    src={src}
                    className="cropper"
                    ref={cropperRef}
                    viewMode={1}
                    // initialAspectRatio={3}
                    zoomable={true} // 是否缩放
                    guides={false}
                    cropend={onCrop} // 裁剪完成触发
                // preview=".cropper-preview"  // 预览框
            </div>
        </Modal>
CropperModal.propTypes = {
    uploadedImageFile: PropTypes.string.isRequired,
    onClose: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired
export default CropperModal
上面代码会将裁剪图片的base64编码回传给父组件
 在父组件中
 
import React, { useState, useEffect, useRef } from 'react';
import { Button, Modal, Input, Upload, message, Select, } from 'antd';
import './index.less';
import CropperModal from '@/components/CropperModal'
import { compressImage} from '@/utils/utils'
const ToolsModal = props => {
	const { dispatch, userInfo } = props;
    const [imgUrl, setImgUrl] = useState('')
    const toolModal = useRef(null);
    // 裁剪图片
    const [cropperSrc, setCropperSrc] = useState('')
    // 裁剪框
    const [cropperModalVisible, setCropperModalVisible] = useState(false)
    function getBase64(img, callback) {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    function beforeUpload(file) {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/x-icon';
        if (!isJpgOrPng) {
            message.error('只支持上传JPG或PNG文件!');
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('图片必须小于2M');
        return isJpgOrPng && isLt2M;
    // 上传logo
    const handleChange = info => {
        setShow(false)
        if (info.file.status === 'done') {
            getBase64(info.file.originFileObj, imageUrl => {
                setCropperSrc(imageUrl)
                setCropperModalVisible(true)
                // setImgUrl(imageUrl)
            });
    // 关闭裁剪modal
    function closeCropperModal() {
        setCropperModalVisible(false)
    // 裁剪回调
    function submitCropperModal(imgUrl) {
        // console.log(imgUrl.length)
        setCropperModalVisible(false)
        // 压缩函数
        compressImage(imgUrl, 200, useImg)
    // 压缩回调+
    function useImg(base64) {
        setImgUrl(base64)
    return (
        <Modal>




    

            <div className='tool-content' ref={toolModal}>
                <div className='tool-logo'>
                    <div className='name'>工具logo</div>
                    <div className='content' style={{ position: 'relative', height: 150 }}>
                        <div className='logo'>
                            <div className='logo-preview'>
                                <img src={objVal.icon ? objVal.icon : clue} alt="" />
                                <Button
                                    className='logo-edit'
                                    onClick={showIconList}
                                    icon={<EditOutlined />}></Button>
                            </div>  
                        </div>
                        <Upload
                            method='get'
                            className='btn'
                            name='file'
                            listType='picture'
                            accept={'image/*'}
                            beforeUpload={beforeUpload}
                            onChange={handleChange}
                            showUploadList={false}
                            <Button>自定义logo上传</Button>
                        </Upload>
                    </div>
                </div>
              </div>
                cropperModalVisible ?
                    <CropperModal
                        uploadedImageFile={cropperSrc}
                        onClose={closeCropperModal}
                        onSubmit={submitCropperModal}
                        cropperModalVisible={cropperModalVisible}
                    : null
        </Modal>
export default connect(({ }) => ({
}))(ToolsModal)
utils.js
 
//图片压缩函数
  base64: 图片base64编码
  w：默认宽度
  callback： 回调函数，及时监听压缩后的base64编码
export function compressImage(base64, w, callback) {
  var newImage = new Image();
  var quality = 0.5; //压缩系数0-1之间
  newImage.src = base64;
  // newImage.setAttribute("crossOrigin", 'Anonymous');	//url为外域时需要
  var imgWidth, imgHeight;
  newImage.onload = function() {
    imgWidth = this.width;
    imgHeight = this.height;
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    if (Math.max(imgWidth, imgHeight) > w) {
      if (imgWidth > imgHeight) {
        canvas.width = w;
        canvas.height = (w * imgHeight) / imgWidth;
      } else {
        canvas.height = w;
        canvas.width = (w * imgWidth) / imgHeight;
    } else {
      canvas.width = imgWidth;
      canvas.height = imgHeight;
      quality = 0.5;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 在canvas绘制前填充白色背景
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
    var base64 = canvas.toDataURL('image/jpeg', quality); //压缩语句
    // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
    // while (base64.length / 1024 > 150) {
    // 	quality -= 0.01;
    // 	base64 = canvas.toDataURL("image/jpeg", quality);
    // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
    // while (base64.length / 1024 < 50) {
    // 	quality += 0.001;
    // 	base64 = canvas.toDataURL("image/jpeg", quality);
    callback(base64); //必须通过回调函数返回，否则无法及时拿到该值
到这里就完成了对上传图片的裁剪以及压缩
                    最近项目要使用图片裁剪上传，因为项目采用的是react+antd，所以第一时间想到的是ImgCrop插件，但是这不满足项目需求，项目要求的是能够缩放裁剪框，最后确定了采用react-cropper来实现图片的自定义裁剪安装react-croppernpm install --save react-cropper新建一个CropperModal.jsximport React, { useState, useEffect, useCallback, useRef } from 'react'impo
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import ReactImageProcess from 'react-image-process' ;
const onComplete = data => {
  console . log ( 'data:' , data ) ;
ReactDOM . render (
  < ReactImageProcess mode = "base
 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。
npm run build
 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。
 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！
 有关更多信息，请参见关于的部分。
npm run eject
 注意：这是单向操作。 eject ，您将无法返回！
 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。
 相反，它将所有配置文件和传递依赖项（we
克隆存储库并更改目录。
 git clone https://github.com/RaulB-masai/react-image-compressor.git
cd react-image-compressor
安装npm依赖项
npm install
在本地运行该应用程序。
 npm start
				
react+antd+react-cropper+lrz 实现图片剪裁后压缩上传
需要安装的依赖
npm install react-cropper 图片裁剪
npm install lrz 图片压缩
关于react-cropper图片裁剪器
参考官方文档https://github.com/roadmanfong/react-cropper，另外本文也会对其一些常用的功能进行注释
关于l...
gl-react您需要安装gl-react。 npm i -S gl-react
 gl-react-native您需要安装gl-react-native并在RN中链接存储库。 npm i -S gl-react-native & rnpm link
 react-native Android要求您拥有RN 0.28或更高！
{ImageCrop}道具
				
原理：先固定canvas的宽高，把整张图片放到canvas中，这时整张图片就已经同比例缩小了，再获取canvas缩小的图像数据，转成base64 。如果对截取的高度有要求，会从中心位置上下截取要求的高度。
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport content=" width="device-w
				
vue之使用Cropper进行图片剪裁上传
在项目中，对上传的图片按照比例和尺寸进行裁剪，以便于应用到不同的场景和平台上。这里采用cropper插件裁剪图片
一、cropper的使用
使用教程：https://github.com/fengyuanchen/cropper#options
二、用例：
点击头像上传图片→对图片进行裁剪
				
因业务需求，需要用户自定义个人头像（图片剪切上传）；调研了之后，决定使用react-cropper插件来实现头像上传功能！
react-cropper插件还是很全面不错的， 满足了功能的需要。
步骤实现：
      npm install --save react-cropper
2、文件引入
      import "cropperjs/dist/cropper.css...
				
useNavigate是react-router-dom的Hook之一，用于在function-based组件中实现编程式导航。该Hook返回一个navigate函数，可以用来跳转到指定的路由路径。
使用useNavigate的步骤如下:
1. 在组件中引入react-router-dom库中的useNavigate。
2. 在组件中调用useNavigate，创建一个navigate函数。
3. 在需要导航的地方调用navigate函数，并传递要跳转的路径。
示例代码如下:
import { useNavigate } from "react-router-dom";
function MyComponent() {
  const navigate = useNavigate();
  function handleClick() {
    navigate("/new-route");
  return (
      <button onClick={handleClick}>Go to new route</button>
以上是useNavigate的使用方法，希望能帮到你。