react 图片压缩

React图片压缩可以通过使用react-cropper-pro组件来实现。react-cropper-pro是一个简单轻量的图片上传、裁切、压缩组件，不依赖antd/element等第三方UI库，底层依赖react-cropper。你可以通过以下步骤来使用react-cropper-pro实现图片压缩：

1. 首先，在你的React项目中安装react-cropper-pro。可以使用yarn命令进行安装：

yarn add react-cropper-pro

2. 在需要使用图片压缩功能的组件中引入CropperPro组件：

import CropperPro from 'react-cropper-pro';

3. 在组件中使用CropperPro组件，并传入相应的属性。其中`defaultImg`属性用于设置默认显示的图片，`onChange`属性用于在图片裁切或压缩完成后触发相应的回调函数，`onDel`属性用于在删除图片时触发相应的回调函数。例如：

export default () => (
  <CropperPro
    defaultImg=""
    onChange={(file) => console.log(file)}
    onDel={(image) => console.log('remove', image)}
  />
);

通过以上步骤，你就可以在React项目中使用react-cropper-pro组件来实现图片压缩功能了。请注意，你需要根据具体需求设置相应的属性和回调函数来满足你的需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [使用react-cropper-pro实现图片裁切压缩上传](https://blog.csdn.net/m0_65808332/article/details/127319109)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]